React scripts fails while i run concurrently with nodemon - reactjs

When i run npm start the above error occurs.
my script in package.json:
"start": "concurrently \"nodemon server\" \"react-scripts start\"",
Any help will be great !

One of the ways you can do is (You can amend it accordingly) :
"server": "nodemon index.js",
"react": "react-scripts start"
"dev": "concurrently \"npm run server \" \"npm run react\" "
And then do npm run dev
You can read more about concurrently here

Related

"concurrently" not working for parent directory client reactjs server

"concurrently" not working for parent directory client reactjs server.
concurrently commands are:
"scripts": {
"client": "cd ../ --prefix client && npm run start",
"server": "nodemon index.js",
"dev" : "concurrently \"npm run client\" \"npm run server\" "
}
Directory structure is
client
server
With Your folder structure Try this settings:
"scripts": {
"start": "node server/index.js",
"server": "nodemon server/index.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
},
And hit npm run dev It should work fine ;-) Remember to install concurrently correct.

npm Install different folders with one script

I want to run one npm install on the project root to install both server and client packages.
My project structure is:
project
│ package.json
| node express files...
└───client
│ package.json
| react app files...
And also, create one script that runs npm run dev on the root folder and npm start on the client folder.
I tried to use concurrently, and it does work for running the apps, but for installing, I get a weird infinite loop that keeps installing in the root folder:
terminal screenshot
And I guess if concurrently is not globally installed, it wouldn't work anyway for the first installation.
package.json scripts in the root folder:
"scripts": {
"test": "jest",
"start": "node index.js",
"build": "cd client && npm run build",
"install-client": "cd client && npm install",
"heroku-postbuild": "npm run install-client && npm run build",
"dev-client": "cd client && npm start",
"dev": "nodemon index.js",
"install": "concurrently \"npm install\" \"npm run install-client\"",
"dev-both": "concurrently \"npm run dev\" \"npm run client-dev\""
},
Any ideas how for a fix or an alternative way to do this?
To avoid infinite loop, try this :
"both-install": "concurrently \"npm install\" \"npm run install-client\"",
to install client try this:
"install-client": "cd ../client && npm install",

React build with env file from a command line

Is there any way to create React App build from a command like? So far I have in the shell script:
npm install;
npm run-script build:test;
where build:test is
bash -ac '. .env.test; react-scripts build'
but that will refer to build:test script from package.json but when I want to use specific .env file in the shell script (without editing or adding anything to package.json) as follow
npm run .env.my_box react-scripts build;
that will not execute build for .env.my_box
What I have set incorrectly?
you should try this library https://github.com/toddbluhm/env-cmd
Update your package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:stage": "env-cmd -f ./.env.stage npm run-script build"
}
then npm run build:stage
You could do something like this:
on package.json
"scripts": {
"server": "cd server && npm start",
"client": "cd client && npm start",
"server-dep": "cd server && npm install",
"client-dep": "cd client && npm install",
"install-dep": "npm install && concurrently \"npm run server-dep\" \"npm run client-dep\"",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"test": "echo \"Error: no test specified\" && exit 1"
},
then npm run start for example, this is monorepo so we run server and frontend with one command

npm start in React

how can I start both this only by typing npm start?
"scripts"{
"server": "json-server --watch appointmentList.json",
"start": "react-scripts start",
}
what i've been doing was running each of them in different terminal
you can install concurrently to run the scripts in parallel, like this:
{
"dev": "concurrently \"npm run server\" \"npm start\""
}
In short, you can append the desired commands to the start script:
"scripts": {
"server": "json-server --watch appointmentList.json",
"start": "json-server --watch appointmentList.json && react-scripts start"
}
and call it with $npm run start or $npm start
You could use '&&' like:
{
"server": "json-server --watch appointmentList.json",
"start": "npm run server && react-scripts start"
}

How to setup VSCODE for Angular2 with Typescript debugging without NPM Script Runner

I couldn't find a sample document that demonstrates how to setup vscode for angular2 via typescript debugging without npm Script Runner.
Quickstart is a generic solution that would work even IDE is not VSCODE
So simply I'm asking for a documentation/repository about how to convert all commands below into VSCODE tasks without spending hours to figure out correct syntax/structure.
"scripts": {
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose"
},
In-case you think this is a duplicate of another question such as Debug & Run Angular2 Typescript with Visual Studio Code? please make sure that provided answer is not using npm start.
e.g. accepted answer of that question uses it at step 5

Resources