I'm trying to build my react application using Jenkins.
I pull the source code from gitlab and trying to execute shell commands:
npm install && npm run build
But problem is that build executes endlessly and jenkins even crushes!
This is my package.json:
{
"name": "myapplication",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"jquery": "^3.3.1",
"react": "^16.5.2",
"react-bootstrap": "^0.32.4",
"react-dom": "^16.5.2",
"react-router-dom": "^4.3.1",
"react-scripts": "2.0.3",
"react-trumbowyg": "^1.1.0",
"react-vk": "^3.5.0"
},
"scripts": {
"start": "PORT=80 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"proxy": "http://localhost:8080"
}
And jenkinks's workspace for this project:
Logs:
Checking out Revision 05de65c3548b48a798ebe2f58f8cf0be59416887 (refs/remotes/origin/master)
> git config core.sparsecheckout # timeout=10
> git checkout -f 05de65c3548b48a798ebe2f58f8cf0be59416887
Commit message: "fix build"
> git rev-list --no-walk 05de65c3548b48a798ebe2f58f8cf0be59416887 # timeout=10
[static] $ /bin/sh -xe /tmp/jenkins4408353562870979305.sh
+ npm install
npm WARN ajv-keywords#3.2.0 requires a peer of ajv#^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
audited 32091 packages in 43.675s
found 8 low severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
+ npm run build
> myapplication#0.1.0 build /var/lib/jenkins/workspace/path/to
> react-scripts build
Creating an optimized production build...
Build timed out (after 3 minutes). Marking the build as failed.
Build was aborted
SSH: Current build result is [FAILURE], not going to run.
Finished: FAILURE
Most of tutorials I found suggest use docker and CI & DI frameworks.
How to build react application without those?
Npm version was invalid, I've updated it and everything is ok now.
Related
I have seemingly tried everything and see conflicting instructions on deploying a React app (without API) to Azure Static Web Apps even from Microsoft. Has anyone done this successfully?
The latest doc I've used is:
https://learn.microsoft.com/en-gb/azure/static-web-apps/get-started-portal?tabs=react&pivots=github
which is for creating the SWA in the portal though I've used others as well with problems.
I've now arrived at this error:
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! percentage-calculator#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the percentage-calculator#0.1.0 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! /github/home/.npm/_logs/2022-07-12T19_38_33_349Z-debug.log
---End of Oryx build logs---
Oryx has failed to build the solution.
Here is my file structure if that matters:
react-app ->src ->components ->index.js,App.js etc..
->public ->index.html etc..
->build (build is gitignored)
->node_modules etc..
My azurestaticwebapps... yml file contains:
app_location: "/"
api_location: ""
output_location: "build"
https://github.com/markhardy/percentage-calculator/runs/7308960687?check_suite_focus=true
Can someone explain what I'm doing wrong? I'm at a loss at this point especially with conflicting instructions from Microsoft.
Seems you have warnings in your code, so the compiler doesn't like it.
Simply change the yml file as below:
under build_and_deploy_job, add:
env:
CI: false
This will stop treating warnings as errors.
Has anyone done this successfully?
We have followed the same document which you have provided and able to build and deploy React static web App from portal without any issues.
Build and Deploy Job:
package.json file:
{
"name": "hello",
"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",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"playwright_test": "playwright 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"
]
},
"devDependencies": {
"#playwright/test": "^1.22.2"
}
}
Try to add devDependencies in your package.json file and check once.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#2.3.2 (node_modules/fsevents):
As per this Document, we can add optionalDependencies in your package.json file or can run npm install -f.
Please refer Troubleshooting deployment and runtime errors for Static Web Apps for more information.
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! timetablemanager#0.1.0 deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the timetablemanager#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/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"
]
}
}
According to the create react app github pages troubleshoot here, you need to do the following.
Create a new Personal Access Token
git remote set-url origin https://<user>:<token>#github.com/<user>/<repo>.
Try npm run deploy again
Also make sure everything in your package.json is correct, but this definitely looks like an authentication issue.
Putting this here for those looking to do the same as the OG:
I created and added a personal token, and also faced some more issues.
Here are the changes I ended up making on the action file:
- name: setup git authentication
run: |
git config --global user.email "<me>#<gmail>.com"
git config --global user.name "<my_name>"
git remote set-url origin https://<user>:<token>#github.com/<user>/<repo>
- name: publish
run: |
yarn
npm run deploy
for anyone else who ends up here, you can use the secrets.GITHUB_TOKEN that is available on every action, without setting it directly in the settings for your repo.
use Joey Baruch's answer above, just replace <token> with:
${{ secrets.GITHUB_TOKEN }}
P.s. stackoverflow wont let me comment yet so I had to post this as a separate answer.
I'm trying to deploy my create-react-app using Heroku. When I do git push heroku master, the build fails.
This is the error log:
-----> React.js (create-react-app) multi app detected
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_ENV=production
NODE_MODULES_CACHE=true
NODE_VERBOSE=false
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 12.x...
Downloading and installing node 12.16.3...
Using default npm version: 6.14.4
-----> Installing dependencies
Installing node modules (package.json + package-lock)
> nodemailer#6.4.6 postinstall /tmp/build_258ba2b79ac9e7091bc7dd79a031dd4f/node_modules/nodemailer
> node -e "try{require('./postinstall')}catch(e){}"
=== Nodemailer 6.4.6 ===
Thank you for using Nodemailer for your email sending needs! While Nodemailer
itself is mostly meant to be a SMTP client there are other related projects in
the Nodemailer project as well.
For example:
> IMAP API ( https://imapapi.com ) is a server application to easily access
IMAP accounts via REST API
> NodemailerApp ( https://nodemailer.com/app/ ) is a cross platform GUI app to
debug emails
> styled-components#4.2.0 postinstall /tmp/build_258ba2b79ac9e7091bc7dd79a031dd4f/node_modules/styled-components
> node ./scripts/postinstall.js || exit 0
Use styled-components at work? Consider supporting our development efforts at https://opencollective.com/styled-components
added 1914 packages from 1179 contributors and audited 2053 packages in 49.627s
1 package is looking for funding
run `npm fund` for details
found 56466 vulnerabilities (39341 low, 26 moderate, 17098 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details
-----> Build
Running build
> juliesong#0.1.0 build /tmp/build_258ba2b79ac9e7091bc7dd79a031dd4f
> react-scripts build
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`
Failed to compile.
./src/components/PageIntro.js
Cannot find module: 'axios'. Make sure this package is installed.
You can install this package by running: npm install axios.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! juliesong#0.1.0 build: `react-scripts build `
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the juliesong#0.1.0 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! /tmp/npmcache.6BFeR/_logs/2020-05-17T06_58_22_399Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
Some possible problems:
- Node version not specified in package.json
https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
- A module may be missing from 'dependencies' in package.json
https://devcenter.heroku.com/articles/troubleshooting-node-deploys#ensure-you-aren-t-relying-on-untracked-dependencies
Love,
Heroku
! Push rejected, failed to compile React.js (create-react-app) multi app.
! Push failed
Here's my package.json file, in case it helps:
{
"name": "juliesong",
"version": "0.1.0",
"private": true,
"homepage": "https://www.juliesong.me",
"dependencies": {
"cors": "^2.8.5",
"express": "^4.17.1",
"nodemailer": "^6.4.6",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-preloaders": "^3.0.3",
"react-responsive": "^6.1.2",
"react-responsive-carousel": "^3.1.49",
"react-responsive-simple": "^0.1.2",
"react-router-dom": "^4.1.1",
"react-router-hash-link": "^1.2.1",
"react-scripts": "^3.0.0",
"styled-components": "^4.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build ",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public",
"predeploy": "npm run build && cp build/index.html build/404.html",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/core": "^7.4.3",
"#storybook/addon-actions": "^5.0.6",
"#storybook/addon-links": "^5.0.6",
"#storybook/addons": "^5.0.6",
"#storybook/react": "^5.0.6",
"babel-loader": "^8.0.5",
"gh-pages": "^2.2.0"
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/jiyoonee/Website-Portfolio.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/jiyoonee/Website-Portfolio/issues"
}
}
I did try to work around with gh-pages but it didn't seem to work so I tried switching to Heroku. It's my first time using it so any help on this issue would be appreciated. Thanks!
I'm currently trying to setup CI through GitLab for my React app hosted on Firebase. I'm struggling to get past this point. There were some other post suggesting the use of sudo but the console told me the command was not found.
Any help would be greatly appreciated. Thanks you.
Here are my current configurations:
gitlab-ci.yml configuration file
image: node:10.15.3
cache:
paths:
- node_modules/
stages:
- build
- deploy
deploy_dev:
stage: deploy
script:
- echo "Deploying to staging environment"
- npm install -g firebase-tools
- firebase deploy --token $FIREBASE_DEPLOY_KEY --project $CI_ENVIRONMENT_NAME
environment:
name: dev
only:
- master
Package.json
{
"name": "react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^4.4.1",
"firebase": "^6.6.2",
"firebase-functions": "^3.3.0",
"moment": "^2.24.0",
"node-sass": "^4.13.1",
"react": "^16.12.0",
"react-beautiful-dnd": "^11.0.5",
"react-dates": "^20.3.0",
"react-dom": "^16.12.0",
"react-moment": "^0.9.7",
"react-perfect-scrollbar": "^1.5.3",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.3.0",
"reactstrap": "^8.2.0",
"recompose": "^0.30.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
The console error indicating permission error
$ firebase deploy -m "Pipeline $CI_PIPELINE_ID, build $CI_BUILD_ID" --non-interactive --token $FIREBASE_DEPLOY_KEY --project $CI_ENVIRONMENT_NAME
⚠ functions: package.json indicates an outdated version of firebase-functions.
Please upgrade using npm install --save firebase-functions#latest in your functions directory.
=== Deploying to 'cmd-dev-bbdc4'...
i deploying functions, hosting
Running command: npm --prefix "$RESOURCE_DIR" run lint
> functions# lint /builds/cmdc/cmd/functions
> eslint .
sh: 1: eslint: Permission denied
npm ERR! code ELIFECYCLE
npm ERR! errno 126
npm ERR! functions# lint: `eslint .`
npm ERR! Exit status 126
npm ERR!
npm ERR! Failed at the functions# lint 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/2020-02-03T01_51_09_788Z-debug.log
Error: functions predeploy error: Command terminated with non-zero exit code126
ERROR: Job failed: exit code 1
So through some experimentation I was able to determine that I had to cd into the 'functions' directory and also run NPM install. I guess this was a due to a fundamental misunderstanding of how Firebase projects are structured and of node packages.
I would love to learn more so if anyone share some reading about this, it would be appreciated.
Ended up with a script that look like the following.
deploy_dev:
stage: deploy
script:
- echo "Deploying to staging environment"
- npm install -g firebase-tools #--allow-root
- npm ci #--allow-root
- cd functions # required or would throw the "eslint: not found" error
- npm ci
- cd ..
- firebase use --token $FIREBASE_DEPLOY_KEY $CI_ENVIRONMENT_NAME
- firebase deploy -m "Pipeline $CI_PIPELINE_ID, build $CI_BUILD_ID" --non-interactive --token $FIREBASE_DEPLOY_KEY
environment:
name: dev
I have a very strange error when trying to create a react app using the create-react-app module. On my computer it is very easy to recreate the error:
npx create-react-app test-project --typescript
The project works fine. But if I delete the node_modules folder and do:
npm install
I get this error:
npm install
npm WARN deprecated flatten#1.0.2: I wrote this module a very long time ago; you should use something else.
npm WARN deprecated left-pad#1.3.0: use String.prototype.padStart()
npm ERR! Unexpected end of JSON input while parsing near '...3s4pkvleO6z4pcCFRth5v'
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/computer/.npm/_logs/2019-08-14T14_44_36_086Z-debug.log
Funny thing is, if I remove the "react-scripts" from the package.json file, npm install is succesfull - but of course the project doesn't work then.
I am using Node 12.8.0. And here are the package.json file:
{
"name": "test-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#types/jest": "24.0.17",
"#types/node": "12.7.1",
"#types/react": "16.9.1",
"#types/react-dom": "16.8.5",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.1",
"typescript": "3.5.3"
},
"scripts": {
"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"
]
}
}
I solved this by running
npm cache clean --force
But if you want to check if it is a viable solution before nuking the entire cache you can do:
npm install --cache /tmp/empty-cache
It forces npm to not use the cache.
I clone your package.json and npm install work good
using node v11.14.0 and npm 6.7.0
I tried to clear this problem to use on the node v12.8.1.
But I could't solve it.
Finally, I down-graded node version to 10.16.3 LTS. :(
If you want to use 'create-react-app' that have no npm error, Just use node version 10.16.3 LTS.