Building with docker

Using docker to run the blog locally

In order to easily recreate the blog locally you can use the docker installer here and a local server will be available at http://localhost:9090/elm-blog/ (production env using Nodejs) and http://localhost:8080/src/Main.elm (dev env using elm reactor).

git clone https://github.com/dptole/elm-blog
bash elm-blog/docker/install-container.sh

This command will:

• Remove a container named "elm-blog";
• Run a new container named "elm-blog" using the "node:12-alpine" docker image, and setup the file /docker/entrypoint.sh as the... entrypoint for the container;
• The container will map the root of the repo as the path /app/ inside of the container;
• The container will require the ports 8080 (dev) and 9090 (prod) to be available. They map to the same ports internally

The /docker/entrypoint.sh

When the container is successfully created docker runs its entrypoint. This file will:

• Install curl, vim and bash (alpine is pretty dry);
• Install elm 0.19.1;
• Install [email protected] for more optimized bundles;
• Start the dev server in the background (elm reactor --port 8080);
• Start the prod server in the background (bash run.sh);
• Enter an infinite loop to avoid a server crash restarting the container. The loop sleeps for 2 ^ 20 seconds

Build dev

You don't need to do anything other than update the elm files and reload http://localhost:8080/src/Main.elm to see the changes, thanks to elm reactor

Build prod (bash run.sh)

This command runs many other commands, including elm optimizations, and at the end starts up the prod server. The commands include:

• Copy the /frontend/src/Main.elm file to a temporary one;
• Edit isProdEnv = False to isProdEnv = True on the temporary file;
• Run elm make --optimize using the temporary file. It outputs to elm.min.js;
• Delete the temporary file;
• Compress and mangle elm.min.js according to the instructions to optimize elm.min.js;
• Create the file /frontend/index.html using the optimized elm.min.js;
• Output some stats (Elm LOC & size/JavaScript LOC, gzipped, brotlied & size);
• Copy the file /frontend/elm.min.js -> /backend/public/js/elm.min.js;
• Start the prod server at http://localhost:9090/

This whole process takes a few seconds due to the optimization step.

If you want to edit backend or just run the build process again run the command bellow:

sudo docker exec elm-blog bash -c '
  server_pid="$(ps | grep -r '\''[0-9] node'\'' | awk '\''{print$1}'\'')";
  kill $server_pid;
  bash run.sh &
'

There is not much happening here:

• Get the prod server's process id in order to terminate it;
• Run the build process in the background

You'll see all the build process and might even catch some errors. Just type CTRL+C to go back to the terminal.

In case you just want to restart the backend server without running the build process run the command below:

sudo docker exec elm-blog bash -c '
  server_pid="$(ps | grep -r '\''[0-9] node'\'' | awk '\''{print$1}'\'')";
  kill $server_pid;
  cd backend;
  node app &
'

To enter the container:

sudo docker exec -ti elm-blog bash

To remove the container just run:

sudo docker rm -f elm-blog