Simply run make run
To get started, create a directory for the project, here named js-app
, and create a basic Dockerfile like so:
FROM node:14.3
WORKDIR /app
You then have to create an entry in the docker-compose file that bind mounts the app's directory to the container's working directory:
js-app:
image: node:14.3
volumes:
- type: bind
source: ./js-app
target: /app
You then need to run the container and initialize the project: (host)
docker-compose run --rm js-app /bin/bash
(container)
npm init -y # or create-react-app
npm install <package1> <package2>
*special note: if you are creating a react app with create-react-app
, you will want to modify the docker-compose to target the root of the container (/
), remove the app directory, and run create-react-app app
. After doing this you will need to revert the docker-compose service to look like the one above.
Next, modify the Dockerfile to its final form:
FROM node:14.3
WORKDIR /app
COPY package*.json /app
RUN npm install
COPY . /app/
# the CMD command differes depending on the project
CMD [ "npm", "start" ]
At this point you need to modify the docker-compose file to build with this Dockerfile
js-app:
build: ./js-app
volumes:
- type: bind
source: ./js-app
target: /app
tl;dr -> run make install
Because the docker-compose.yml file bind mounts the app's directory, it will overwite the contents of the Dockerfile's npm install
run command (or any file that is placed in the overwritten directory for that matter). This is normally fine, except on fresh installs or after removing the node_modules directory. To rectify this, you will need to run the container interactively and manually install dependencies:
(host)
docker-compose run --rm js-app /bin/bash
(container)
npm install
Please not that this is only an issue for bind-mounted containers. Since you will not be bind-mounting in production, this will not be an issue outside of development.
A potential solution to this problem where the results of npm instll
don't get overwritten, with the downside that you have to restart the container when deps change, is shown here: https://stackoverflow.com/a/35317425
This is an attractive alternative when there are many developers on a project.