cPanel & hosting my first React.js App
In continuation of my blogs that have dealt with the React Framework, today we’re looking at putting the finishing touches on my portfolio website. Namely launching it to a domain that we have purchased & finding a suitable application to host it. We’ll look at the process I used to get my website “gitcharles.com” live and ready for the job search process. So let’s get started!
First and foremost I pushed my final commit (for now) to my GitHub repository & then began the process of cleaning up files & folders that I didn’t need; then commiting and pushing again of course. Now comes the fun part where all your efforts are rewarded. First we need to open our package.json file and create a designated homepage. For my example the url/domain name that I purchased was www.gitcharles.com.
After this we can run npm install again and then we need to have our react app create a deployable build folder for us. How do we do that you ask? Well with a lovely build command of course!
Navigate to your application’s directory in your terminal once again and type “npm run build” this will now create a new folder in the projects directory called build. Basically a compressed deploy-friendly version of your application, with all the images and assets needed. This folder is what were are going to upload to cpanel.
Before we do that I like to compress the folder in order to make the process go as fast as possible. So open up finder (or explorer) and venture to the project in question. Here you can see that I have portfolio as my project name and there is the newly created build folder. Right click on the folder and compress it created a .zip and put this window to the side.
(From here I utilized godaddy’s domain purchasing & hosting options for my website and navigated to )
So head to your GoDaddy dashboard (under My hosting) and click either install Application or cPanel Admin. This will automatically log you into your cpanel account where we can manage our page. On the Cpanel main page you’ll see on the right your primary domain (and also where you can add certificates and edit re-routing options. But for this blog post we’re going to focus strictly on the file Manager portion.
In the File Manager menu, we’re going to navigate to the “public_html” folder which is where our build folder will be uploaded and the contents extracted. Using this method is easier as you’ll see when we click & move to the upload screen.
On this screen we can now easily drag and drop our compressed build zip file into the public_html directory. Unfortunately cPanel won’t allow you to drag and drop folders and if we didn’t compress it we would have to create each folder / navigate to it and then drop each file into said folder. Compressing makes the whole process WAY more efficiently and we’re all about keeping our code efficient!
Finally we can right click on the build.zip folder and extract all the items to the public_html folder. Make sure you don’t extract it to a separate build folder within public_html or we could get some nasty problems.
Now in your web browser navigate to your domain name (in my case https://www.gitcharles.com) & viola! You’re officially hosting your first react app.
Thank you and stay tuned for more blogs!
