"concurrently" not working for parent directory client reactjs server - reactjs

"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.

Related

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"
}

React scripts fails while i run concurrently with nodemon

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

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