Publish React app to Github Pages using github Actions

sandeep kumar singh

I made a simple Reactjs app and now I want to publish it on gh-pages. I followed this Facebook tutorial for deploying it and it is also getting deployed from my PC. But now instead of every time manually deploying it, I thought of using Github Actions to deploy on every push to the master branch. so I wrote the below Action.

name: gh pages publish

on:
  push:
    branches: master

jobs:
  build:
    runs-on: ubuntu-latest

steps:
  - uses: actions/checkout@v2
  - uses: actions/setup-node@v1
    with:
      node-version: 12
      registry-url: https://registry.npmjs.org/
  - name: publish package
    run: |
      yarn
      npm run deploy

But this action fails because it requires the user to input the username and password.

> gh-pages -d build
fatal: could not read Username for 'https://github.com': No such device or address

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/runner/.npm/_logs/2020-06-21T07_07_19_700Z-debug.log
##[error]Process completed with exit code 1.

How can I fix this?

Edit: Here is the package.json file

    {
  "homepage": "http://itissandeep98.github.io/TimeTableManager/",
  "name": "timetablemanager",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "bootstrap": "^4.5.0",
    "bootstrap-social": "^5.1.1",
    "font-awesome": "^4.7.0",
    "gh-pages": "^3.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
Hassaan Tauqir

According to the create react app github pages troubleshoot here, you need to do the following.

  1. Create a new Personal Access Token
  2. git remote set-url origin https://<user>:<token>@github.com/<user>/<repo>.
  3. Try npm run deploy again

Also make sure everything in your package.json is correct, but this definitely looks like an authentication issue.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to publish pip wheels using github actions

Deploying react app to github pages

how to publish to github pages?

Github actions deployment of react storybook to github pages deletes whole repo

Custom domain using create-react-app for github pages

Convert steps to publish function app to artifact in Azure Pipeline to GitHub actions

github pages issue when using github actions and github-pages-deploy-action?

Deploy Angular app to beanstalk using GitHub Actions

How to publish changes to Docker images using Github Actions

React deployment to firebase using github actions

Deploying React App from Codesandbox to Github Pages

React app functions correctly on local but not on Github Pages

create react app with github pages, not updating

Deploying and updating a React App to Github Pages correctly

Issue with publishing React app to Github pages

Deployed React app to github pages is blank

Issue deploying React app on Github pages

publish dist folder to github pages

Deploy Using Github Actions

Flask app on Github pages

Github Actions dotnet publish and deploy with ftp

Getting blank page after react app publish in github

Publish React App onto Github Page but Shows Blank Page

How do I publish my react app on github properly?

GitHub Actions stuck on yarn build step for React app continous integration

Problem while deploying `create-react-app` on github using `gh-pages`

Automating the build and publish process with GitHub Actions (and GitHub Package Registry)

How to publish a Ionic 5 website on GitHub pages?

build and publish dist folder to github pages