DEV Community

Cover image for #Hosting With cPanel React App
Grigore
Grigore

Posted on

#Hosting With cPanel React App

In this post I will share with you how to Host your React App after you got the domain name and you already got the space on a web server for your web site.

After you have created your app using npx create-react-app and you have all your files up and running locally congrats you five steps closer for deployment.

First!!!

In you package.json file change the address from localhost:port to your DOMAIN NAME.In case you do not have it jut add it like this:
Alt Text

Second!!!

Run locally on your machine npm run build .This should create a Build folder in your app
Alt Text

Third!!!

Go to the build folder that you have just created open the folder and **Compress all the items inside that folder
Alt Text
Now you have a .zip folder witch you might drag on Desktop window because we gonna use this folder next.

Fourth!!!

In cPanel open the file manager and inside public_html folder download the .zip folder that we just created
Alt Text
After that extract it by right clicking on the folder

Congratulations you are one step closer from having your web site hosted.

Fifth!!!

Finally last step and most important one is to add a few lines of code in the hidden .htaccess file.
You can do it by going to cPanel settings and select Show hidden files(dotfiles)
Go to edit .htaccess file and add this 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)

Alt Text

Voila you made it, your site should be running on a shared server now and you can access it everywhere in the world

If this post helped you and you want to connect Here is my Twitter

Top comments (0)