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

Deploying a React app can seem daunting, especially if you’re doing it for the first time. But with the right guide, the process can be seamless. In this article, I’ll walk you through the essential steps to deploy your React app on Hostinger, one of the best hosting providers out there.

Table of Contents

1. Things You Need Before Deploying Your React App
2. Step 1: Create Your React App
3. Step 2: Edit the package.json File
4. Step 3: Build Your React App
5. Step 4: Create the .htaccess File
6. Step 5: Upload the Build Folder to Hostinger

Things You Need Before Deploying Your React App

Before we jump into the technical steps, make sure you have these:

1. A domain: You can get one through Hostinger or another provider.
2. A hosting plan: Hostinger offers premium web hosting with a free domain for the first year.

If you found my content helpful or interesting, and you’d like to show your appreciation, why not buy me a coffee? It’s a small gesture that goes a long way in helping me keep creating more content for you.

Just click the button below to support:

Step 1: Create Your React App

If you don’t already have a React app, create one using the create-react-app command. Open your terminal and run:

npx create-react-app example-react-app

Once the installation is complete, navigate to your project directory:

cd example-react-app

Now, start your app:

npm start

Visit localhost:3000 in your browser to confirm that your React app is running smoothly.

Step 2: Edit the package.json File

Now, open your package.json file and add the following code:

"homepage": "https://yourdomain.com"

Replace https://yourdomain.com with your actual domain name from Hostinger. This tells React where your app will be hosted, ensuring proper routing once deployed.

Step 3: Build Your React App

Next, you need to create a production-ready build of your app. In your terminal, run:

npm run build

This will generate a build folder that contains the files you need to upload to your hosting provider.

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

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

Step 4: Create the .htaccess File

To ensure your app works correctly with client-side routing, you need to create an .htaccess file.

1. Log in to your Hostinger account and open the File Manager.
2. In the public_html folder, create a file called .htaccess and add the following code:

<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>

This ensures that all routes in your app are properly redirected to index.html.

Step 5: Upload the Contents of Your Build Folder

Now it’s time to deploy!

1. Open Hostinger’s File Manager.
2. Navigate to the public_html folder.
3. Upload the entire contents of the build folder generated in Step 3.

Once the files are uploaded, your React app is live! You can now visit your website to see it in action.

Conclusion

Congratulations! 🎉 You’ve successfully deployed your React app on Hostinger. Now, you can share your work with the world. Hostinger offers an excellent platform for web developers with affordable hosting plans and easy-to-use tools.

Claim your 20% discount on Hostinger plans here!

Deploying a React app on Hostinger doesn’t have to be complicated. Follow these steps, and you’ll have your app live in no time.

That's all for today.

And also, share your favourite web dev resources to help the beginners here!

Connect with me:@ LinkedIn and checkout my Portfolio.

Explore my YouTube Channel! If you find it useful.

Please give my GitHub Projects a star ⭐️

Thanks for 32048! 🤗