How to Upload a Create React App to Github

Deploying a React App* to GitHub Pages

* created using create-react-app

Introduction

In this tutorial, I'll show you how you can create a React app and deploy it to GitHub Pages.

To create the React app, I'll be using create-react-app, which is a tool people can use to create a React app from scratch. To deploy the React app, I'll be using gh-pages, which is an npm package people tin use to deploy things to GitHub Pages, a free spider web hosting service provided by GitHub.

If you follow along with this tutorial, you'll end up with a new React app—hosted on GitHub Pages—which yous can then customize.

Tutorial

Prerequisites

Node and npm are installed. Hither are the versions I'll be using while making this tutorial:
```
$ node --version v16.13.ii  $ npm --version 8.1.2
```
Installing npm adds two commands to the arrangement—npm and npx—both of which I'll be using while making this tutorial.
Git is installed. Here's the version I'll be using while making this tutorial:
```
$ git --version git version 2.29.1.windows.1
```
A GitHub account.

Procedure

1. Create an empty repository on GitHub

Sign into your GitHub account.
Visit the Create a new repository course.
Fill in the form as follows:
- Repository proper noun: You can enter whatsoever name you lot want*.
  
  * For a project site, y'all tin enter any proper name you want. For a user site, GitHub requires that the repository's name have the post-obit format: {username}.github.io (e.g. gitname.github.io)
  
  The name you enter will testify upwardly in a few places: (a) in references to the repository throughout GitHub, (b) in the URL of the repository, and (c) in the URL of the deployed React app.
  
  In this tutorial, I'll be deploying the React app every bit a projection site.
  
  I'll enter: react-gh-pages
- Repository privacy: Select Public (or Private*).
  
  * For GitHub Gratis users, the only type of repository that can exist used with GitHub Pages is Public. For GitHub Pro users (and other paying users), both Public and Private repositories can be used with GitHub Pages.
  
  I'll choose: Public
- Initialize repository: Leave all checkboxes empty.
  
  That will get in so GitHub creates an empty repository, instead of pre-populating the repository with a README.medico, .gitignore, and/or LICENSE file.
Submit the grade.

At this point, your GitHub account contains an empty repository, having the proper name and privacy type that y'all specified.

2. Create a React app

Create a React app named my-app:

In case you lot want to use a different proper noun from my-app (e.g. web-ui), you can accomplish that by replacing all occurrences of my-app in this tutorial, with that other name (i.e. my-app --> web-ui).
```
$ npx create-react-app my-app
```
That command will create a React app written in JavaScript. To create 1 written in TypeScript, you can issue this command instead:
```
$ npx create-react-app my-app --template typescript
```
That command will create a new binder named my-app, which will contain the source code of a React app.

In addition to containing the source lawmaking of the React app, that binder is also a Git repository. That feature of the folder will come into play in Stride six.
Enter the newly-created folder:

At this signal, there is a React app on your computer and you are in the folder that contains its source code. All of the remaining commands shown in this tutorial can exist run from that folder.

3. Install the `gh-pages` npm package

Install the gh-pages npm package and designate information technology as a development dependency:
```
$ npm install gh-pages --save-dev
```

At this point, the gh-pages npm package is installed on your computer and the React app's dependence upon it is documented in the React app's parcel.json file.

4. Add a `homepage` property to the `packet.json` file

Open up the package.json file in a text editor.

In this tutorial, the text editor I'll be using is vi. You can employ any text editor you desire; for example, Visual Studio Code.
Add a homepage belongings in this format*: https://{username}.github.io/{repo-proper name}

* For a project site, that's the format. For a user site, the format is: https://{username}.github.io. You lot tin read more about the homepage property in the "GitHub Pages" section of the create-react-app documentation.
```
{   "name": "my-app",   "version": "0.one.0",                                      +                    "homepage": "https://gitname.github.io/react-gh-pages",                  "private": true,
```

At this signal, the React app'south package.json file includes a belongings named homepage.

5. Add together deployment scripts to the `package.json` file

Open the parcel.json file in a text editor (if it isn't already open in ane).

Add a predeploy property and a deploy holding to the scripts object:

"scripts": {                                      +                    "predeploy": "npm run build",                                      +                    "deploy": "gh-pages -d build",                  "get-go": "react-scripts beginning",     "build": "react-scripts build",

At this point, the React app's parcel.json file includes deployment scripts.

six. Add a "remote" that points to the GitHub repository

Add together a "remote" to the local Git repository.

You tin can do that by issuing a control in this format:
```
$ git remote add origin https://github.com/{username}/{repo-proper name}.git
```
To customize that command for your situation, supervene upon {username} with your GitHub username and supplant {repo-name} with the proper name of the GitHub repository you created in Pace 1.

In my case, I'll run:
```
$ git remote add origin https://github.com/gitname/react-gh-pages.git
```
That control tells Git where I desire it to push things whenever I—or the gh-pages npm package interim on my behalf—outcome the $ git push command from within this local Git repository.

At this betoken, the local repository has a "remote" whose URL points to the GitHub repository you created in Step one.

7. Deploy the React app to GitHub Pages

Deploy the React app to GitHub Pages

That will cause the predeploy and deploy scripts defined in package.json to run.

Nether the hood, the predeploy script will build a distributable version of the React app and store information technology in a binder named build. So, the deploy script volition push button the contents of that folder to a new commit on the gh-pages branch of the GitHub repository, creating that co-operative if it doesn't already exist.
By default, the new commit on the gh-pages co-operative will have a commit message of "Updates". You tin can specify a custom commit message via the -m option, similar this:
```
$ npm run deploy -- -thou                                          "Deploy React app to GitHub Pages"                                      
```
GitHub Pages will automatically detect that a new commit has been added to the gh-pages branch of the GitHub repository. Once it detects that, it volition brainstorm serving the files that brand up that commit — in this instance, the distributable version of the React app — to anyone that visits the homepage URL you specified in Step iv.

That's it! The React app has been deployed to GitHub Pages! 🚀

At this point, the React app is accessible to anyone who visits the homepage URL yous specified in Step 4. For instance, the React app I deployed is attainable at https://gitname.github.io/react-gh-pages.

viii. (Optional) Shop the React app'south source code on GitHub

In the previous footstep, the gh-pages npm package pushed the distributable version of the React app to a branch named gh-pages in the GitHub repository. Withal, the source code of the React app is not yet stored on GitHub.

In this step, I'll show you how y'all tin shop the source code of the React app on GitHub.

Commit the changes you made while you lot were following this tutorial, to the master branch of the local Git repository; then, push that branch upwards to the principal branch of the GitHub repository.
```
$ git add                  .                  $ git commit -m                                      "Configure React app for deployment to GitHub Pages"                                    $ git push origin main
```
I recommend exploring the GitHub repository at this bespeak. It will have two branches: primary and gh-pages. The chief branch volition contain the React app's source code, while the gh-pages branch will contain the distributable version of the React app.

References

The official create-react-app deployment guide
GitHub blog: Build and deploy GitHub Pages from whatsoever branch

Notes

Special thanks to GitHub (the visitor) for providing us with the GitHub Pages hosting service for gratuitous.
And at present, fourth dimension to turn the default React app generated by create-react-app into something unique!
This repository consists of two branches:
- master - the source code of the React app
- gh-pages - the React app built from that source lawmaking

Contributors

Thanks to these people for contributing to the maintenance of this tutorial.

This list is maintained manually—for now—and includes (a) each person who submitted a pull request that was eventually merged into master, and (b) each person who contributed in a different manner (eastward.thousand. providing constructive feedback) and who approved of me including them in this list.

How to Upload a Create React App to Github

Deploying a React App* to GitHub Pages

Introduction

Tutorial

Prerequisites