Make your React App work with shared hosting

React in Cpanel by Gabriel Onike

Decoupled

It may interest you to know that my portfolio’s web application is decoupled with its blogs service as a headless CMS running on Rails in the cloud, PHP for some front and backend services and React for some aspects of my UI. They’re all linked together with Https routing.

System Design

I went about building just the pages i needed for my react app. In my portfolios’ case, that was; About, Projects and Contact Pages.

Requests first hits your index.php page

Build

Since my homepage already existed in PHP, I had to design the UI and frontend for just my React pages.

"homepage": "https://mywebsite.com",
npm run build
React scaffold structure

Serving and Deployment

In serving our project, we copy all the files in our Build folder to our projects root public_html folder.

Public_html file structure

Rewrite Modules

This is the Key to our aim. So pay close attention here.

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

DirectoryIndex index.php index.html
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index\. (html|htm|php|php3|php5|shtml|phtml) [NC]
RewriteRule ^index\.html|htm|php|php3|php5|shtml|phtml$ / [R=301,L]
</IfModule><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>

Communications Specialist: Journalism, Digital Marketing and Web Software Development.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store