How to Deploy React JS app on server

How to Deploy React App on The server Or GitHub

by


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:

  1. Node.js installed on your machine.
  2. Git installed on your machine.
  3. A GitHub account.
  4. 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.

Leave a Comment