React build with env file from a command line - reactjs

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

Related

yarn start:all command working for mac but throwing error in windows system for same package.json scripts values

I am trying to start a react and node based application that works fine in mac systems, but when I am trying to start in windows, it's throwing an error.
The command to start is - yarn start:all
The script entries in package.json file are -
"scripts": {
"docs": "jsdoc2md src/*.js src/**/*.js > API.md",
"build:dev": "better-npm-run build:dev",
"build:production": "better-npm-run build:production",
"style": "eslint --fix --ext .js,.jsx src config",
"unit": "cross-env LOG_LEVEL=warn jest",
"coverage": "cross-env LOG_LEVEL=warn helix test --coverage",
"test": "yarn style && yarn coverage",
"start:inspect": "nodemon --inspect .",
"eject": "helix eject",
"start": "better-npm-run start:stage",
"start:ordersPresentationStage": "micro_cancellations_path=http://localhost:3001/cancellations/micro yarn --cwd ../orders-presentation-helix startStage",
"start:laptopProxyServer": "node tools/laptopDevProxyServer.js",
"start:all": "concurrently --kill-others -n proxy,orders,cancellation \"yarn start:laptopProxyServer\" \"yarn start:ordersPresentationStage\" \"yarn start\"",
"start:production": "yarn run build:production && cross-env ASSET_PATH=/cancellationspres/assets/ NODE_ENV=production node .",
"build-stats:development": "yarn start -- --analyze",
"build-stats:production": "yarn build -- --analyze",
"generate:component": "helix generate:component",
"clean": "rimraf ./build",
"std-version": "standard-version"
},
The error that I am getting is -
'micro_cancellations_path' is not recognized as an internal or external command, operable program or batch file.
I assume the start:ordersPresentationStage part of scripts is unable to execute because the line cannot be processed in windows system, but I am not able to find an alternative statement for the same. Please help!

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.

Port doesn't recognized while running multiple app of react on windows

I have multiple react apps example one parent app and in the parent app I have two more apps which are running on different port parent app is running on 3000 port and first child is running on 3005 and second child is running on 4000 port. I did some configurations in the package.json file in scripts section given below
parent app has
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"odmit": "npm start odmit_view",
"moderator": "npm start --prefix moderator",
"monitor": "npm start --prefix monitor",
"dev": "concurrently \"npm run odmit\" \"npm run moderator\" \"npm run monitor\""
},
first child have package.json is
"scripts": {
"start": "PORT=4000 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Second child have package.json
"scripts": {
"start": "PORT=3005 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
This will fine when I'm running this on ubuntu with command npm run dev. When I run same command in windows then it will give me the bellow error that this port is not recognized.
'PORT' is not recognized as an internal or external command,
[2] operable program or batch file.
[2] npm ERR! code ELIFECYCLE
[2] npm ERR! errno 1
[2] npm ERR! monitor#0.1.0 start: `PORT=4000 react-scripts start`
[2] npm ERR! Exit status 1
[2] npm ERR!
[2] npm ERR! Failed at the monitor#0.1.0 start script.
[2] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[1]
[1] > moderator#0.1.0 start D:\odmit_view\moderator
What is the issue in this can anyone please help me.
On Windows you need to set up the environment variable first:
"scripts": {
"start": "set PORT=4000 && react-scripts start"
}
Alternatively, you can also use cross-env to work on different environments (Windows and Ubuntu) like so:
"scripts": {
"start": "cross-env PORT=4000 react-scripts start"
}

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

call npm script in package.json through bamboo build to trigger build

I have my package.json as below. I would like to trigger a bamboo build through npm scripts which should trigger npm install and then it should trigger npm run bamboo.
I am trying to make the build fail if my testcases fail.kindly help in how to configure in bamboo to achieve the same
"scripts": {
"dev": "webpack",
"prod": "webpack -p",
"start": "webpack-dev-server --open",
"build": "npm run clean-dist && npm run dev && npm run start",
"pbuild": "npm run clean-dist && npm run prod && npm run start",
"clean-dist": "rimraf ./dist && mkdir dist",
"lint": "esw webpack.config.js app",
"lint:watch": "npm run lint -- --watch",
"test": "karma start --reporters html",
"pro": "protractor protractor.config.js",
"bamboo": "npm run clean-dist && npm run dev && npm run test"
}
In bamboo plan configuration:
1. Add new task
2. Select 'npm' type
3. Select Node.js executable - version of your nodeJs, installed on the server
4. Command: run test
This will run your 'test' script from package json

Resources