I was building out an image for a swagger diff api (link) and quickly realised that the size of the Node-Jessie image is > 600mb. Which is just too bloody much for my 12 lines of expressjs.
This image is based on the popular Alpine Linux project, available in the alpine official image. Alpine Linux is much smaller than most distribution base images (~5MB), and thus leads to much slimmer images in general. This variant is highly recommended when final image size being as small as possible is desired. The main caveat to note is that it does use musl libc instead of glibc and friends, so certain software might run into issues depending on the depth of their libc requirements. However, most software doesn’t have an issue with this, so this variant is usually a very safe choice. See this Hacker News comment thread for more discussion of the issues that might arise and some pro/con comparisons of using Alpine-based images.
To minimize image size, it’s uncommon for additional related tools (such as git or bash) to be included in Alpine-based images. Using this image as a base, add the things you need in your own Dockerfile (see the alpine image description for examples of how to install packages if you are unfamiliar).
The problem with the alpine image is that it does not contain GIT (as you can see from the above quote), which is a requirement for NPM to work properly.
So, the fast and easy way is to just add git to the dockerfile.
You simply add RUN apk --no-cache add git to your Dockerfile and you are good to go.
Doing this I ended up at an image size of 109mb down from 650mb, not bad. Anyway, my Dockerfile went from
Note the change from node:8.15-jessie to node:8.15-alpine as well.
If you want to know more about packaging simple node services inside a docker container, I highly recommend this article
Today, ill just introduce a nifty little trick to create a loading screen, to let your users know that your app is still working, even though it takes a while to do the initial load.
The idea is to add the loading/splash screen to the .public/index.html file inside the <div id="app"></div> or whatever your mount point is, because vue will remove whatever is inside, when it is done loading the components.
I’ve just created a new vue app from the CLI. To simulate the slow rendering I’ve put a delay function in the HelloWorld.vue which is then called inside of the beforeMount()
In the .public/index.html file I’ve added;
which is just some simple animation css and inside the <div id="app"></div>I’ve added the following: