I have a project that I want to deploy to heroku. The folder structure is as follows,
Root > client, server
these folders client and server has their own package.json file, so I wrote an installation command like "install" : "npm install --prefix client && npm install --prefix server".
but when I try to deploy it to heroku the build process keeps running npm install in the cli.
heroku cli while building
Root package.json
"scripts": {
"install": "npm install npm install --prefix server && npm install --prefix client",
"build": "npm run build --prefix client",
"start": "npm run server",
"client": "npm start --prefix client",
"server": "npm start --prefix server",
"server-watch": "npm run watch --prefix server",
"watch": "nodemon server.js --prefix src/server",
"test": "echo \"Error: no test specified\" && exit 1"
},
Client package.json
"scripts": {
"start": "react-scripts start",
"build": "BUILD_PATH='../server/public' react-scripts build ",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Server package.json
"scripts": {
"install": "npm install",
"start": "node src/server.js",
"watch": "nodemon src/server.js",
"test": "jest",
"test-watch": "jest --watch"
},
Related
So, I've tried running npm i on my React app so that I can work concurrently on both front and back end at the same time. However, it seems to be hanging on the "install":
appName#0.1.0 install
cd server && npm i && cd ../client && npm i
Below are the package.json scripts I'm using:
"scripts": {
"start": "node server/server.js",
"dev": "concurrently \"cd server && npm run watch\" \"cd client && npm start\"",
"install": "cd server && npm i && cd ../client && npm i",
"build": "cd client && npm run build",
"seed": "cd server && npm run seed",
"test": "echo \"Error: no test specified.\" && exit 1",
"eject": "react-scripts eject"
},
What am I doing wrong? Any help is greatly appreciated!
You may be running into an infinite loop since you have defined an install script in your package.json. For more details on npm scripts configuration have a look here.
You might also be facing similar issues with some of the other scripts you have defined, e.g. build also calls itself npm run build. You should build the project code as part of the build script. See the CRA source build script for reference: https://github.com/facebook/create-react-app/blob/d960b9e38c062584ff6cfb1a70e1512509a966e7/package.json#L8
Try removing the install script and run the commands manually when you need to install dependencies for your project. The updated scripts:
"scripts": {
"start": "node server/server.js",
"dev": "concurrently \"cd server && npm run watch\" \"cd client && npm start",
"build": "cd client && npm run build",
"seed": "cd server && npm run seed",
"test": "echo \"Error: no test specified\" && exit 1",
"eject": "react-scripts eject"
},
As a side note/question, why don't you run npm i from the root of the project and then run your build and seed commands?
Only installing dependencies will not build your app, in most cases.
I have a web app that uses Express backend and React frontend. The heroku-postbuild script in my package.json is as follows:
"heroku-postbuild": "npm run build && cd frontend && npm install && npm run build"
When I git push heroku master all seems to be fine until I get:
"Failed at the honeyman-designs#1.0.0 heroku-postbuild script."
this is the script:
"scripts": {
"start": "nodemon --watch backend --exec babel-node backend/server.js",
"build": "del -rf dist && babel backend -d dist",
"heroku-postbuild": "npm run build && cd frontend && npm install && npm run build"
},
The script inside frontend is:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I'm using Windows 10 as my OS.
My Procfile contains:
web: node dist/server.js
I'm not too sure what I'm doing to get this error if anybody can help it would be appreciated.
My package.json file is
"scripts": {
"start": "concurrently \"nodemon index.js\" \"PORT=3000 react-scripts start\"",
"build": "react-scripts build",
"server": "NODE_ENV=production nodemon index.js",
"dev": "NODE_ENV=development nodemon index.js",
"test": "react-scripts test",
"eslint": "eslint .",
"cypress:open": "cypress open",
"start:test": "NODE_ENV=test concurrently \"NODE_ENV=test nodemon index.js\" \"NODE_ENV=test PORT=3000 react-scripts start\""
},
my creation of router in node app.js is
if (process.env.NODE_ENV === 'test') {
const testingRouter = require('./controllers/testing')
app.use('/api/testing', testingRouter)
}
but when I run cypress test it complains that there is no such router. How can I make NODE_ENV=test while calling npm run cypress:open
command?
And how can I console.log(process.env.NODE_ENV) to see what if it was passed to cypres process?
solved
"start:test": "cross-env NODE_ENV==test concurrently \"cross-env NODE_ENV=test nodemon index.js\" \"cross-env NODE_ENV=test PORT=3000 react-scripts start\""
and
npm run start:test command in one command prompt, and run cypress in another
I want to run the to build commands (clienr and server) in one npm run commands.
So on my package.json scripts section I added this line:
"build-all": "ng build --prod && ng run web-app:server",
The problem occurs when I run this commands: npm run build-all --configuration=qa.europe.
The configuration is loaded when I run each commands separately but not when I run the above commands.
Any ideas?
You can try this.
"scripts": {
"start:production": "npm install && npm run build && npm run start:prod",
"start:prod": "cross-env NODE_ENV=production node server",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
npm run start:production it will run "start:production" & "start:prod" both scripts
You can try to use postinstall, it will look as next:
"scripts": {
"start": "ng run web-app:server",
"postinstall": "ng build --prod --configuration=qa.europe",
}
So after npm install, the build of your UI starts. And after that will start your server.
I would like to run one npm start command to run both my frontend folder and backend folder. Currently, I have to navigate inside each folder and individually run the command on both to see my app open on the localhost. I have looked into the package 'concurrently' but am having some trouble implementing it in my package.json file.
Here is my package.json file for my frontend folder:
"scripts": {
"start": "set HOST = 'http://localhost' && set PORT=8000 && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"postbuild": "react-snap"
}
I have tried using this bit to run the backend once I run npm start on the frontend however it did not work:
"start": "set HOST = 'http://localhost' && set PORT=8000 && ../backend/ start & react-scripts start"
Edit:
Still having some troubles after reattempting.
Here are my scripts from my package.json files
Frontend folder
"scripts": {
"start": "set HOST = 'http://localhost' && set PORT=8000 && react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject",
"postbuild": "react-snap"
},
Backend Folder
"scripts": {
"start": "node ./bin/www"
},
The front end is written in React and the backend in Node. Any help would be greatly appreciated!
Install concurrently:
npm i concurrently --save-dev
Now go to your package.json and add this:
"start": "node index.js",
"client": "npm run start --prefix client",
"dev": "concurrently \"npm run start\" \"npm run client\""
(assuming your client folder contains the front-end server)
then, if you wanna run both servers, just type npm run dev and be happy
I was facing the same issue but it is resolved now. Let's say the server is in the 'Backend' folder and the frontend is in the 'client' folder.
then scripts in server-side package.json should be like:
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "cd ../ && npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
and client-side package.json is like:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000",
then 'npm run dev' runs concurrntly both the server
The 'concurrently' package can do this
npm i concurrently --save-dev
Then set up npm run dev to do
"dev": "concurrently --kill-others \"npm run start-watch\" \"npm run wp-server\""
Another option is to do (Running in Windows CMD):
"dev": "start npm run start-watch && start npm run wp-server"