This guide will explain how to deploy a static single page ReactJS application on one of our shared web hosting or business web hosting accounts. A shared web hosting account is a perfect destination for deploying static apps for your portfolio or for hosting your entire developer portfolio site itself. This is an easy way to put your code on the web and to use the domain of your choice to make your portfolio have a more professional appearance. In order to continue with this guide, you will want to be familiar with or already using Facebook’s App creation tool called create-react-app to create your project.
This guide is intended for information purposes only. Please consult with your web developer for more support on your development project as this is not covered with the Hostwinds Tiers Of Support
Before We Get Started
There are a few other items that you will need in order to follow along with this guide.
First: You will need a shared or shared business hosting account with Hostwinds
Second: You will need a React application that was created with create-react-app
Third: You will want to have an FTP program like FileZilla and have already set up FTP access in cPanel to continue with this guide
The first thing that you will do is create a production build of your project by opening up your local development environment and enter into a shell prompt on your local machine.
Step One: Change directories into your project’s directory by typing the following line for your directory:
Step Two: Once you are in your project directory, then you will type:
npm run build
This will create a production build of your React project and bundle the dependencies that are necessary for the app to work. Your production build files will be placed in a new directory in your project folder called build.
FTP Your Files To Your Server
Next you will use an FTP program to move the production files to your shared hosting account.
Step One: Open the FTP program and connect to your web hosting account
Step Two: If this is the first project that you are hosting and let’s say that it is a main portfolio page for example, then you will transfer it to the root directory of your shared hosting account. By default, the document root for your main web hosting account is in the destination folder on the server and is named public_html. In here, you will find the files and folders associated with your main domain name such as index.html as your homepage, or something similar if you have already created a homepage for your main website.
Step Three: You will navigate in the FTP program to your build folder in your project’s files and then select all of the files in the build folder and drop them into the correct directory in the public_html folder on the other side of the GUI in the FTP program
Step Four: Once the file transfer is complete then your application should immediately be available to be brought up by typing your domain into the URL bar
Step Five: For deploying into a sub-directory of public_html folder there is one additional step that will need to be done before you run your build. If you would like a React app to be rendered from a subdirectory, it is necessary to add a reference to the homepage within the package.json file for you project. Without it, the page will be blank white when it is navigated to. The needed reference will be:
And when placed in
it will look like this:
Once this reference has been added and npm run build has been finished, you can FTP your build files to any subdirectory in your public_html directory and the app will render from from that directory.
It is possible and fairly easy to deploy a static React app on a Hostwinds shared hosting account. This is a very simple option for a developer who is looking to put together a portfolio on their own domain name to have a more professional looking website. If you are looking for more advanced options and have full control over the server configuration, and ready to move your app into a production environment, we suggest looking at our SSD Cloud VPS Servers.
- How To Access cPanel – How to easily access your cPanel interface with a Hostwinds service.
- Shared Hosting Overview – An overview of the features and what comes along with our Shared hosting plans.
- Business Hosting Overview – An overview of the features and what makes our Business hosting plan a great choice.