Get #Amazon #Prime for this #holiday #amazonprime #christmas #2019

How to deploy a #Reactjs webpage on #github?

If you initiate your React app using create-react-app tool, you can follow the steps below to deploy your app on GitHub.

Steps

1) Make sure to test your app and it is runnable on local host.
2) Include this line in your package.json file. Replace github_user_name and repo_name accordingly.
"homepage": "http://github_user_name.github.io/repo_name"

Homepage URL
Homepage URL

3) Open up your terminal and navigate to your project folder
4) Run `npm run build`
5) If there is any error building the project, you have to fix the error before proceeding.
6) When it is done building, you will see something like the following screenshot:

npm build result
npm build result

7) Then, add some scripts in your package.json file like so
"scripts": {
  // ...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

GitHub page deploy scripts
GitHub page deploy scripts

8) Next, run `yarn add --dev gh-pages`. This step will create gh-pages branch on your Github repo.
9) Finally, run `yarn run deploy`.
10) To get more information, refer to document on React page.
11) When you have update to your webpage in future, you just have to run `yarn run deploy` to deploy your update.

Webpack

You can also configure webpack uglifyjs plugin to do more optimization for you such as to optimize conditionals, remove console logs etc. Check out these uglifyjs minify options to minify your files.

UglifyJsPlugin
Webpack UglifyJsPlugin


General Idea

1) Have an index.html file in your project root folder which will be the entry point to your app.
2) On your Github repo, go to Settings

3) Scroll down to GitHub Pages section
GitHub Pages setting
GitHub Pages setting
4) Select the source as master branch and save.
5) Then, you will be able to see your repo at http://github_user_name.github.io/repo_name

Check out how to set up your GitHub page in the root folder so that navigating to username.github.io will open up your page.

Thank you for reading!

Jun