In this article we are going to show you how to setup React in docker container as well as how to setup Node.js and docker compose.

What is Next.js?

Next.js is a React framework that allows you to build supercharged, SEO-friendly, and extremely user-facing static websites and web applications.

Prerequisite Installation

Assume that we already installed Docker and Docker Compose.

Steps for Implementing Docker Compose

There are 3 steps for implementing docker compose:

1. Create Next.js project
2. Create a Dockerfile for running commands
3. Define services to run applications in docker-compose.yml file
4. Start and run project with the help of docker-compose.yml file

1. Create Next.js project

Run command below to create a new project:

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

And name the project frontend.

2. Create a Dockerfile for running commands

Create a file named Dockerfile in the root of project with following content:

FROM composer:2.1 AS composer
WORKDIR /opt/app

# for building front-end
FROM node:16.13.0 AS front
WORKDIR /opt/app/frontend

RUN apt-get update && apt-get install -y git && apt-get install bash

COPY frontend/package.json frontend/yarn.lock ./
RUN yarn install
RUN cp -r node_modules /tmp/node_modules
COPY . /opt/app

3. Define services to run applications in docker-compose.yml file

Create a file named docker-compose.yml in the root of project with following content:

version: '3.7'

services:
  node:
    build:
      context: .
      target: front
    command: yarn dev
    volumes:
      - .:/opt/app
      - /opt/app/frontend/node_modules
    ports:
      - '443:443'
    depends_on:
      - nginx
    environment:
      VITE_APP_API_ENDPOINT: /api

4. Start and run project with the help of docker-compose.yml file

Run command below to build docker container:

$ docker-compose build

Run command below to up docker container:

$ docker-compose up