Deploying Your React App In Under 2 Minutes
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 your react app, add homepage property using the given syntax:
Make sure you replace the user name and repo name with your project details.
4. Add additional scripts to
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:
// other scripts
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
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
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!