Error deploying react-scripts application to GAE - node.js

I'm attempting to deploy a newly generated react-scripts based application to GAE and am running into an issue. It appears as though the build completes successfully but it fails during deploy/'Updating service'. Looking for some pointers on how to debug what's happening as I don't see anything in the error log in the console.
Below is the output from the last part of the build:
Step 5 : CMD npm start
---> Running in b930fc7e35e6
---> 2d0d24685054
Removing intermediate container b930fc7e35e6
Successfully built 2d0d24685054
Below is the error I am seeing during the service update:
Updating service [default]...failed.
ERROR: (gcloud.app.deploy) Error Response: [13] Timed out when starting VMs. It's possible that the application code is unhealthy. (0/2 ready, 2 still deploying).
app.yaml:
runtime: nodejs
vm: true
package.json:
{
"name": "venue-web",
"version": "0.1.0",
"private": true,
"engines": {
"node": "~6.8"
},
"devDependencies": {
"react-scripts": "0.7.0"
},
"dependencies": {
"react": "^15.3.2",
"react-dom": "^15.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"deploy": "gcloud app deploy --project venue-web"
}
}

I think you are missing react-scripts in your dependencies.

Related

Error on deploying a next.js app to cloud66

Im trying to deploy a basic next.js app which I just created on cloud66 vm.
This is my package.json of my next.js project:
{
"name": "cloud66",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"lint": "next lint",
"start": "next start",
"cloud66-build": "npm run build && npm run start"
},
"dependencies": {
"next": "13.0.3",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"engines": {
"node":">=14.6.0"
},
"devDependencies": {
"eslint": "^8.27.0",
"eslint-config-next": "^13.0.3"
}
}
when im deploying my app to cloud66 the deployment will be successfull but in the error logs of the server im getting the following error which ends up in not showing anything under my address:
Error: Could not find a production build in the '/app/.next' directory. Try building your app with 'next build' before starting the production server. https://nextjs.org/docs/messages/production-start-no-build-id
optimistic-shy-swallow — at NextNodeServer.getBuildId (/app/node_modules/next/dist/server/next-server.js:165:23)
optimistic-shy-swallow — at new Server (/app/node_modules/next/dist/server/base-server.js:58:29)
optimistic-shy-swallow — at new NextNodeServer (/app/node_modules/next/dist/server/next-server.js:67:9)
optimistic-shy-swallow — at NextServer.createServer (/app/node_modules/next/dist/server/next.js:143:16)
optimistic-shy-swallow — at async /app/node_modules/next/dist/server/next.js:155:31
optimistic-shy-swallow — at async NextServer.prepare (/app/node_modules/next/dist/server/next.js:130:24)
optimistic-shy-swallow — at async /app/node_modules/next/dist/cli/next-start.js:116:9
now from what i found searching on the internet I had the idea to add a custom script to my package.json: "cloud66-build": "npm run build && npm run start" and call it. Cloud66 provides a way to call commands in an extra file defining the command which will be called. I added my script there, but the above error is still there. Does anybody have an idea?
production: # Environment
last_thing: # Hook point
- command: npm run cloud66-build # Hook type // <-- calling the script from my package.json
target: any # Hook fields
execute: true

how to run a vue js 2 app with pm2 library in linux(RHEL)?

I have a vue js app, which i run it locally with npm run serve command.
I am trying to run it in a development linux ( RHEL) box with pm2 library, but it doesn't start the application. how exactly to configure my project to run with pm2? my package.son file is below
{
"name": "app",
"version": "0.1.0",
"scripts":{
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.6.14",
...
}
}

React App: Failed to Compile. Module parse failed

Everytime I create React app and start the development server, I get this error. HELP!!!
Per this issue, it may be a problem with the react-scripts part of your library. So either use a specific, older version of create react app by running :
npx create-react-app#4.0.1 my-app
Or by running CRA as is, then modifying your package.json folder so that the react script version is specified.
So after you run CRA, change your package.json file like so:
{
"name": "myapp",
...
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "4.0.1" // change this line to 4.0.1
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
}
Then make sure you rm -rf node_modules then run npm install to get a fresh install that removes whatever react-scripts came by default so that you use the specific 4.0.1 version.

Could not complete "npm run deploy" command for React to use on Github Pages

I'm trying to deploy a website on Github pages, and the project was created using create-react-app and has gh-pages module installed. All of my local and remote repositories are up to date, and using npm start launches the page on local host with no issues.
However when I try to deploy this site to Github Pages using npm run deploy, it compiles successfully but then hangs forever on the gh-pages -d build command. It goes on forever, and does not exit out of it by itself with an error message nor is an error log created. I suppose the command could just be taking really long to finish, but I waited for 30 minutes without it ending so I am not sure.
Below is my package.json:
{
"name": "website",
"version": "0.1.0",
"private": true,
"homepage": "https://xxx.github.io/website",
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"gh-pages": "^2.2.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"
},
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"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"
]
}
}
here is my shell log after force termination of npm run deploy:
> website#0.1.0 predeploy C:\Users\user\directory
> npm run build
> website#0.1.0 build C:\Users\user\directory
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
40.32 KB build\static\js\2.08db1231.chunk.js
2.9 KB build\static\js\main.0c674757.chunk.js
784 B build\static\js\runtime-main.e77b87bb.js
547 B build\static\css\main.d1b05096.chunk.css
The project was built assuming it is hosted at /website/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
To publish it at https://xxx.github.io/website , run:
npm run deploy
Find out more about deployment here:
bit.ly/CRA-deploy
> website#0.1.0 deploy C:\Users\user\directory
> gh-pages -d build
as an aside does my github free account status have to do with anything?
Use version 2.0.1 instead of 2.2.0 for gh-pages
running "gh-pages -d public" hangs on "pushing" per node debug #324

homepage entry in the package.json gving error

I am running react app in the nginx server by dockerizing it.
{
"name": "react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.0.0-alpha.6",
"react": "^16.2.0",
"react-axios": "^2.0.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build-window": "react-scripts build && del ../server/dist && move build ../server/dist",
"build-linux": "react-scripts build && rm -rf ../server/dist && mv build ../server/dist",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"homepage": "/myapp/"
}
if i dont put homepage entry i am able to run locally but in the ngInx server, css and js files are giving 404.
below is the path it is taking without context path in ngInx server for css https://XXXXXXXXXXXXXXXX/static/css/main.9a46c0ad.css
If i put homepage entry , i am getting "Uncaught SyntaxError: Unexpected token <" error . But in the network tab i see all the js and css files are loading properly..
Can you please help me, which area i have to concentrate to resolve this issue
Don't put your context root in the package.json. When you build the app you can give the the base-href in your build script. Add --base-href=/myapp/ in your build script. This will add the base href in your index.html

Resources