Hosting React Application in a sub domain using cPanel

In this article I would be discussing about how to host your react application in a sub domain. In this example I would be explaining you the process with cPanel hosting. But I hope the process would be the same in other hosting services also.

As in this article I will be talking about deploying a react application in a sub domain, first you need to have a domain and a hosting service purchased. In the hosting service you use, you need to create a sub domain. In cPanel you can create a sub domain as below.

Figure 1 — Creating a sub domain in cPanel

Then you will be able to see a folder named from the sub domain you created in the root folder of the hosting.

Figure 2 — The folder created after creating the sub domain

Inside the folder there will be some default folders created as below.

Figure 3 — Content inside the folder of the sub domain initially

Then you need to go to your react code and get a production build of the application. For that you need to run the command “npm run build” on the root directory of the application in the terminal. In the below example I have run the command using the Visual Studio Code terminal.

Figure 4 — Running the command to get a production build

The process of building a production build will take some time with respect to the weight of your project. Then there will be a folder called “build” inside the project folder.

Figure 5 — Created build folder after running the command

The contents of the “build” folder will be as below.

Figure 6 — The contents of the build folder

Then you need to upload the content inside the “build” folder to the created folder of the sub domain (figure 3). In uploading the folder content of the “build“ folder you will probably need to zip the folder and upload in to the sub domain folder in the hosting. In this process you need to be mindful about the fact that the content of the “build” folder, should be directly in the folder of the sub domain folder in the hosting.

Figure 7 — Contents of the sub domain folder after uploading the build

Well, that is the end of the process. Now you can directly see your application through the sub domain address.

Hope you got the idea of how to host a react application using a sub domain. Thank you for reading the article.