To host a React app on a server, you will need to do the following:
- Build your React app for production by running the command “npm run build” in the root directory of your app. This will create a “build” folder with the optimized version of your app.
- Find a hosting provider that supports Node.js and can host static files, such as AWS S3, Firebase Hosting, or GitHub Pages.
- Deploy the contents of the “build” folder to the hosting provider.
- Configure your server to serve the index.html file for all routes.
- Set up a custom domain name, if desired.
- (Optional) Set up a process manager like PM2 to keep the app running and automatically restart it if it crashes.
This is a high-level overview, and the specific steps may vary depending on the hosting provider you choose.
It is good to check the documentation provided by hosting providers and also the reactjs documentation for more information.
Read also, How to create React app in VS Code.
How to Deploy React JS app on the server or Cpanle
How to deploy react app on GitHub
Deploying a React application on GitHub Pages is an excellent choice for developers looking to showcase their projects without incurring hosting costs. This tutorial will walk you through the entire process of deploying your React app on GitHub Pages in a clear and concise manner.
Prerequisites:
- Node.js installed on your machine.
- Git installed on your machine.
- A GitHub account.
- Basic knowledge of React, Git, and command line.
Step 1: Create a React App
First, open a terminal and run the following command to create a new React app:
npx create-react-app my-react-app
cd my-react-app
Replace “my-react-app” with your desired app name.
Step 2: Initialize a Git Repository
Navigate to the app’s root folder and initialize a Git repository:
git init
Step 3: Add Remote Repository
Create a new repository on GitHub and copy the repository URL. Then, add it as a remote repository in your local Git repository:
git remote add origin https://github.com/username/my-react-app.git
Replace “username” with your GitHub username and “my-react-app” with the repository name.
Step 4: Install the ‘gh-pages’ Package
To deploy your app on GitHub Pages, you need the ‘gh-pages’ package. Install it as a dev-dependency:
npm install gh-pages --save-dev
Step 5: Configure package.json
Open the package.json file and add the following lines:
"homepage": "https://username.github.io/my-react-app",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
...
}
Replace “username” with your GitHub username and “my-react-app” with the repository name.
Step 6: Deploy the App
Now that everything is set up, deploy your app using the following command:
npm run deploy
Step 7: Configure GitHub Repository
Navigate to your GitHub repository settings, and scroll down to the GitHub Pages section. Under “Source,” select the “gh-pages” branch and save your changes.
Step 8: Access Your App
Give GitHub Pages a few minutes to deploy your app. Once it’s done, you can access your React app at “https://username.github.io/my-react-app“.
Conclusion
Congratulations! You’ve successfully deployed your React app on GitHub Pages. Now you can showcase your project to the world or use this process to deploy other React applications in the future.