I'm trying to deploy my AngularJS application in a gcloud free trial(GCP). But I'm getting the next error:
Error: Server Error
The server encountered an error and could not complete your request.
Please try again in 30 seconds.
I setup everithing as a nodejs application to deploy. I also added the app.yaml that is necessary.
Here is my app.yaml:
runtime: nodejs12
instance_class: F2
the package.json:
{
"name": "myApp",
"private": true,
"version": "0.0.1",
"description": "Assignment: Get nearest charging stations for a specific location.",
"repository": "",
"license": "MIT",
"dependencies": {
"angular": "^1.7.5",
"angular-loader": "^1.7.5",
"angular-route": "^1.7.5",
"html5-boilerplate": "0.0.1"
},
"devDependencies": {
"angular-mocks": "^1.7.5",
"cpx": "^1.5.0",
"http-server": "^0.11.1",
"jasmine-core": "^3.3.0",
"karma": "^3.1.1",
"karma-chrome-launcher": "^2.2.0",
"karma-firefox-launcher": "^1.1.0",
"karma-jasmine": "^1.1.2",
"protractor": "^5.4.1"
},
"scripts": {
"update-deps": "npm update",
"postupdate-deps": "npm run copy-libs",
"copy-libs": "cpx \"node_modules/{angular,angular-*,html5-boilerplate/dist}/**/*\" app/lib -C",
"prestart": "npm install",
"start": "http-server -a localhost -p 8000 -c-1 ./app",
"pretest": "npm install",
"test": "karma start karma.conf.js",
"test-single-run": "npm test -- --single-run",
"preupdate-webdriver": "npm install",
"//": "Do not install the Firefox driver to work around https://github.com/angular/webdriver-manager/issues/303.",
"update-webdriver": "webdriver-manager update --gecko false",
"preprotractor": "npm run update-webdriver",
"protractor": "protractor e2e-tests/protractor.conf.js",
"update-index-async": "node --eval \"var fs=require('fs'),indexFile='app/index-async.html',loaderFile='app/lib/angular-loader/angular-loader.min.js',loaderText=fs.readFileSync(loaderFile,'utf-8').split(/sourceMappingURL=angular-loader.min.js.map/).join('sourceMappingURL=lib/angular-loader/angular-loader.min.js.map'),indexText=fs.readFileSync(indexFile,'utf-8').split(/\\/\\/##NG_LOADER_START##[\\s\\S]*\\/\\/##NG_LOADER_END##/).join('//##NG_LOADER_START##\\n'+loaderText+' //##NG_LOADER_END##');fs.writeFileSync(indexFile,indexText);\""
}
}
And the folders:
Related
I have the following package.json files for my app:
Client folder:
``{
"name": "nasa-fe",
"version": "1.0.1",
"private": true,
"dependencies": {
"arwes": "^1.0.0-alpha.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.8.0",
"react-scripts": "^5.0.1"
},
"overrides": {
"nth-check#1.0.2": "2.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "set BUILD_PATH=../server/public&& react-scripts build",
"test": "react-scripts test --passWithNoTests",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Server folder:
{
"name": "nasa-project-api",
"version": "1.0.0",
"description": "Nasa mission control api",
"main": "src/server.js",
"scripts": {
"test": "jest --detectOpenHandles",
"test-watch": "jest --watch",
"watch": "nodemon src/server.js",
"start": "node src/server.js",
"cluster": "pm2 start src/server.js -i max"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"csv-parse": "^5.3.3",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"mongoose": "^6.8.4",
"mongose": "^0.0.2-security",
"morgan": "^1.10.0",
"pm2": "^5.2.2",
"react-router-dom": "^6.8.0",
"react-scripts": "^5.0.1"
},
"devDependencies": {
"jest": "^29.3.1",
"nodemon": "^2.0.20",
"supertest": "^6.3.3"
}
}
and root folder:
{
"name": "nasa-exploration",
"version": "1.0.0",
"description": "This a full stack project",
"main": "index.js",
"scripts": {
"deploy": "set BUILD_PATH=../server/public && npm run build --prefix client && npm start --prefix server",
"deploy-cluster": "npm run build --prefix client && npm run cluster --prefix server",
"server": "npm run watch --prefix server",
"client": "npm start --prefix client",
"watch": "npm run server & npm run client",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/yayoamigo/Nasa-exploration.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/yayoamigo/Nasa-exploration/issues"
},
"homepage": "https://github.com/yayoamigo/Nasa-exploration#readme",
"dependencies": {
"arwes": "^1.0.0-alpha.5",
"axios": "^1.2.4",
"dotenv": "^16.0.3",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.0",
"react-scripts": "^5.0.1"
}
}
as you can see I have react-scripts in every folder but get this error regardless, I tried to reinstall the dependencies, change the scripts and nothing. The weird things is when I npm run build on my PC it works
Just checked the Workflow in your repo and I see that you are running the following commands:
...
- run: npm install
- run: npm run build --prefix client
...
According to this, the npm run build --prefix client will run the build under the client directory, but the first command installs dependencies under the root folder. The build just can't find dependencies since it's not installed in the client directory.
So you need to change your install command to use the prefix also:
npm install --prefix client
To read more about prefixes, visit the official docs.
Alternatively, you can use the working-directory keyword to specify the working directory of where to run the command:
- name: Install
working-directory: client
run: npm install
- name: Build
working-directory: client
run: npm run build
working on node app, with docker.
getting the error during image build, in the install step.
locally the installation works fine.
we use nexus, but again locally through nexus the installation works.
I tried adding resolutions for the packages in the error still, yarn throws the title error.
Package.json
{
"name": "my-graphql-service",
"version": "1.0.0",
"main": "index.js",
"repository": "https://github.com/my-graphql-service.git",
"author": "Itay Tur",
"license": "MIT",
"scripts": {
"dev:edge2": "NODE_ENV=development nodemon -r dotenv/config src/index.ts dotenv_config_path=config/edge2.env",
"dev:qa": "NODE_ENV=development nodemon -r dotenv/config src/index.ts dotenv_config_path=config/qa.env",
"generate:integrations": "node src/generate-integrations-code.js",
"build": "rimraf build && NODE_ENV=production tsc --project tsconfig.json",
"start": "NODE_ENV=production node -r dotenv/config build/index.js dotenv_config_path=.env.graph",
"test": "NODE_ENV=development jest --detectOpenHandles --forceExit",
"test:watch": "NODE_ENV=development jest --watch --detectOpenHandles --forceExit",
"format": "prettier --write .",
"lint": "eslint . --fix",
"prepare": "husky install"
},
"resolutions": {
"pretty-format": "^26.0.1",
"jest-diff": "^25.1.0",
"jest-matcher-utils": "^25.1.0",
"#typescript-eslint/type-utils": "#5.30.6",
"#typescript-eslint/utils": "5.30.6"
},
"dependencies": {
"#graphile-contrib/pg-order-by-related": "^1.0.0-beta.6",
"#graphile-contrib/pg-simplify-inflector": "^6.1.0",
"#graphile/pg-aggregates": "^0.1.0",
"#openapitools/openapi-generator-cli": "2.1.22",
"cors": "^2.8.5",
"cptls-common-nodejs": "^5.1.5",
"dataloader": "^2.1.0",
"dotenv": "^16.0.1",
"express": "^4.18.1",
"postgraphile": "^4.12.9",
"postgraphile-plugin-connection-filter": "^2.3.0",
"rimraf": "^3.0.2",
"typescript": "^4.7.4"
},
"devDependencies": {
"#types/express": "^4.17.13",
"#types/jest": "^28.1.2",
"#types/supertest": "^2.0.12",
"#typescript-eslint/eslint-plugin": "^5.29.0",
"#typescript-eslint/parser": "^5.29.0",
"eslint": "^8.18.0",
"husky": "^8.0.0",
"jest": "^28.1.3",
"nodemon": "^2.0.16",
"prettier": "^2.7.1",
"supertest": "^6.2.3",
"ts-jest": "^28.0.5",
"ts-node": "^10.8.1"
}
}
Solution:
delete node_modules & yarn.lock
remove the resolutions
run yarn
I am new to MERN stack development. I made a MERN project, a social media app. I finished and deployed it. It works fine only in chrome browser on my laptop (which I used for development) and when I tried to test on other browser, it just loads and shows blank, with error :
redux.js:653 Uncaught TypeError: Cannot read properties of undefined (reading 'apply').
How do I troubleshoot this ?
Here's package file for DevComm :
{
"name": "devcomm",
"version": "1.0.0",
"description": "social network for developers",
"main": "server.js",
"engines": {
"node": "14.17.3"
},
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild":
"NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
"author": "Adarsh",
"license": "MIT",
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.2",
"concurrently": "^7.0.0",
"express": "^4.17.3",
"gravatar": "^1.8.2",
"jsonwebtoken": "^8.5.1",
"mongoose": "^6.2.6",
"passport": "^0.5.2",
"passport-jwt": "^4.0.0",
"validator": "^13.7.0"
},
"devDependencies": {
"nodemon": "^2.0.15"
}
}
I am having problem with running the project, the project is contains the frontend(react) and backend(node) how should run the frontend side for the project
{
"version": "1.0.0",
"description": "' open source project",
"main": "index.js",
"dependencies": {
"bootstrap": "^4.5.2",
"express": "^4.17.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"reactstrap": "^8.6.0"
},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/plugin-proposal-function-bind": "^7.11.5",
"#babel/preset-env": "^7.11.5",
"#babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"css-loader": "^4.3.0",
"style-loader": "^1.2.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
},
"scripts": {
"serve": "node src/backend/main.js",
"watch": "webpack --mode=development -d --watch",
"build": "webpack --mode=production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": { "type": "git", "url": "" },
"keywords": [],
"author": "",
"license": "ISC",
"bugs": { "url": "" },
"homepage": ""
}
If you want to run frontend(React) and backend(Node) at the same time install concurrently and nodemon.
npm i concurrently
npm install -g nodemon
then at the package.json file add concurrently to run both frontend and backend together.
"scripts": {
"start": "node server/index.js",
"backend": "nodemon server/index.js",
"frontend": "npm run start --prefix client",
"dev": "concurrently \"npm run backend\" \"npm run start --prefix client\""
},
If you want to run only your frontend go to client folder and open your terminal and type
npm start or yarn start
I am trying to deploy on Heroku, where I'm given the following error:
remote: Failed to minify the code from this file:
remote: ./node_modules/webhoseio/webhoseio.js:13
Upon inspecting this dependency, I found that it uses the ES5 'use strict'; declaration. How can I have Heroku compile this dependency?
EDIT: Package.json file
{
"name": "stocks-app",
"version": "1.0.0",
"description": "Mern Demo",
"main": "server.js",
"scripts": {
"start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
"start:prod": "babel-node server.js",
"start:dev": "concurrently \"nodemon --ignore 'client/*'\" \"npm run client\"",
"client": "cd client && npm run start",
"install": "cd client && yarn install",
"build": "cd client && npm run build",
"heroku-postbuild": "npm run build"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"concurrently": "^4.1.0",
"nodemon": "^1.18.9"
},
"dependencies": {
"alphavantage": "^1.2.0",
"axios": "^0.18.0",
"brain.js": "^1.6.0",
"cors": "^2.8.5",
"dotenv": "^6.2.0",
"express": "^4.16.3",
"if-env": "^1.0.4",
"mdbreact": "^4.8.5-patch.1",
"mongoose": "^5.4.0",
"newsapi": "^2.4.0",
"request": "^2.88.0",
"webhoseio": "^1.0.2"
}
}
I resolved this by turning off minification in my Webpack config. Instead of using the CRA-preconfigured Webpack ES-Lint loader, I installed the HTML-Loader and set loader to that. Following, I set minimize to false. Here's how:
module: {
rules: [
{
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
minimize: false,
},
loader: require.resolve('html-loader'),
},
],}}