Do first, understand later. That is the approach here. If you are new to some of these technologies, don’t worry about it. Just follow along, and dive into topics afterwards.

In this guide, we will:

• Setup a basic React App.
• Create a React Docker Image.
• Setup an Azure Container Registry (ACR).
• Push the docker image to Azure Container Registry (ACR).
• Deploy using Azure Container Instance (ACI).
• Access the React app and set up Cloudflare SSL.

What you will need:

• Docker installed on your local system. (docker.com/products/docker-desktop)
• Node.js installed on your local machine. (nodejs.org/en/download)
• Yarn installed on your local system. (yarnpkg.com)
• An Microsoft Azure account. (sign up for free azure.microsoft.com/en-us/free)
• A Cloudflare account with a domain registered. (cloudflare.com)

Creating a new React App

Head over to your local machine and open your Command Prompt (CMD) or PowerShell type

npx create-react-app <app_name>

To create a new react app. It installs all basic dependencies required to run a react app. npx will install and execute the create-react-app package. Make sure that your app name does not have any capital letters, else it will give an error. Once the command is executed successfully you will find instructions like (for eg let's take app name as react-app)

cd react-app

yarn start

At this point, you can type the command cd , to go to your app folder.

Next, do yarn start, to start your app on the localhost by default react app will use port 3000.

If you have followed all the above-mentioned steps correctly you should see this page on your default browser.

So, this will be our basic react app which we will be deploying using docker now open the current folder using your favorite text editor. If you don't have any text editor installed I recommended you to install Vistall Studio Code.

Now to exit the react app running on your terminal press CTRL + C. Then type

code .

To open the current working folder on VS Code. To understand the folder structure and learn more about react app. I highly recommend you to check the official react documentation. React

Creating a React Docker Image

Once you have opened the current working folder with your favorite text editor. Create two new files named Dockerfile (Note that 'D' is in caps and this file doesn't have any extension) another one is .dockerignore (This file is the same as .gitignore file just to ignore 'node_modules' folder).

Now, your folder structure will look somewhat like this

Now copy and paste the below lines to Dockerfile

#1. Base Image
FROM node:15.4 as build 

#2. Working Dir
WORKDIR /react-app

#3. Bring package.json file
COPY package*.json .

#5. Install all dependencies
RUN yarn install

#6. Copy files from the current working directory of the local system WORKDIR
COPY . .

#7. Get the optimized build of react app
RUN yarn run build

#8. Base Image
FROM nginx:1.19

#9. Get the ngnix configurations
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf

#10. Copy the build folder of the react-app to ngnix HTML directory
COPY --from=build /react-app/build /usr/share/nginx/html

Now, let's configure the .dockerignorefile . Copy and paste the below snippet.

**/node_modules

Now, you may think about where to find the Nginx configuration. So, now create a new folder named 'nginx' and create a new file inside it and name it as 'nginx.conf'. The folder structure will look somewhat like

Copy and paste the below Nginx configurations in that file created in the last step.

worker_processes  1;

events {
  worker_connections  1024;
}

http {
  server {
    listen 80;
    server_name  localhost;

    root   /usr/share/nginx/html;
    index  index.html index.htm;
    include /etc/nginx/mime.types;

    gzip on;
    gzip_min_length 1000;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

    location / {
      try_files $uri $uri/ /index.html;
    }
  }
}

Now, the next setup is to create a docker image. To create a docker image docker must be installed on your local system. Make sure you do that first then run the below commands.

docker build -t react-app .

Here 'react-app' is the docker image name. Best practise to name a docker image is docker_id/docker_image_name . Here just to simplify things we are following the easy method.

Once the command is executed successfully. To check if the image is created you can run the docker command

docker image ls

If you have followed all the above-mentioned steps correctly you will find react-app in that list returned.

Setup an Azure Container Registry (ACR)

First, search for Azure CLI and install it for your OS.

Once Azure CLI is installed successfully. To login using Azure CLI type

az login

It will open a new browser tab enter your credentials and log in to your Azure account. On successful sign in it will return a success JSON to your terminal. Somewhat like this

Now, go to Azure Portal Search for Container Registries

Create a new Container Registry. Check the below image for the basic settings recommended.

Then click on 'Review+Create' to create a Container Registry. Once you get a success message saying validation passed click on the 'Create' button to create Container Registry.

Now, the next setup is to log in to this container registry created using Azure CLI. To read more check out the Azure Docs.

az acr login --name reactappv

On success now we have to tag and push the 'react-app' docker image run the below docker command one by one.

docker tag react-app reactappv.azurecr.io/react-app

docker push reactappv.azurecr.io/react-app

Finally, on push, you have to get a digest to verify the authenticity in the terminal.

Now, run the below command on the terminal to enable admin permission.

az acr update -n reactappv --admin-enabled true

On success, you will get a JSON response to your terminal. The next setup is to create a Container Instance and connect this Container Registry.

Setup an Azure Container Instance (ACI)

Now, go to Azure Portal Search for Container Instances

Now, click on the 'create' button to create a new Container Instance. Check the below images for recommended container instance settings.

Then click on 'Review+Create' to create a Container Instance. Once you get a success message saying validation passed click on the 'Create' button to create Container Instance.

It may take a minute. Once your deployment is complete. Click on the 'go-to resource' button where you will find your public IP.

Copy and paste your public IP to your browser window. React template page should open if you have followed all the setup mentioned above correctly.

In the next part, we will be seeing how to set up free and secure SSL (Secure Sockets Layer) for any web application. Provided you have a domain configured at Cloudflare and a public IP.

Configure Cloudflare SSL

This is the most simple part. First, make sure you have a domain and you have added that domain to Cloudflare. How to add a new domain to Cloudflare ?

In order to connect a domain to the public IP or the react app created in the previous section, you have to create a new 'a' record.

Cloudflare

Now click on save. Hurray!! Now our react app is secure.

Cheers,
Vignesh