Docker For Your Dev Environment

A few weeks ago I was thinking about how to make setting up an existing codebase of a frontend project easier for new employees or backend devs who rarely do this. To make this into a reliable process without running into a lot of downsides we can use Docker.

Requirements for a solution

• Recompiling when changing a file has to be the same
• Compile times, especially initial compile time should not get any slower

Dockerfile

FROM node

RUN mkdir /app 
WORKDIR /app

COPY package.json /app/package.json
COPY package-lock.json /app/package-lock.json
RUN npm install

COPY ./config /app/config
COPY ./public /app/public
COPY ./src /app/src
COPY ./tests /app/tests
COPY ./.git /app/.git

RUN npm run build

CMD npm run start

EXPOSE 3000

docker build ./ -t web-devserver
docker run -it -p 3000:3000 -v $(pwd)/src:/app/src -v $(pwd)/config:/app/config -v $(pwd)/public:/app/public web-devserver

• split the COPY entries in the Dockerfile. This makes incremental builds faster because as long as the copied files stay the same Docker can skip the step
• do a RUN npm run build once so when npm run start is compiling the project it only has to do an incremental build instead of a clean one.
• docker run with option -v mounts the corresponding folder into the Docker container. This enables the rebuilding on file changes.