Dockerise React Application (Next.js)

5 min readOct 1, 2023

Introduction

This is a short guide on Dockerising a React application where the Next.js framework is used (other React frameworks can also be used). This guide draws most from Rashid Ali’s How to Dockerize a Next.js Application for beginners.

Docker — Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers. The service has both free and premium tiers. The software that hosts the containers is called Docker Engine. — Wikipedia
Node — Node.js is a cross-platform, open-source server environment that can run on Windows, Linux, Unix, macOS, and more. Node.js is a back-end JavaScript runtime environment, runs on the V8 JavaScript engine, and executes JavaScript code outside a web browser. — Wikipedia
React — React is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta and a community of individual developers and companies. React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js. — Wikipedia
Next.js — Next.js is an open-source web development framework created by the private company Vercel providing React-based web applications with server-side rendering and static website generation. — Wikipedia

Process Steps

Install Docker
Install Node then Create/Run React App (Next.js)
Prepare Dockerfile
Create Docker Image
Run Docker Container

1. Install Docker

Check if Docker is already installed:

# Check docker installation
docker - version

# Example output if installed
Docker version 17.12.0-ce, build c97c6d6

If Docker is not installed, go to https://docs.docker.com/get-docker/ and install Docker for your Operating System.

Run docker --version again to check your installation

2. Install Node then Create/Run React App

If you already have a running React application, move onto 3. Prepare Dockerfile and .dockerignore

Go to Next.js installation page found here: Getting Started Page
Node can be installed here: nodejs.org (link is also found in the Next.js installation page)

Create React App

Build your Next.js React App by running npx create-next-app@latest.

# Create the next.js template
npx create-next-app@latest

# These prompts will appear
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias? No / Yes
What import alias would you like configured? @/*

After the prompts, a folder with your project name will appear. This is your freshly made project that is now ready for testing.

Test the React App

Test your React App by running it,

# In the root directory of your project:
# Install all dependencies
npm i

# Start development server
npm run dev

# Go to browser and type localhost:3000 into URL

This starts the development server which can be loaded in your browser on port 3000 (localhost:3000). Note the basic Next.js template app runs on port 3000.

localhost 3000 in URL loading Next.js template

3. Prepare Dockerfile and .dockerignore

Now that you have a running React App, create these two files in your project’s root directory:

Dockerfile (this issues commands to build an image)
.dockerignore (this ignores files when transferring to daemon)

In .dockerignore add just this one line to prevent node_modules from being copied into the image (it is automatically installed later):

# Put this in .dockerignore file
node_modules/

In Dockerfile add:

# Dockerfile
# preferred node version chosen here (LTS = 18.18 as of 10/10/23)
FROM node:18.18-alpine

# Create the directory on the node image
# where our Next.js app will live
RUN mkdir -p /app

# Set /app as the working directory in container
WORKDIR /app

# Copy package.json and package-lock.json
# to the /app working directory
COPY package*.json ./

# Install dependencies in /app
RUN npm install

# Copy the rest of our Next.js folder into /app
COPY . .

# Ensure port 8080 is accessible to our system
EXPOSE 8080

# Run dev, as we would via the command line
CMD npm run dev

Once the Dockerfile is made, a Docker image can be created.

4. Create Docker Image

You can now create your first Docker image with this command:

# Note the period (.) at the end is required
docker build -t docker_nextjs:developement .

# List your created images
docker image ls

If you are testing on macOS you may get this error:

# Error on macOS
docker: Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?.
See 'docker run - help'.

# First start Docker app
open -a Docker

# Rebuild image
docker build -t docker_nextjs:developement .

This is because Docker is packaged as an application, not a service, for both Mac and Windows and so it must be started: How to start docker from command line in mac (Stackoverflow).

5. Run Docker Container

After the image is created, run a Docker container using the following command:

# Docker publish command
docker run --publish <container exposed port>:<app exposed port> <docker image name>:<image tag>

# Docker publish example onto port 8080
docker run --publish 8080:3000 docker_nextjs:developement

# List your containers
docker container ls -a

In this example, go to localhost:8080 in your browser to test the app. This is because while the app is exposed on port 3000 within the container, the container is exposing port 8080 to the outside. There would be no response from localhost:3000 if you attempted to hit it from your computer.