Deploying Your React App In Under 2 Minutes

Super-fast Deployment For React Applications

Harsha Vardhan
Nov 30, 2020 · 2 min read
Image for post
Image for post
Photo by Victor Rodriguez on Unsplash

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!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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