A simple React(Next.js) app development on Docker

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:

mkdir docker-nextjs
cd docker-nextjs
yarn init

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.

Create a 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 localhost:3000 .

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 localhost:3000 .

Wrapping up

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! 🐳