Dockerizing ReactJS, Node.JS apps

Assuming you already have a basic knowledge of Node.jS and Docker.
If you need support of how to install & get started with Node.JS & Docker then you can check their official documentations.

For Node.JS I've used npm but you can use Yarn which is a quicker way to manage your Node.JS dependencies & packaging.

Likewise for Docker you can get the software & installation steps here for your OS.

This is a very basic dev/local setup to demonstrate how to get your Node.JS app published on Docker Hub and run using basic Docker commands. Will try to cover other areas like Kubernets, automation in a much wider sense in separate post.

For my example I'm using a simple ReactJS web app.

Create RactJS app & test your ReactJS app locally first (though not the focus of this post, but a quick recap);

$ npm install -g create-react-app //install create react app 
$ create-react-app frontend //create your app
$ cd froentend
$ npm start //start & test

Modify/update your web app with whatever functionality that you need to implement.
My app is a simple SPA with a form and lists users by calling a microservice API (simple API call using JQuery). Not very fancy but just to show case/setup. http://localhost:3000/#

Dockerizing

First create a file with name Doclerfile in your ReactJS root directory.

Then open the file in any text editor and add following;

FROM node:boron
# MAINTAINER manmohanpanda

# Prepare app directory
RUN mkdir -p /usr/src/app
ADD . /usr/src/app

# Install dependencies
WORKDIR /usr/src/app

# Install app dependencies
COPY package.json .

RUN npm install

COPY . .

# Build the app
RUN npm build

# Expose the app port
EXPOSE 3000

# Start the app
CMD npm start

Add a .dockerignore file in the same directory as your Dockerfile. I've added following files to be ignored, but you can choose what you want not to package;

.git
.gitignore
.editorconfig
node_modules
*.log
*.md

Building the Docker image

Run following from the project root directory in your shell;

docker build -t <your username>/newway-frontend .

You can check your image by doing the following;

$ docker images

If all well then it should list down

$ docker images
REPOSITORY                             TAG                 IMAGE ID            CREATED             SIZE
manmohanpanda/newway-frontend          latest              961c7c38431b        About an hour ago   793MB

Run & Test the Docker image

Run the image using following;

$ docker run -p 49160:3000 -d <your username>/newway-frontend

If you want to check status docker ps, docker logs

Publish the Docker image to Docker Hub

$ docker push manmohanpanda/newway-frontend