React - Docker container

ℹ️ Introduction

This is a Docker template container for React development projects. You can use this container to start programming locally for development and testing purposes. I recommend opening the Docker container in Visual Studio Code.

⚡🏃‍♂️Quick Setup

This stack contains:

1. Node.js (required for React) supported and tested versions (as of July ‘24)
   • Node.js version 16
   • Node.js version 18
   • Node.js version 20
   • Node.js version 22 (default)
     ^{*To change the version, update the ‘FROM node’ line in Dockerfile_Nodejs_React_Cont}
2. The core Node.js Docker compose file with the React and Next.js packages. This is required to create the projects mentioned in the next paragraph.
   • Quick setup:
     • Configure file: .env
     • Execute docker file: compose -f compose_nodejs_react_cont.yml up -d --build
3. Project-specific Docker Compose files to create different types of start-up projects based on templates. Currently:
   • A project created with the legacy tool ‘npx create-react-app’ (CRA), known as the traditional React model, where rendering always occurs on the client. This tool offers many templates that can be used (you can indicate which to use in the .env file).
     • Quick setup2:
       • Configure file: .env
       • Execute docker file:

       compose -f compose_cra_project.yml up -d  --build

   • Project created with Next.js, the now preferred package, using ‘npx create-next-app’.This project is still a traditional React routing-based application (à la CRA), but this time it is based on our own template, which will give you a push in the right direction. Note that for this project, Next.js needs a specific configuration (which has been done in: ClientRouter.js )
     • Quick setup3:
       • Configure file: .env
       • Execute docker file:

       compose -f compose_nextjs_cust_cra_project.yml up -d  --build

     • The preferred Next.js project using the (default) automatic routing and the server rendering feature.
       • Quick setup3:
         • Configure file: .env
         • Execute docker file:

       compose -f compose_nextjs_cust_project.yml up -d  --build

       ^{*Please see next paragraph for reference to more details configuration information}

🛠️ Setup instruction and usage

While the above Quick setup will make you get started I recommend to open the Setup & Usage Guide guide in the Howtos subdirectory. This explains the basic installation of the React container and the additional projects that can be created.

License
This file is part of: React Development Template Stack Copyright (c) 2025-2026 Nico Jan Eelhart.This repository is MIT licensed and free to use. For optional commercial support, customization, training, or long-term maintenance, see COMMERCIAL.md.

─── ✦ ───