Super-fast Deployment For React Applications

Harsha Vardhan

Follow

Nov 30, 2020 · 2 min read

If you’re an enthusiastic developer who loves building React applications, then GitHub pages could be your best bet for hosting them. All you have to do is follow a few simple steps and you can host as many apps as you’d like straight from your repository. Sounds exciting? Read away!

GitHub Pages is a static site hosting service that takes files straight from a repository on GitHub and publishes a website. We can optionally run the files through a build process if needed. Here are the steps that you need to follow to deploy your React App:

1. Storing your project in GitHub

Make sure you store your project files in a repository in GitHub. It can either be a private or public repository.

2. Install GitHub Pages as a Development Dependency

Next step is to install GitHub Pages as a development dependency for your project. To do so, run:

npm install gh-pages --save-dev

3. Define homePage property in package.json file

In the package.json file in your react app, add homepage property using the given syntax:

"homepage": "http://<github_user_name>.github.io/<github_repo_name>"

Make sure you replace the user name and repo name with your project details.

4. Add additional scripts to package.json file

Now we need to add the deploy script in the package.json file. In the existing scripts property, add a predeploy property and a deploy property, each having the values shown below:

"scripts": {
  // other scripts
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

The predeploy script builds the final code and the deploy script deploys the code.

5. Deploy your project

Now you need to run the deploy script to deploy the project.

npm run deploy

Conclusion

Deployment of a React app is easy and done in less than 2 minutes. I hope you found this useful. I’ve linked my repo and published Github page for reference. Thanks for reading!