Running React and Node.js in one shot with Docker!
This is the second part of my previous post. If you haven't read my first post, please check it out as it serves as a base for this part.
- Connecting & Running with Concurrently (first post)
- Using Docker (this post)
In this post we'll be looking at the docker way of running React and Node.js. This is a kind of advance development setup and I hope you already installed and know the basics of docker and docker-compose. If you want to know more about docker head over to docker.com
$ mkdir awesome_project
In this approach we'll not polluting the root folder. Client and Server will stay on their dedicated folder. In this way we can separate client and server at any time if we have to, without breaking anything. To make it work properly, each of them should have a Dockerfile and all will be connected with the docker-compose.
$ cd awesome_project && npx create-react-app client
This will create a folder named client which holds our react app.
Create a file name
Dockerfile in the client folder and paste the following code.
FROM node:lts-slim RUN mkdir -p /usr/src/app WORKDIR /usr/src/app EXPOSE 3000 CMD [ "npm", "start" ]
This will be our docker image instructions for our react app where our react app will get compiled and run.
Our server code will stay in a folder named
server in the root folder. Here you can use express or any other framework of your choice to make up the server. Or you can use this sample to quickly setup a server.
Dockerfile in the server folder. And make sure you have a
dev script in you
package.json. If you have different script for running your server, you can change the
CMD instruction in the
FROM node:lts-slim RUN mkdir -p /usr/src/app WORKDIR /usr/src/app EXPOSE 5000 # You can change this CMD [ "npm", "run", "dev" ]
Docker-compose helps us to combine and run mutiple Dockerfile into a single network container. Make a file named
docker-compose.yml in the root of the project and copy the following code.
version: "3" services: frontend: container_name: awesome_web build: context: ./client dockerfile: Dockerfile image: vikasraj/awesome_web ports: - "3000:3000" volumes: - ./client:/usr/src/app backend: container_name: awesome_server build: context: ./server dockerfile: Dockerfile image: vikasraj/awesome_server ports: - "5000:5000" volumes: - ./server:/usr/src/app
Finally, we'll have a folder structure somewhat like this.
> awesome_project > client # This is our react front-end > node_modules > src - Dockerfile - package.json > server # This is our Node.js server > node_modules - index.js - Dockerfile - package.json - docker-compose.yml
Now we can run our project by running following command. This will create docker images and volumes which will run in the containers.
$ docker-compose up
If you want to build your images before starting your containers.
$ docker-compose up --build
This can be a tedious approach to work with as you must have the knowledge of docker and docker-compose. But It has some advantage:
- One setup for all development workflow.
- Docker can be used for any programming language.
- Production Deloyment can be a breeze, if you use docker in your DevOps.
- No npm package required (though replaced by docker).