Home > Back-end >  build a ReactJs app with npm in a Jenkins Pipeline on Kubernetes
build a ReactJs app with npm in a Jenkins Pipeline on Kubernetes

Time:12-07

I tried everything to build a ReactJs app with NPM in a Jenkins pipeline running on Kubernetes.

When I try to build my project from Windows or even from Windows subsystem for Linux with an Ubuntu installation, everything work fine and NPM is able to install the packages and build de project from the package.json file.

I installed the NodeJS Plugin (available here) And I add this section to my Jenkinsfile

stages {

    stage('Build') {

        steps {

            nodejs(nodeJSInstallationName: 'nodeJS_14.15.4') {

                sh """
                cd ./project-folder
                npm install
                npm run-script build
                """
            }
        }
    }
}

I use the following package.json

{
    "name": "app-react",
    "version": "5.0.0",
    "homepage": ".",
    "private": true,
    "dependencies": {
        "react": "^17.0.1",
        ...
        "react-scripts": "4.0.0",
        ...
    },
    "scripts": {
        "start": "set HTTPS=true&&react-scripts start",
        "build": "set GENERATE_SOURCEMAP=false&&react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "sitemap": "babel-node src/sitemap-generator.js"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ],
    "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1"
    }
}

The installation seems to be ok, but then it always fails at the build step. With blue ocean I can see the following error message

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! apollo-react@5.0.1 build: `set GENERATE_SOURCEMAP=false&&./node_modules/react-scripts/bin/react-scripts.js build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the apollo-react@5.0.1 build 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!     /root/.npm/_logs/2021-12-04T19_05_34_235Z-debug.log
script returned exit code 1

The full logs accessible into /root/.npm/_logs show me this :

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run-script', 'build' ]
2 info using npm@6.14.10
3 info using node@v14.15.4
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle app-react@5.0.0~prebuild: app-react@5.0.0
6 info lifecycle app-react@5.0.0~build: app-react@5.0.0
7 verbose lifecycle app-react@5.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle app-react@5.0.0~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/jenkins/agent/workspace/client/app-react/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
9 verbose lifecycle app-react@5.0.0~build: CWD: /home/jenkins/agent/workspace/client/app-react
10 silly lifecycle app-react@5.0.0~build: Args: [ '-c', 'set GENERATE_SOURCEMAP=false&&react-scripts build' ]
11 silly lifecycle app-react@5.0.0~build: Returned: code: 1  signal: null
12 info lifecycle app-react@5.0.0~build: Failed to exec build script
13 verbose stack Error: app-react@5.0.0 build: `set GENERATE_SOURCEMAP=false&&react-scripts build`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1048:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid app-react@5.0.0
15 verbose cwd /home/jenkins/agent/workspace/client/app-react
16 verbose Linux 4.15.0-135-generic
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run-script" "build"
18 verbose node v14.15.4
19 verbose npm  v6.14.10
20 error code ELIFECYCLE
21 error errno 1
22 error app-react@5.0.0 build: `set GENERATE_SOURCEMAP=false&&react-scripts build`
22 error Exit status 1
23 error Failed at the app-react@5.0.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Before that I also tried to build my project with other agents, actually in my script before that test with the NodeJs plugin, I used Kubernetes plugin that can run any agent into a temporary pod. So I tried with a Nodejs image, even with an Ubuntu image in which one I installed NodeJs manually. The result is always the same then before.

I don't know what is the source of the problem: the access to the installed packages? A resource problem?

CodePudding user response:

I finally found a workaround. The build fail not because of errors but warnings.

The workaround is to remove the eslint configuration part

"eslintConfig": {
    "extends": "react-app"
}

When eslint is not active the result of the build is Compiled successfully.

But when it is active the result is Compiled with warnings and all the warnings appear in the logs, and the jenkins job fail.

  • Related