Containerizing React-The UI App

Namaste Everyone..!! Today we are going to containerize the react application via Containerization Tool named as Docker. If someone is not well-versed with docker or React I would recommend to first have an overview of the same and then jump into this illustration.

Well I am attaching the reference link for the new comers to have an overview of the same.

Docker

Docker overview

React

What Is React? [Easily Explained]

And If someone wants to have the installation process to be automated. Please refer to the attached link. You will get the github link in the blog itself.

LAUNCHING AND CONFIGURING WEBSERVER IN DOCKER THROUGH ANSIBLE

Now, After the basics let us switch back to the illustration. Here, we are going to launch the container with the base image of Ubuntu, Afterwards we will be installing npm. Troubleshooting the installation process if anything comes up, Advantages of using the Container Tools and then will create the test react app, will expose it out of the container, Logging of Every IP that comes to access the react site.

Enough talking…Let’s start..!!

Launch a Container with the following command shown below.

docker run -it -p 8081:3000 --name <name of the container> <image name>

Arguments Explained :

i : It is for interactive mode i.e. running docker with its terminal.

t : It is for pseudo TTY i.e. pseudo terminal subsystem.

p : Publishing the port of the app in docker

name : name of the container

Now let us install the node package manager (npm) as the base package repository for the react package.

Something happened the OS is not able to locate the package…Is the package available?

Yes, the package is available but apt or the package manager is not able to find it. Why so ?

Because apt is not able to find the index files which contains the information about the base packages in the Operating System. Now, what we need to do is we need to update the apt package manager so that it can know about the index files. A simple command will work for the same.

apt-get update

After this if we again install the npm module we are now able to do the same.

It will be a bit long process (4–5 mins) because as a dependency around 500+ packages will be installed in the OS.

Let us check if node js and npm is installed in the OS. So, we used the version commands for verifying the same.

Now, let us go and install the react-app module through npm. The command for the following is shown below.

npm -g install <module name>          # In our case it is create-react-app

We got the above output after the command to install react-app. Contains multiple warnings and vulnerabilities. Now let us check if we are able to create a test-react-app. Please use the following command as shown below.

create-react-app <app name>

And as per the output we are unable to do so because of some version conflicts of npm and node js. So, let us try upgrading them by apt package manager along with required versions as shown below.

So, again as per above output we are unable to do so. Let us find some other method to do the same. Let us try doing it via npm. Use the following command for the same.

npm install -g <module name>@latest      #In our case the module name is npm

Again we are not able to upgrade the npm but this time npm upgraded version is incompatible and it is saying to upgrade node version. Command for the node upgrade is

npm install -g <module name>@latest      #In our case the module name is node

Now, let us check if node and npm are upgraded or not and BOOM..!!

I was stuck with the above error and my npm was crashed. But here is the advantage of container. So, I removed the one and launched the other container within a second along with installation of npm.

Once again I am going to upgrade npm here and this time forcefully. (will not touch node this time)

Use the following command to upgrade npm forcefully.

npm install -g npm@latest --force

Afterwards what I was able to get is shown in below snip.

Here node is upgraded but still npm is not upgraded but we are safe this time and we haven’t got any error. Upgrading system’s npm will break it. This is confirmed by previous attempt. So, let us install it alternatively.

Now what is this and how is this done? When system related modules cannot be touched we have a provision to install them alternatively so that system won’t get affected and the requirements are also fulfilled.

Let us come on How?

Here what I was able to gather is that there is a module n which actually alternatively install the latest npm without touching the system one. Command to install “n” module is shown below.

npm install -g n

So, let us decide module (n) to find the compatible and stable version of npm for our Operating System. So, let us try it out via following command.

npm install -g n

It seems that it is installed.

Now let us go for stable version of npm here. Use the below command for the same.

n stable

We recieved the error which shows that we need to install some packages. So, let us install the required packages.

apt-get install curl vim wget -y

Let us run the command “n stable” again and let us see what we get.

And finally node and npm version is now upgraded. So, as I said we have alternatively installed npm. (The two paths are highlighted one in above snip).

Now, just type “bash” so that the terminal is refreshed and then let us check for the version of node and npm here.

NOTE : Use the bash command otherwise you may face error in npm.

As per above snip node and npm both are upgraded at required version for the react app.

Let us try to install the react-app again via npm using the below command.

We were now able to install the react app here. So, without any delay let us create our first test react app.

Use the following command to do the same.

create-react-app <app name>    # In our case the app name is react-test-app

Hurray..!! We have finally created our test app now.

Let us now create the build for the same. Instructions for the same is in snip and have mentioned the commands as well.

cd <app name>         # In our case the app name is react-test-app
npm run build

Afterwards install the serve module via command shown below.

npm install -g serve

As we can see it is now installed and we are ready to launch..!! So, finally run the below command and here we go..!!

npm start

That’s the spirit our first react app is now launched. As we have exported the ports we can view it on port 8081 via IP of the server.

So, the URL will be http://<IP of the server>:8081/

In my case it is 192.168.11.130 as shown below.

And here is the Output of our App.

So, whenever I am hitting this page I am also getting the logs for the IPs as shown below.

Hope you enjoyed creating the app and we will continue on this further by making the docker image of this whole setup and see how customizations can be done on it.

Till then….Bye!! Bye!!