© The Author(s), under exclusive license to APress Media, LLC, part of Springer Nature 2021
D. B. Duldulao, R. J. L. CabagnotPractical Enterprise Reacthttps://doi.org/10.1007/978-1-4842-6975-6_18

18. Deploying React in Netlify and in Docker

Devlin Basilan Duldulao1   and Ruby Jane Leyva Cabagnot1
(1)
Oslo, Norway
 

After making our application mobile-friendly in a previous chapter with the media query hooks’ help, we are now ready to deploy our front-end application.

We are going to deploy our app in two different ways.

First, we will use Netlify to build, deploy, and host our static site or app. Developers love Netlify because of its drag-and-drop interface that allows for continuous integration and delivery from GitHub or Bitbucket. In this instance, we will be deploying to Netlify using GitHub.

Our next deployment strategy is with the use of a popular container technology called Docker. One of the most significant advantages of using Docker is to package our applications in “containers.” Hence, our application becomes “portable” for any systems running the Windows OS or the Linux OS.

Keep in mind that we are just using a fake local server (using an external CLI tool that runs in a terminal to create a fake server), so we don’t really have a back-end code to compile for the back-end service. It means that the local server or localhost that we have been using will not work with Netlify or Docker.

However, we will still be able to see the application live. Our goal here is to learn how to deploy our front-end application, not the back end, specifically using Netlify and Docker.

Now, let’s go to the package.json because we will need to update our build script. Edit the build script as shown in Listing 18-1.
"scripts": {
    "start": "react-scripts start",
    "build": "CI= react-scripts build NODE_ENV=production",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "test:generators": "ts-node --project=./internals/ts-node.tsconfig.json ./internals/testing/test-generators.ts",
    "cypress:open": "cypress open",
    "start:prod": "npm run build && serve -s build",
    "checkTs": "tsc --noEmit",
    "eslint": "eslint --ext js,ts,tsx",
Listing 18-1

Updating the Build Script in package.json

Now, let’s start setting up the tools we need before we can start deploying our app. The first one up is GitHub.

GitHub

Before we begin, let’s talk about GitHub and what it is used for.

To understand what GitHub is all about, you should know Git, which is an open source version control system. The versioning system allows us to store files efficiently, collaborate more effectively with other developers, make changes, and upload the newest revision.

So what is GitHub? Git is a command-line tool, but the “Hub” in GitHub is where all things come together for everyone as far as Git is concerned and where developers store their projects and other files. To deploy to Netlify, there are some requirements we need to do. We can do several ways, but we would go with the most straightforward path through our GitHub.

Go to this website www.github.com and create your account if you don’t have one yet.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig1_HTML.jpg
Figure 18-1

GitHub website

You can save all your sample codes or sample projects in your GitHub account; no need to keep them locally in your machine.

Go to your project app and save it in your GitHub account.

To do this, you need to click Initialize Repository.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig2_HTML.jpg
Figure 18-2

Initialize Repository or Publish to GitHub

Commit any changes; if there are any, Save, and then Publish to GitHub. Choose the option private repository.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig3_HTML.jpg
Figure 18-3

Commit the GitHub private repository

Next, go to your GitHub account to check if your project has been saved in your private repository. After confirming it, head off to www.netlify.com and create an account if you don’t have one yet.

Netlify

Netlify is a web development hosting platform that allows developers to build, test, and deploy websites. Main features include hosting, serverless functions, forms, split testing, continuous deployment, and other add-ons.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig4_HTML.jpg
Figure 18-4

Netlify website

You can also log in using your GitHub account.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig5_HTML.jpg
Figure 18-5

Login options for Netlify

After creating an account, we are going to create a new site from Git.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig6_HTML.jpg
Figure 18-6

Adding new site

After clicking the New site from Git button, here’s what you’ll see. Choose GitHub for our continuous deployment.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig7_HTML.jpg
Figure 18-7

Choose GitHub for continuous deployment

Then, you’ll see the Create a new site page.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig8_HTML.jpg
Figure 18-8

Search for your repo

Search for the name of your repository.

Once you find it, just click it, and you’ll be directed to the following. Check if you have the same settings, and click the button Deploy site.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig9_HTML.jpg
Figure 18-9

Deploy site page

After clicking the button, the process takes a few minutes, so just sit back and relax for a moment. You’ll see the message “Deploying your site,” which is the first step.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig10_HTML.jpg
Figure 18-10

First step: Deploying the site

If the deployment is successful, you should see the message “Your site is deployed.”
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig11_HTML.jpg
Figure 18-11

Site successfully deployed

Once you have successfully deployed, you should see the following.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig12_HTML.jpg
Figure 18-12

App on Netlify

Now that the app has been deployed, click the free domain name that Netlify has given you. Yes, it’s free, but you cannot customize or change it, although there are paid options wherein you can customize your URL.

Docker

First, let’s discuss what Docker is. Simply, it is a tool to enable developers to create, deploy, and run apps through containers. In containers, we can package up our application with all its parts – from libraries to dependencies – and then deploy it in one package.

Next, let’s try Docker.

We will start first with Docker Desktop on Windows. You’ll see here also the system requirements, and check if your machine is compatible.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig13_HTML.jpg
Figure 18-13

Installing Docker Desktop on Windows. Source: https://docs.docker.com/docker-for-windows/install/

After clicking the button Download from Docker Hub, you’ll be redirected to the following page. Click the Get Docker button to start the installation process.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig14_HTML.jpg
Figure 18-14

Get Docker button. Source: https://hub.docker.com/editions/community/docker-ce-desktop-windows

For Mac, the installation process is pretty much the same.

Install Docker Desktop on Mac
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig15_HTML.jpg
Figure 18-15

Installing Docker Desktop on Mac. Source: https://docs.docker.com/docker-for-mac/install/

../images/506956_1_En_18_Chapter/506956_1_En_18_Fig16_HTML.jpg
Figure 18-16

Get Docker Desktop on Mac

And here’s how to download the Docker Engine on Ubuntu.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig17_HTML.jpg
Figure 18-17

Installing Docker Engine on Ubuntu. Source: https://docs.docker.com/engine/install/ubuntu/

The only difference between Ubuntu and the other two, Mac and Windows, is that Ubuntu does not have a Docker client. A Docker client is the GUI or UI for Docker for managing your containers.

After installing Docker, Figure 18-18 shows the Docker client’s dashboard appearance for Windows or Mac if you have containers running. Otherwise, you’ll see a dashboard message: No containers running.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig18_HTML.jpg
Figure 18-18

Docker client dashboard

Docker Ignore

Next, let’s go to our source code because we need to add the Docker ignore file. In the root directory, create .dockerignore.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig19_HTML.jpg
Figure 18-19

Docker ignore file

We are ignoring or not committing the cypress for the tests and the Node modules.

NGINX Config

After that, we need to create the NGINX server configuration. We need the NGINX server to run inside Docker and serve the React application to the browser.

But what is NGINX? Pronounced like “engine-ex,” NGINX is a free, open source, high-performance HTTP or web server that also acts as a reverse proxy, email proxy, and load balancer.

Essentially, it offers low memory usage, load balancing, and high concurrency with its async and event-driven approach, which allows for the processing of many requests at the same time.

In the root directory, create Nginx.conf and add the following configuration.
server {
  listen 80;
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}
Listing 18-2

NGINX Config

Dockerfile

Next, let’s add the Dockerfile.
# Stage 1
FROM node:15-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm install
COPY . ./
RUN npm run build
# Stage 2
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Listing 18-3

Dockerfile

In Listing 18-3, we are using the Alpine version 15 to build Docker images and other small, container-like uses. The WORKDIR (working directory) is like “cdying” or going to the cd directory inside the Docker container.

We are also specifying the ENV PATH. We are copying the package.json and the package-lock.son and dump them in Docker. This is being done in the COPY.

The left side (package.json) is part of your repository, while the right side is part of Docker. We are merely copying the package.json and package-lock.json and dumping them to the root file ./ of Docker.

RUN npm install

This is not being run inside your directory but in the Docker container’s app directory. The app directory is the same root directory where we dumped a copy of the package.json and package-lock.json files.

Copy . ./

Note the space also between the dot and the dot slash. The first dot pertains to your application’s whole repository being copied and then pasted to the ./ or the app directory.

If you’re going to ask me why we’re copying the whole application, why do we need to copy the package.json and package-lock.json early on?

It’s because we need to npm run it first, and another reason has something to do with the optimization of the application.

Docker creates layers for each command such as COPY, ADD, RUN, etc. As per the current configuration, Docker does not need to npm install or rebuild all layers, including the package.json. Doing so will take a lot of time and resources whenever there are changes in our source code, which could happen frequently.

npm install will only be executed if there are changes in the package.json, such as removing or adding something.

Meanwhile, in Stage 2, note the three parameters in the COPY, the first two parameters being copied or dumped into the third or last parameter.

Docker Hub

Now, let’s try our Docker deployment. But before that, log in to your Docker Hub account so you can upload or push your Docker images and publish them to your Docker Hub.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig20_HTML.jpg
Figure 18-20

Docker Hub Sign Up/Login page. Source: https://hub.docker.com/

Docker Commands

Now, let’s begin the Docker deployment process. The following is a screenshot of the Docker commands starting with the docker login.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig21_HTML.jpg
Figure 18-21

Docker commands

Make sure that your Docker is running, and then write the Docker build. The following is a screenshot of a successful Docker build (FINISHED). Depending on your computer, this could take a few minutes to finish.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig22_HTML.jpg
Figure 18-22

Docker build

Once you have successfully built it and pushed it to Docker Hub’s repository, I think it’s better to run it first in our local machine. Run a Docker command:
$ docker run -p 8080:80 yourDockerUserName/react-docker:1.0.0
The following is a screenshot of the Docker run on my machine. Your username would be different.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig23_HTML.jpg
Figure 18-23

Docker run

Check the Docker client to see if it’s running on your specified port 8080. The name hungry_raman is randomly generated two words, joined by an underscore. In short, it is sort of the UUID or universally unique identifier of your container.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig24_HTML.jpg
Figure 18-24

Containers in Docker client dashboard

Go to the localhost:8080 to check your application.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig25_HTML.jpg
Figure 18-25

Running on port 8080

Ok, now that we’ve seen that everything is working, we can push it to our Docker Hub:
-$ docker push yourDockerUsername/react-docker:1.0.0
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig26_HTML.jpg
Figure 18-26

Docker push

After this, open your own Docker Hub, so you should be able to see your app.
../images/506956_1_En_18_Chapter/506956_1_En_18_Fig27_HTML.jpg
Figure 18-27

Docker Hub after a successful deployment

You can download or deploy it anywhere you want, for example, in Kubernetes, Azure, or AWS using their services or instances for containers.

If you want to know more about Kubernetes, you can go to their website: https://kubernetes.io/.

If you want to know more about Azure, you can go to their website: https://azure.microsoft.com/.

If you want to know more about AWS, you can go to their website: https://aws.amazon.com/.

Summary

That’s it for the deployment process of our application in Netlify and Docker. Netlify is perfect for static websites, and we’ve seen how easy it is to connect Netlify with our GitHub repository to pull the source code and allow us to do continuous integration and deployment.

Deploying our app to Docker containers, on the other hand, is the way to go if we need to run our application on any Linux machine. Also, keep in mind that Docker is open source, so anyone can contribute and extend it to meet their requirements, such as adding features and so on.

The next chapter is just a bonus chapter wherein we get an idea of ways to reuse our React learnings and expand to other related platforms and frameworks the concepts and skills we have learned while building our project application.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.133.109.30