CODEWITHSUNDEEP
reactjsazure-devopsgithub-pages
RSF
RSF

Reputation: 598

Deploy react application in Git pages using Azure DevOps

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 "[email protected]"
        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! [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/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

Upvotes: 0

Views: 274

Answers (1)

nokome
nokome

Reputation: 10314

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.

Upvotes: 1

Related Questions