Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

April 11, 2023 04:59 am GMT

Dockerize React app for dev and prod

Okay, you have a frontend React app and you want to serve it via Docker. Let's do that!

In this wiki, we will dockerize both the development and production environment via separate Dockerfiles.

Step 1: Project setup

Initialized a pretty standard react project using the default create react app (CRA) template. Or pick your existing React app. Below is the sample project folder structure.

 node_modules public    favicon.ico    index.html    manifest.json    robots.txt src    App.css    App.js    index.css    index.js    logo.svg package.json yarn.lock

Step 2: Init .dockerignore

Add a .dockerignore file, this will help us ignore node_modules, .env etc

.git.gitignore**/node_modules**/npm-debug.logbuild

Step 3: Dockerize Development env

Init Dockerfile

Start by adding a Dockerfile.dev

FROM node:14-alpine AS developmentENV NODE_ENV development# Add a work directoryWORKDIR /app# Cache and Install dependenciesCOPY package.json .COPY yarn.lock .#RUN yarn installRUN npm i# Copy app filesCOPY . .# Expose portEXPOSE 3000# Start the appCMD ["yarn", "start"]

Init docker-compose

Create a docker-compose.dev.yml. Additionally, we will mount our code in a volume so that our code changes are in sync with the container during development.

version: "3.8"services:  app:    container_name: app-dev-c    image: app-dev-i    build:      context: .      dockerfile: Dockerfile.dev    volumes:      - ./src:/app/src    ports:      - "3000:3000"

Let's start our React app for development!

docker-compose -f docker-compose.dev.yml up

To make life easier add docker-compose commands to package.json

"docker-dev-up": "docker-compose -f docker-compose.dev.yml up""docker-dev-down": "docker-compose -f docker-compose.dev.yml down"

Let's check our container!

> docker psREPOSITORY TAG IMAGE ID CREATED SIZEapp-dev latest 5867f4e40c98 About a minute ago 436MB

Visit the app at http://localhost:3000

Step 4: Dockerize Production env

Let's use nginx to serve our static assets and help resolve routes when we're using React Router or any kind of routing.

Configure nginx

Create a nginx.conf with the below content. This will help handle URI changes during routing.

server {  listen 80;  location / {    root /usr/share/nginx/html/;    include /etc/nginx/mime.types;    try_files $uri $uri/ /index.html;  }}

Init Dockerfile

Start by adding a Dockerfile.prod

FROM node:14-alpine AS builderENV NODE_ENV production# Add a work directoryWORKDIR /app# Cache and Install dependenciesCOPY package.json .COPY yarn.lock .RUN npm i# Copy app filesCOPY . .# Build the appRUN npm run build# Bundle static assets with nginxFROM nginx:1.21.0-alpine as productionENV NODE_ENV production# Copy built assets from builderCOPY --from=builder /app/build /usr/share/nginx/html# Add your nginx.confCOPY nginx.conf /etc/nginx/conf.d/default.conf# Expose portEXPOSE 80# Start nginxCMD ["nginx", "-g", "daemon off;"]

Init docker-compose

Add a docker-compose.prod.yml file

version: "3.8"services:  app:    container_name: app-prod-c    image: app-prod-i    build:      context: .      dockerfile: Dockerfile.prod    ports:        - "8080:80"

Build production image

docker-compose -f docker-compose.prod.yml build

Let's check out our built production image

> docker imagesREPOSITORY TAG IMAGE ID CREATED SIZEapp-prod latest c5db8d308bb9 About a minute ago 23.1MB

Start our production container on port 80 with the name react-app

docker run -p 8080:80 --name react-app app-prod

Visit the app at http://localhost:8080

Here is how the final project struct looks:

 node_modules public    index.html   ...    manifest.json src    App.css   ...    index.js package.json yarn.lock .dockerignore Dockerfile.dev Dockerfile.prod docker-compose.dev.yml docker-compose.prod.yml

Hurrayyy!! We can now use docker in our workflow and deploy our production images faster to any platform.

Original Link: https://dev.to/pvishnuprasaath/dockerize-react-app-for-dev-and-prod-3c84

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To