Deploy react application in Git pages using Azure DevOps - reactjs

Question

I'm trying to deploy my react application (Just a very basic app) in git pages using Azure DevOps. This is to get my hands wet with Azure Devops.
First of all I configured my packag.json as below.
{
"name": "gitpages",
"version": "0.1.0",
"homepage": "https://senal.github.io/gitpage-react",
"private": true,
"dependencies": {
"gh-pages": "^2.0.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"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"
]
}
}
Please pay attention to "homepage" and "deploy" script.
In my Azure DevOps, I have modify the yml file as below.
# Node.js with React
# Build a Node.js project that uses React.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript
trigger:
- master
pool:
vmImage: 'ubuntu-latest'
steps:
- task: NodeTool#0
inputs:
versionSpec: '10.x'
displayName: 'Install Node.js'
- script: |
git config --global user.email "xxxx.yyyy#mymail.com"
git config --global user.name "RSF"
npm install
npm run build
npm run deploy
displayName: 'npm install and build then deploy'
However, when I run the build in DevOps I get the following error:
fatal: could not read Username for 'https://github.com': terminal prompts disabled
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gitpages#0.1.0 deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gitpages#0.1.0 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/vsts/.npm/_logs/2019-06-13T12_03_34_094Z-debug.log
##[error]Bash exited with code '1'.
Please advice what't with my steps/scripts.
Feel free to contact me should you require more info.
UPDATE: I was able to create the page by running
npm run deploy
from my terminal.
What I would like to know is, why we can't do the same thing in DevOps?
Cheers,
RSF

Answer 1

I had the same issue and fixed it by supplying the Github token in the --repo option. Replace npm run deploy with,
npx gh-pages --repo https://$(GITHUB_TOKEN)#github.com/org/repo.git -d dist
and add your token as a pipeline secret.