Often, when developing applications with a microservice architecture, you cannot throughly test out all services until you deploy to a production server. This usually takes much too long to get feedback. Docker helps to speed up this process by making it easier to link together small, independent services locally.
On this article, we will go through how to set and use docker on react.js application development. We will build a simple next.js app and make it as docker image to run a container on your local machine with a production environment.
1. Building a simple Next.js application
First, let’s start a simple server-side rendered react application project and set a minimum docker setting to make a docker image. We are going to use the next.js library which easily allows us to build an SSR react application.
Docker image is a file to create and run a docker container or to build other images. Consider that docker image contains an application and its executable codes to build and run. Refer here for more detail.
Let’s make a new project in your local machine with following commands:
On the newly built nodejs project, let’s install next.js:
yarn add --save next react react-dom
And we should add scripts on
package.json to easily manage the app:
Then we have to set minimal next.js app’s routes. Let’s create a simple hello world page on the main route. We can achieve this by creating
pages/ directory inside the project and add
index.js inside the directory. The file becomes the route and gets rendered as the main page.
pages/index.js and write the following component in the file:
Now we can run the app on our local machine by running the command
yarn run dev . You will be able to access the app on
2. Write Dockerfile to build Docker Image
So far, we just set a minimal hello world next.js application, now let’s make the app to be a docker image.
The docker image can be built with a single file within the project. The
Dockerfile . By definition, “A Dockerfile is a text document that contains all the commands you would normally execute manually in order to build a Docker image.”
So, mainly by writing commands to build and run the app, you make an ingredient to building a docker image. When you build the docker image, docker system reads the Dockerfile that contains all the list of commands and executes it line by line to build an image.
Okay, then let’s write our own
Dockerfile . Create a file with the name of
Dockerfile inside the project directory and fill the file with following code:
The code contains sets of commands to build and run the application. The first line
FROM node:10, the image brings nodejs version 10 from official nodejs docker image, so the app can run on the nodejs environment.
Next command sets the working directory with
WORKDIR which sets the path of application files to
/usr/src/app . Therefore when the container is run with this image, all the copied and built files are going to be located on that location.
Then, we added a command to install dependencies with
npm install and copy the source files to the docker with
COPY . . command. And we should add build command
npm run build for production build and run the app with
npm start .
Good! Now we are ready to build up docker image with the
Dockerfile we created until now. From the terminal, go to your project directory and run the command:
docker build -t <your_username>/docker-nextjs .
With the build command, your docker system will go through the commands on
Dockefile and make out a new image. The
-t flag was to tag your image so you can easily find your image on the list. You can check your docker images with
docker images command.
3. Running up Container with image
To actually run the application with docker, you should run a docker container based on the image.
A container is a runtime instance of a docker image. Each container can be created with docker image as we built so far. Check out more on here.
As we have our own docker image, we can create and run a docker container with the command:
docker run -d -p 3333:3000 <your_username>/docker-nextjs:latest
The command creates a new docker container with image
<your_username>/docker-nextjs:latest with the port binding
3333:3000 . The binding means the application is run on port
3000 inside docker and can be accessed from host’s
By following the article, you would be able to dockerize react application easily with minimum settings. The example just consists of dockerizing the application, but at least you can test the production environment more rapidly with the power of docker. Hope your life gets easy! 🐳