DEV Community

loading...
Cover image for How to deploy react app on github

How to deploy react app on github

Deep Bag
Here are some ideas to get you started: 🔭 I’m currently doing Engineering. ⚡ Fun fact: The usual programmers drink coffee while coding but I coding while listening to the song.
・2 min read

In this tutorial, we'll introduce you to how you can deploy a react app on Github.

Check Git Status

The step below is important! If you skip it, your app will not deploy correctly. Open your git bash cmd and apply this cmd:

git status
Enter fullscreen mode Exit fullscreen mode

Initialize git

git init
Enter fullscreen mode Exit fullscreen mode

add all files

git add .
Enter fullscreen mode Exit fullscreen mode

Commit your files

git commit -m 'any word'
Enter fullscreen mode Exit fullscreen mode

create a new repository in github without readme and other files only repository name

put this cmd on your git bash cmd

git remote add origin https://github.com/deepbag/your-repository-name.git
Enter fullscreen mode Exit fullscreen mode

push your react app on github

push -u origin main
Enter fullscreen mode Exit fullscreen mode

Add homepage on your package.json in the to

The step below is important! If you skip it, your app will not deploy correctly. or for a GitHub user page:

"homepage": "https://gitusername.github.io/your-repository-name", 
Enter fullscreen mode Exit fullscreen mode

example: https://deepbag.github.io/your-repository-name
Create React App uses the homepage field to determine the root URL in the built HTML file.

Install gh-pages and add deploy to scripts in package.json

Now, whenever you run npm run build, you will see a cheat sheet with instructions on how to deploy to GitHub Pages.
To publish it at https://myusername.github.io/my-app, run:

npm install --save gh-pages
Enter fullscreen mode Exit fullscreen mode

Add the following scripts in your package.json:

"predeploy": "npm run build", 
"deploy": "gh-pages -d build",
Enter fullscreen mode Exit fullscreen mode

The predeploy script will run automatically before deploy is run.

Deploy the site by running npm run deploy

npm run deploy
Enter fullscreen mode Exit fullscreen mode

For a project page, ensure your project’s settings use gh-pages

Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:

Thank You!

Discussion (0)