React server (front-end) is blocking express server (back-end) - node.js

Here is my package.json file
{
"name": "crypto",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "jest --watchAll",
"start": "npm run build-client && node index.js",
"dev": "npm run dev-client & npm run start-redis && cross-env ENV='development' nodemon index.js",
"dev-peer": "cross-env GENERATE_PEER_PORT='true' ENV='development' nodemon index.js",
"start-redis": "redis-server --daemonize yes",
"build-client": "npm run clean && parcel build client/src/index.html --out-dir client/dist",
"dev-client": "npm run clean && parcel client/src/index.html --out-dir client/dist",
"clean": "rm -rf .cache client/dist"
},
"jest": {
"testEnvironment": "node"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"cross-env": "^7.0.2",
"jest": "^26.0.1",
"nodemon": "^2.0.4"
},
"dependencies": {
"body-parser": "^1.19.0",
"elliptic": "^6.5.3",
"express": "^4.17.1",
"hex-to-binary": "^1.0.1",
"parcel-bundler": "^1.12.4",
"pubnub": "^4.28.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"redis": "^3.0.2",
"request": "^2.88.2",
"uuid": "^3.3.2"
},
"description": ""
}
When i run command npm run dev, i receive following Result,
$ npm run dev
crypto#1.0.0 dev C:\Users\Education Use\crypto
npm run dev-client & npm run start-redis && cross-env ENV='development' nodemon index.js
crypto#1.0.0 dev-client C:\Users\Education Use\crypto
npm run clean && parcel client/src/index.html --out-dir client/dist
crypto#1.0.0 clean C:\Users\Education Use\crypto
rm -rf .cache client/dist
Server running at http://localhost:1234
✨ Built in 107.61s.
that is only running dev-client and blocking epress server.
Guide me please...

Related

Why do i get an error react-scripts: not found on github actions CI

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

if-env is running dev instead of prod even though NODE_ENV = "production"

In my package.json file, I have:
...
"scripts": {
"start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
"start:dev": "nodemon run server.js",
"start:prod": "node server.js"
},
"dependencies": {
"dotenv": "^16.0.1",
"if-env": "^1.0.4",
},
"devDependencies": {
"concurrently": "^7.2.1",
"nodemon": "^2.0.19"
}
...
and my .env file has:
NODE_ENV=production
When I run npm start it runs nodemon instead of just running it once.
Why is it doing this? What am I missing?

How to deploy AngularJS in GCP?

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:

how to run react project with web pack which contains frontend and backend

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

ES5: 'use strict' within dependency fails to be minified by Heroku

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'),
},
],}}

Resources