coderquill's inklings

Deploy your React applications using GitHub-Pages

github pages

Table Of Contents:

So, You have built a React app.

Next step? Deploying.

How you gonna do it?? Just follow along!!

Step 1: Add homepage to package.json

This is a very important step. DONT skip it.

  • Open your package.json and add a homepage field for your project: for example:

    • "homepage": "https://myusername.github.io/my-app"

  • for a GitHub user page:

    • "homepage": "https://myusername.github.io"

  • for a custom domain page:

    • "homepage": "https://mywebsite.com"

    Create React App uses the homepage field to determine the root URL in the built HTML file.

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

  • To publish it at homepage, run:

    • npm install --save gh-pages

  • You may use yarn for the same:

    • yarn add gh-pages

  • Now, add the following scripts in your package.json:
    • +   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build"

    The predeploy script will run automatically before deploy is run.

  • If you are deploying to a GitHub user page instead of a project page you'll need to make one additional modifications.

    Modify your package.json scripts to push deployments to master:

    •     "predeploy": "npm run build",
-   "deploy": "gh-pages -d build",
+   "deploy": "gh-pages -b master -d build"

    Step 3: Deploy the site by running npm run deploy

  • Then run:

    • npm run deploy

    Step 4: 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
    • github pages enabling

    And tadaa! 🎉 You have published your application successfully.

    It might take some time to actually be available but you have done your part.🌟

    Give yourself a high five!!1

    1. If you found this helpful, please share it to help others find it! Feel free to connect with me on any of these platforms=> Email | LinkedIn | Resume | Github | Twitter | Instagram 💜↩