npm start in React - reactjs

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

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.

Run two scripts from package.json in Netifly

I have deployed my React app successfully in Netifly.
My app live URL
Here is my package.json file's scripts:
"scripts": {
"start": "react-scripts start",
"json-server": "json-server --watch db.json --port 3003",
"start:dev": "concurrently \"npm start\" \"npm run json-server\"",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
But the problem is: the site unable to show any kind of data. Please visit to have an idea. Because, json-server as backend serves db.json. It's not running in production.
Locally i can run yarn start:dev but couldn't able to run both scripts concurrently. What will be the proper scripts to run both react-scripts start && json-server --watch db.json --port 3003 in production?
I found myself the solution: "start": "concurrently \"react-scripts start\" \"npm run json-server\"", by updating solves the problem.

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

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