How to host a react application in a shared hosting (cpanel)

Yes it is possible to host a react application in a shared hosting please follow the below simple five steps

(01) Open your package.json file in your react app root and add the below property in to that (please change the domain accordingly)

“homepage”: “https://yourdomain.com/”,

{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://yourdomain.com/",
  "dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

(02) Run the npm run build
(03) It will create a build folder and find the build artifacts there
(04) copy the all files inside the build folder to your website domain root using your faviorit FTP client (Ex : filezilla is my one)
(05) create .htaccess file with the below properties to identify your domain root file (index.html)
<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>

That’s all Enjoy Cording!

Read More…

Add a Comment

Your email address will not be published.