Sunday, March 21, 2021

Create a docker image for a React app

 This tutorial will show you how easy it is to create a docker image for a react application. Lets get started.

Pre-requisites

You need to have the following installed on your computer:
  • Node.js & npm
  • Docker desktop

Create a React app

Choose a suitable working folder and then execute the following command in a terminal window to create a React app named react101:

npx create-react-app react101 --use-npm

cd react101 

npm start

The app will display in your default browser as shown below:


Build the React app

Stop the app by typing CTRL C. Execute the following command from a terminal window in the application's root folder to create a deployable version of the application.

npm run build

This creates the deployable artifacts in the /build folder and looks like this:

Containerize React app

We will use the nginx web server docker base image. Create a text file named Dockerfile in your application's root folder and add to it the following:

FROM nginx:alpine 
WORKDIR /var/www/web
COPY build .
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80

The nginx.conf configuration file is used to set the nginx document root . Add the following code to nginx.conf:

events { }
http {
  include mime.types;
  server {
    listen 80;
    index index.html;
    location / {
      root /var/www/web;
      try_files $uri $uri/ /index.html =404;
    }
  }
}

We can now build a docker image by running the following command:

docker build --tag react:1.0.0 .

You should see your docker image when you run the following docker command:

docker images

Your output will look similar to this:
react  1.0.0  8fa6896c8bb4   About a minute ago   23.1MB

Let's run the image as a container and see if we can load our react app in a browser. Run the following command to run the web app on port 8888 in a container:

docker run -d -p 8888:80 react:1.0.0

Point your browser to http://localhost:8888 and you should see your web app being served from a docker container.

No comments:

Post a Comment