DEV Community

Cover image for 5 Steps You Must Follow to Deploy a React App on Hostinger
Shefali
Shefali

Posted on • Originally published at shefali.dev

5 Steps You Must Follow to Deploy a React App on Hostinger

Hosting a react app can be quite tricky sometimes. Choosing the right hosting provider, managing all the files, etc. can be quite tricky for the first time. I’ll be guiding you through the entire process of deploying a React app on one of the best hosting providers, Hostinger.

Things You Need Before Deploying Your React App On Hostinger

  • A domain
  • A hosting plan

It can be really tricky and expensive to purchase your domain and hosting plan. Hostinger has made it really easy for this. We can purchase the premium web hosting plan and get a domain completely free for the first year.
Click here to get an additional 20% discount on all your plans.

Now let’s get right into it. 🚀

Step 1: Create Your React App

First of all, you need to have a React app ready to deploy. If you haven’t created one yet, you can use the following command to set up a new React project. Open your terminal in your desired directory and run the following command:

npx create-react-app example-react-app
Enter fullscreen mode Exit fullscreen mode

Replace example-react-app with the name of your app. Once the installation is complete, go to your project directory by using the following command:

cd example-react-app
Enter fullscreen mode Exit fullscreen mode

Now, run your react app using the following command:

npm start
Enter fullscreen mode Exit fullscreen mode

Go to localhost:3000 in your browser and you should see your app running.

React app

Step 2: Edit the package.json file

Next, open the package.json file from the root directory of your React app and add the following code inside the package.json file.

"homepage": "https://react-app.shefali.dev"
Enter fullscreen mode Exit fullscreen mode

Replace https://react-app.shefali.dev with the domain you choose for your Hostinger website. This tells React where to find your app when it’s deployed. Now your package.json file should look like this.

React app

Step 3: Build Your React App

Now it’s time to build your React app for production. Run the following command in your terminal:

npm run build
Enter fullscreen mode Exit fullscreen mode

This command generates a production-ready build of your app in the build folder.

You should see your URL in the terminal like the below image:

React app

If you don’t see the URL and your terminal looks like this:
React app

then delete the previously created build folder and create a new file named .env in the root folder.
React app

Inside the .env file, add the following code:

PUBLIC_URL = https://react-app.shefali.dev
Enter fullscreen mode Exit fullscreen mode

Replace https://react-app.shefali.dev with the domain you choose for your Hostinger website.

React app
Now, when you run the command npm run build again, this should fix the issue.

Step 4: Create .htaccess File

Log in to your Hostinger account and go to the File Manager and create a new file named .htaccess in your public_html folder. This file is used to configure how your web server behaves. Add the following code to your .htaccess file:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>
Enter fullscreen mode Exit fullscreen mode

This code ensures that all requests to your app are redirected to the index.html file.

Step 5: Upload the Contents of Your Build Folder

Upload the contents of the build folder (generated in Step 3) to the public_html folder of your Hostinger website.

Your File manager should look like this.

Deploy a React app on hostinger

Congratulations! You’ve successfully deployed your React app on Hostinger. Visit your website in your browser to see your app live. Now you can share it with others and showcase your amazing work to the world.

Hostinger is the market-leading hosting provider. You can purchase the premium web hosting plan and get a domain completely free for the first year.
Click here to get an additional 20% discount on all your plans.

That’s all for today.

I hope it was helpful.

Thanks for reading.

For more content like this, click here.

You can also follow me on X(Twitter) for daily web development tips.

Keep Coding!!
Buy Me A Coffee

Top comments (2)

Collapse
 
devluc profile image
Devluc

Great article Shefali. I enjoyed the read

Collapse
 
devshefali profile image
Shefali

I'm glad to know that. Thank you so much, Lucian!