Closed ntson2 closed 3 years ago
ntson2
commented
4 years ago I believe the problem is there was a process running on port 3000 so that's why "npm start & npx wait-on http://localhost:3000" was hanging. I have no idea how to kill that process in amplify localhost.
abhi7cr
commented
4 years ago Hello @ntson2, The reason it is hanging is because of the following:
npm start & npx wait-on http://localhost:3000 executes the 2 commands in parallel (the single '&' runs commands in parallel). So localhost:3000 is never up and running, as it's sent to the background. The wait-on command waits for the port to become 'available' (the term available here is confusing, but essentially it tries to ping the url:port and see if it gets a 200 response), and since the port is never running, it hangs.
If we try to use '&&' to run both sequentially, it will never hit the second part of && -> wait on command, since the server is still 'running'.
We had a code fix to use a background process manager (pm2) to execute npm start, so that it stays up. I just verified in my personal account that the amplify.yml has been updated to this:
phases:
preTest:
commands:
- npm ci
- npm install wait-on
- npm install pm2
- npm install mocha mochawesome mochawesome-merge mochawesome-report-generator
- npx pm2 start npm -- start
- 'npx wait-on http://localhost:3000'
test:
commands:
- 'npx cypress run --reporter mochawesome --reporter-options "reportDir=cypress/report/mochawesome-report,overwrite=false,html=false,json=true,timestamp=mmddyyyy_HHMMss"'
postTest:
commands:
- npx mochawesome-merge cypress/report/mochawesome-report/mochawesome*.json > cypress/report/mochawesome.json
- npx pm2 killCould you try updating your amplify.yml file to the above?
For new apps, It should automatically generate the above config.
Let me know if you have any questions.
VanTigranyan
commented
4 years ago Hey @abhi7cr . I have exactly the same issue, and I have tried every solution which I found across the internet, and nothing helps it just hangs and after 30 minutes it throws an error and the build fails ->
look - it shows the last line and nothing after that.
abhi7cr
commented
4 years ago Hello @VanTigranyan,
Could you try copying the above phases (preTest, test and postTest) into the amplify.yml file in your app, and redeploy?
VanTigranyan
commented
4 years ago @abhi7cr It is already configured to run from that file 😅
VanTigranyan
commented
4 years ago @abhi7cr
version: 0.2
frontend:
phases:
preBuild:
commands:
- npm install
build:
commands:
- npm run build
artifacts:
baseDirectory: build
files:
- "**/*"
cache:
paths:
- node_modules/**/*
test:
phases:
preTest:
commands:
- npm install
- npm install wait-on
- npm install mocha@5.2.0 mochawesome mochawesome-merge mochawesome-report-generator
- 'npm start & npx wait-on http://localhost:4200 -l'
test:
commands:
- 'npx cypress run --reporter mochawesome --reporter-options "reportDir=cypress/report/mochawesome-report,overwrite=false,html=false,json=true,timestamp=mmddyyyy_HHMMss"'
postTest:
commands:
- npx mochawesome-merge cypress/report/mochawesome-report/mochawesome*.json > cypress/report/mochawesome.json
artifacts:
baseDirectory: cypress
configFilePath: '**/mochawesome.json'
files:
- '**/*.png'
- '**/*.mp4'@abhi7cr I have read that there can be a conflict between cypress and node_modules caching, but I cannot confirm this, is there anything like that?
abhi7cr
commented
4 years ago I meant the modification I provided 2 comments above to the yml file😊. It uses pm2 to start localhost in the background (npx pm2 start npm -- start):
preTest:
commands:
- npm ci
- npm install wait-on
- npm install pm2
- npm install mocha mochawesome mochawesome-merge mochawesome-report-generator
- npx pm2 start npm -- start
- 'npx wait-on http://localhost:3000'
test:
commands:
- 'npx cypress run --reporter mochawesome --reporter-options "reportDir=cypress/report/mochawesome-report,overwrite=false,html=false,json=true,timestamp=mmddyyyy_HHMMss"'
postTest:
commands:
- npx mochawesome-merge cypress/report/mochawesome-report/mochawesome*.json > cypress/report/mochawesome.json
- npx pm2 kill@abhi7cr Got it :D I've tried that too -> the same result
VanTigranyan
commented
4 years ago @abhi7cr the difference is only it now hangs on the stage of running npx pm2... 😂
abhi7cr
commented
4 years ago That’s weird. It doesn’t even start the app? Could you reproduce this on your local machine by running the following command in your project (after installing pm2):
npx pm2 start npm --start & npx wait-on http://localhost:
VanTigranyan
commented
4 years ago @abhi7cr The problem is that in my local machine everything works perfectly. But on the ci environment it breaks. Actually I fixed the configuration and now it works. I have tried almost 15 variations of changes before success. I found an npm library which helped with the issue -> this one https://www.npmjs.com/package/start-server-and-test
VanTigranyan
commented
4 years ago Now my config looks like this
version: 0.2
frontend:
phases:
preBuild:
commands:
- npm install
build:
commands:
- npm run build
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
test:
phases:
preTest:
commands:
- npm install
- npm run clean-reports
test:
commands:
- npx start-test 'npm run run' 3000 'npm run cy:run'
postTest:
commands:
- npm run posttest
artifacts:
baseDirectory: cypress
configFilePath: '**/mochawesome.json'
files:
- '**/*.png'
- '**/*.mp4'Here is my package json if it will help someone
{
"name": "#####",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.9.0",
"antd": "^3.26.12",
"aws-sdk": "^2.642.0",
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"classcat": "^4.0.2",
"core-js": "^3.6.4",
"csvtojson": "^2.0.10",
"debounce": "^1.2.0",
"fbemitter": "^2.1.1",
"formik": "^2.1.4",
"immer": "^5.3.2",
"jquery": "^3.5.1",
"laravel-echo": "^1.4.1",
"markdown-parser": "0.0.8",
"mic-recorder-to-mp3": "^2.2.1",
"moment": "^2.22.2",
"moment-timezone": "^0.5.23",
"plyr": "^3.5.10",
"popper.js": "^1.14.4",
"promise": "8.0.1",
"query-string": "^6.8.2",
"react": "^16.13.1",
"react-animations": "^1.0.0",
"react-app-rewired": "^2.1.5",
"react-audio-recorder": "^2.1.0",
"react-beautiful-dnd": "^5.0.0",
"react-bootstrap": "^1.0.0-beta.12",
"react-bootstrap-modal": "^4.1.1",
"react-circular-progressbar": "^2.0.2",
"react-confirm-alert": "^2.0.5",
"react-cropper": "^1.3.0",
"react-csv": "^1.1.1",
"react-debounce-input": "^3.2.0",
"react-dev-utils": "^5.0.1",
"react-dnd": "^10.0.2",
"react-dnd-html5-backend": "^10.0.2",
"react-dom": "^16.13.1",
"react-dotdotdot": "^1.3.1",
"react-drag-drop-container": "^6.1.1",
"react-drag-list": "^1.1.0",
"react-drag-sortable": "^1.0.6",
"react-fabricjs": "^0.1.6",
"react-fitted-image": "^1.0.1",
"react-ga": "^2.7.0",
"react-gtm-module": "^2.0.7",
"react-hook-form": "^5.1.1",
"react-icomoon": "^2.0.3",
"react-idle-timer": "^4.2.9",
"react-jss": "^10.1.1",
"react-load-script": "0.0.6",
"react-loader-spinner": "^3.1.4",
"react-markdown": "^4.0.3",
"react-plyr": "^2.2.0",
"react-redux": "^7.1.3",
"react-responsive-carousel": "^3.1.50",
"react-responsive-modal": "^4.0.1",
"react-router-auth": "^1.0.1",
"react-router-dom": "^4.3.1",
"react-scripts": "^3.4.1",
"react-scroll": "^1.7.10",
"react-scrollbars-custom": "^4.0.21",
"react-select": "^3.0.8",
"react-select2-wrapper": "^1.0.4-beta6",
"react-shimmer-effect": "^1.0.9",
"react-slick": "^0.23.2",
"react-slider-swiper": "^2.0.6",
"react-smooth-marquee": "^1.0.0",
"react-sortable-hoc": "^0.8.4",
"react-toastify": "^4.2.3",
"redux": "^4.0.0",
"redux-form": "^8.2.2",
"redux-promise-middleware": "^5.1.1",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"resolve": "1.6.0",
"socket.io-client": "^2.1.1",
"swiper": "^4.4.1",
"wait-on": "^5.0.1",
"whatwg-fetch": "2.0.3",
"yup": "^0.28.1"
},
"browserslist": {
"production": [
">0.2%",
"not op_mini all",
"ie >= 9"
],
"development": [
">0.2%",
"not op_mini all",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie >= 9"
]
},
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"scripts": {
"run": "react-app-rewired start",
"build:local": "l2w-scripts build",
"build": "react-app-rewired build",
"serve": "serve ./build -p 4000",
"test": "react-scripts test",
"format": "prettier --write \"src/NewComponents/**/*.+(js|jsx|json|css|md)\"",
"cy:open": "cypress open",
"cm": "git-cz",
"clean-reports": "rm -rf cypress/reports",
"cy:run": "cypress run",
"merge-report": "mochawesome-merge cypress/reports/separate-reports/*.json > cypress/reports/full_report.json",
"generate-report": "marge -o cypress/reports cypress/reports/full_report.json",
"posttest": "npm run merge-report && npm run generate-report",
"cy:test": "npm run clean-reports && npm run cy:run && npm run posttest"
},
"devDependencies": {
"@commitlint/cli": "^8.3.5",
"@commitlint/config-conventional": "^8.3.4",
"autoprefixer": "7.1.6",
"babel-plugin-import": "^1.13.0",
"commitiquette": "^1.0.4",
"commitizen": "^4.1.2",
"conventional-changelog-atom": "^2.0.3",
"customize-cra": "^0.9.1",
"cypress": "^4.4.1",
"cypress-multi-reporters": "^1.4.0",
"env-cmd": "^10.1.0",
"eslint-config-prettier": "^6.5.0",
"eslint-plugin-prettier": "^3.1.1",
"husky": "^4.2.5",
"l2w-scripts": "file:l2w-scripts",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"mocha": "^8.0.1",
"mochawesome": "^6.1.1",
"mochawesome-merge": "^4.1.0",
"mochawesome-report-generator": "^5.1.0",
"node-sass": "^4.14.1",
"prettier": "^1.19.1",
"prop-types": "^15.7.2",
"redux-devtools-extension": "^2.13.8",
"serve": "^11.3.0",
"start-server-and-test": "^1.11.0"
},
"config": {
"commitizen": {
"path": "commitiquette"
}
}
}
ganipcanot
commented
3 years ago Seems the problem was resolved if you are still having issues feel free to re-open the ticket or open a new one.
github-actions[bot]
commented
1 year ago This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Hi,
I added Cypress test to my Aws Amplify app but the preTest hang definitely and failed eventually. I did look at this https://github.com/aws-amplify/amplify-console/issues/240 but it's not applicable for me.
This is my amplify.yml:
And this is my app https://github.com/ntson2/sworld-website/tree/dev I really appreciate if someone can help. I looked around and could not find the solution. I'm new to frontend development btw.