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
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
Now, run your react app using the following command:
npm start
Go to localhost:3000
in your browser and you should see your app running.
![React app](https://shefali.dev/wp-content/uploads/2024/04/image-4.jpeg)
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"
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](https://shefali.dev/wp-content/uploads/2024/04/image-3.jpeg)
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
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:
![](https://shefali.dev/wp-content/uploads/2024/04/image-7.jpeg)
If you don’t see the URL and your terminal looks like this:
![](https://shefali.dev/wp-content/uploads/2024/04/image-8.jpeg)
then delete the previously created build folder and create a new file named .env
in the root folder.
![](https://shefali.dev/wp-content/uploads/2024/04/image-6.jpeg)
Inside the .env
file, add the following code:
PUBLIC_URL = https://react-app.shefali.dev
Replace https://react-app.shefali.dev
with the domain you choose for your Hostinger website.
![](https://shefali.dev/wp-content/uploads/2024/04/image-5.jpeg)
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>
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 React app](https://shefali.dev/wp-content/uploads/2024/04/image-2.jpeg)
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!!
I do not even know how I ended up here but I thought this post was great I dont know who you are but definitely youre going to a famous blogger if you arent already Cheers