This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject
, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject
at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject
will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject
. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
* created using create-react-app
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 can use to deploy things to GitHub Pages, a free 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 you can then customize.
-
Node and npm are installed. Here are the versions I'll be using while making this tutorial:
$ node --version v16.13.2 $ npm --version 8.1.2
Installing npm adds two commands to the system—
npm
andnpx
—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.
- Sign into your GitHub account.
- Visit the Create a new repository form.
- Fill in the form as follows:
-
Repository name: You can enter any name you want*.
* For a project site, you can enter any name you want. For a user site, GitHub requires that the repository's name have the following format:
{username}.github.io
(e.g.gitname.github.io
)The name you enter will show up 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 as a project site.
I'll enter:
react-gh-pages
-
Repository privacy: Select Public (or Private*).
* For GitHub Free users, the only type of repository that can be 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 make it so GitHub creates an empty repository, instead of pre-populating the repository with a
README.md
,.gitignore
, and/orLICENSE
file.
-
- Submit the form.
At this point, your GitHub account contains an empty repository, having the name and privacy type that you specified.
-
Create a React app named
my-app
:In case you want to use a different name from
my-app
(e.g.web-ui
), you can accomplish that by replacing all occurrences ofmy-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 one written in TypeScript, you can issue this command instead:
$ npx create-react-app my-app --template typescript
That command will create a new folder named
my-app
, which will contain the source code of a React app.In addition to containing the source code of the React app, that folder is also a Git repository. That characteristic of the folder will come into play in Step 6.
-
Enter the newly-created folder:
$ cd my-app
At this point, 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 be run from that folder.
-
Install the
gh-pages
npm package and designate it 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 package.json
file.
-
Open the
package.json
file in a text editor.$ vi package.json
In this tutorial, the text editor I'll be using is vi. You can use any text editor you want; for example, Visual Studio Code.
-
Add a
homepage
property in this format*:https://{username}.github.io/{repo-name}
* For a project site, that's the format. For a user site, the format is:
https://{username}.github.io
. You can read more about thehomepage
property in the "GitHub Pages" section of thecreate-react-app
documentation.{ "name": "my-app", "version": "0.1.0", + "homepage": "https://gitname.github.io/react-gh-pages", "private": true,
At this point, the React app's package.json
file includes a property named homepage
.
-
Open the
package.json
file in a text editor (if it isn't already open in one).$ vi package.json
-
Add a
predeploy
property and adeploy
property to thescripts
object:"scripts": { + "predeploy": "npm run build", + "deploy": "gh-pages -d build", "start": "react-scripts start", "build": "react-scripts build",
At this point, the React app's package.json
file includes deployment scripts.
-
Add a "remote" to the local Git repository.
You can do that by issuing a command in this format:
$ git remote add origin https://github.com/{username}/{repo-name}.git
To customize that command for your situation, replace
{username}
with your GitHub username and replace{repo-name}
with the name of the GitHub repository you created in Step 1.In my case, I'll run:
$ git remote add origin https://github.com/gitname/react-gh-pages.git
That command tells Git where I want it to push things whenever I—or the
gh-pages
npm package acting on my behalf—issue the$ git push
command from within this local Git repository.
At this point, the local repository has a "remote" whose URL points to the GitHub repository you created in Step 1.
-
Deploy the React app to GitHub Pages
$ npm run deploy
That will cause the
predeploy
anddeploy
scripts defined inpackage.json
to run.Under the hood, the
predeploy
script will build a distributable version of the React app and store it in a folder namedbuild
. Then, thedeploy
script will push the contents of that folder to a new commit on thegh-pages
branch of the GitHub repository, creating that branch if it doesn't already exist.By default, the new commit on the
gh-pages
branch will have a commit message of "Updates". You can specify a custom commit message via the-m
option, like this:$ npm run deploy -- -m "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 will begin serving the files that make up that commit — in this case, the distributable version of the React app — to anyone that visits thehomepage
URL you specified in Step 4.
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 you specified in Step 4. For example, the React app I deployed is accessible at https://gitname.github.io/react-gh-pages.
In the previous step, the gh-pages
npm package pushed the distributable version of the React app to a branch named gh-pages
in the GitHub repository. However, the source code of the React app is not yet stored on GitHub.
In this step, I'll show you how you can store the source code of the React app on GitHub.
-
Commit the changes you made while you were following this tutorial, to the
master
branch of the local Git repository; then, push that branch up to themaster
branch of the GitHub repository.$ git add . $ git commit -m "Configure React app for deployment to GitHub Pages" $ git push origin master
I recommend exploring the GitHub repository at this point. It will have two branches:
master
andgh-pages
. Themaster
branch will contain the React app's source code, while thegh-pages
branch will contain the distributable version of the React app.
- The official
create-react-app
deployment guide - GitHub blog: Build and deploy GitHub Pages from any branch
- Preserving the
CNAME
file when using a custom domain
- Special thanks to GitHub (the company) for providing us with the GitHub Pages hosting service for free.
- And now, time 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 appgh-pages
- the React app built from that source code
Thanks to these people for contributing to the maintenance of this tutorial.
![gitname](https://github.com/gitname.png?size=40)
![rhulse](https://github.com/rhulse.png?size=40)
![AbhishekCode](https://github.com/AbhishekCode.png?size=40)
![adnjoo](https://github.com/adnjoo.png?size=40)
![thebeatlesphan](https://github.com/thebeatlesphan.png?size=40)
![valerio-pescatori](https://github.com/valerio-pescatori.png?size=40)
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 way (e.g. providing constructive feedback) and who approved of me including them in this list.