"scripts": {
"server": " npm run watch --prefix server",
"client":" npm run start --prefix client",
"watch":" npm run client & npm run server",
"test": "echo \"Error: no test specified\" && exit 1"
},
npm run watch only runs the first command (npm run client) before & operator.
install this package:https://www.npmjs.com/package/npm-run-all and then "start": "npm-run-all -p watch-css start-js", where watch-css and start-js are npm scripts in my case
"scripts": {
"start": "node server.js",
"build": "webpack"
},
how to run npm run build first and then npm start in a single command?
"scripts": {
"start": "node server.js",
"build": "webpack",
"start-dev" : "npm run build && npm run start"
},
I tried the command npm run start-dev. But only webpack is being compiled. The server isn't running.
I don't know why that doesn't work, but, anyway, you can try this:
"scripts": {
"start": "node server.js",
"build": "webpack",
"start-dev" : "webpack && node server.js"
}
npm i npm-run-all
this package never run into issue. You can add as many as commands
"dev:start": "npm-run-all build start",
locally, i start my app using the following commands:
cd react-web
sudo npm run postinstall
export REACT_APP_CUSTOMER_ENVIRONMENT=envvariable
npm start
So, now i want to push this live through heroku. BUT, i need to set the start scripts in my package.json
so i have two package.json, one in the root directory, and one in react-web.
in the root directory, i wrote this start-script:
"scripts": {
"test-web": "cd react-web && npm test && cd ..",
"test": "npm run test-web",
"start": "cd react-web && export REACT_APP_CUSTOMER_ENVIRONMENT=gianlucaherokutest && npm start"
},
and in the react-web package.json, this:
"scripts": {
"start": "node checkEnvironmentForBuild && react-app-rewired start",
"build": "node checkEnvironmentForBuild && react-app-rewired build",
"deploy": "aws s3 sync build/ s3://YOUR_S3_DEPLOY_BUCKET_NAME --delete",
"postdeploy": "aws cloudfront create-invalidation --distribution-id YOUR_CF_DISTRIBUTION_ID --paths '/*' && aws cloudfront create-invalidation --distribution-id YOUR_WWW_CF_DISTRIBUTION_ID --paths '/*'",
"postinstall": "npm link ../shared",
"test": "node checkEnvironmentForBuild && react-app-rewired test",
"eject": "react-scripts eject"
},
can someone give me some advice on why it isn't working? When I run the app using everything above, it gives me this error:
2021-04-19T21:12:11.796818+00:00 app[web.1]: FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory
any ideas?
I use the following project which use webpack
https://github.com/Hashnode/mern-starter
I want to deploy it (to prod) i get error
Error: Cannot find module './dist/manifest.json'
This error is coming from https://github.com/Hashnode/mern-starter/blob/master/index.js
But I dont see the dist folder in the project, why, and how should I build it?
I believe that the Dist folder should be created during the build time (manification etc) so how should I trigger it ?
This is the package.json
{
"name": "mern-starter",
"version": "2.0.0",
"description": "Boilerplate project for building Isomorphic apps using React and Redux",
"scripts": {
"test": "cross-env NODE_ENV=test PORT=8080 MONGO_URL=mongodb://localhost:27017/mern-test node_modules/.bin/nyc node --harmony-proxies node_modules/.bin/ava",
"watch:test": "npm run test -- --watch",
"cover": "nyc npm run test",
"check-coverage": "nyc check-coverage --statements 100 --branches 100 --functions 100 --lines 100",
"start": "cross-env BABEL_DISABLE_CACHE=1 NODE_ENV=development nodemon index.js",
"start:prod": "cross-env NODE_ENV=production node index.js",
"bs": "npm run clean && npm run build && npm run build:server && npm run start:prod",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
"build:server": "cross-env NODE_ENV=production webpack --config webpack.config.server.js",
"clean": "rimraf dist",
"slate": "rimraf node_modules && npm install",
"lint": "eslint client server"
},
I think that the start:prod should trigger it in the webpack but
its not happing ...any idea ?
As per the comments and the documentation:
Building the dist folder is done either via npm run bs or npm run build && npm run build:server (which is what npm run bs executes).
Starting the production build should be done via npm run start:prod (or by copying the commands from the package.json file: cross-env NODE_ENV=production node index.js)
I've started to rely on NPM scripts as my main tool for my testing process.
As I've written more NPM scripts the order and structure are increasingly hard to read at a glance.
Here is what my current scripts looks like:
{
"scripts": {
"clean": "rm -rf report/*",
"report": "rm -rf report/; mkdir report",
"tests:mocha": "mocha test/spec/",
"all-tests:mocha": "npm run tests:mocha -- --recursive",
"all-tests:json": "npm run all-tests:mocha -- --reporter json",
"all-tests:jsonReport": "npm run all-tests:json > report/all-tests.json",
"all-admin:mocha": "mocha test/spec/admin.production.io/",
"all-admin-all:mocha": "npm run all-admin:mocha -- --recursive",
"all-admin:json": "npm run all-admin:mocha -- --reporter json",
"all-admin:jsonReport": "npm run all-admin:json > report/all-tests.json",
"google:mocha": "mocha test/spec/googleTest.js",
"google:spec": "npm run google:mocha -- --reporter spec --slow 0",
"google:json": "npm run google:mocha -- --reporter json",
"google:jsonReport": "npm run google:json > report/google-test.json",
"usersAll:mocha": "mocha test/spec/admin.production.io/dashboard/users/*.js",
"usersAll:spec": "npm run usersAll:mocha -- --reporter spec --slow 0",
"usersAll:json": "npm run usersAll:mocha -- --reporter json",
"usersAll:jsonReport": "npm run usersAll:jsonReport > report/admin-users-dashboard-all.json",
"orgsAll:mocha": "mocha test/spec/admin.production.io/dashboard/organizations/*.js",
"orgsAll:spec": "npm run orgsAll:mocha -- --reporter spec --slow 0",
"orgsAll:json": "npm run orgsAll:mocha -- --reporter json",
"orgsAll:jsonReport": "npm run orgsAll:json > report/admin-orgs-dashboard-all.json",
"users-orgs:mocha": "npm run users:spec; npm run orgs:spec",
"users-orgs-report": "npm run users:jsonReport; npm run orgs:jsonReport",
"pos-users:mocha": "mocha test/spec/admin.production.io/dashboard/users/positiveUserTest.js",
"pos-users:spec": "npm run pos-users:mocha -- --reporter spec --slow 0",
"pos-users:json": "npm run pos-users:mocha -- --reporter json",
"pos-users:jsonReport": "npm run pos-users:json > report/admin-users-dashboard-positive.json",
"pos-orgs:mocha": "mocha test/spec/admin.production.io/dashboard/organizations/positiveOrgsTests.js",
"pos-orgs:spec": "npm run pos-orgs:mocha -- --reporter spec --slow 0",
"pos-orgs:json": "npm run pos-orgs:mocha -- --reporter json",
"pos-orgs:jsonReport": "npm run pos-orgs:json > report/admin-users-dashboard-positive.json",
"alice-la:mocha": "mocha test/spec/admin.local.us/dashboard/alice/*.js",
"alice-la:jsonReport": "npm run alice-la:mocha -- --reporter json -- > report/local-admin-dashboard-alice-all-tests.json",
"a2361p-l:mocha": "mocha test/spec/admin.local.us/dashboard/alice/2361-p.js",
"a2361p-l:spec": "npm run a2361p-l:mocha -- --reporter spec --slow 0",
"a2361p-l:json": "npm run a2361p-l:mocha -- --reporter json",
"a2361p-l:jsonReport": "npm run a2361p-l:json > report/a2361p-l.json",
"a2361pf-l:mocha": "mocha test/spec/admin.local.us/dashboard/alice/2361-pf.js",
"a2361pf-l:spec": "npm run a2361pf-l:mocha -- --reporter spec --slow 0",
"a2361pf-l:json": "npm run a2361pf-l:mocha -- --reporter json",
"a2361pf-l:jsonReport": "npm run a2361pf-l:json > report/a2361pf-l.json",
"alice-pa:mocha": "mocha test/spec/admin.production.io/dashboard/alice/*.js",
"alice-pa:jsonReport": "npm run alice-pa:mocha -- --reporter json -- > report/production-admin-dashboard-alice-all-tests.json",
"a2361p-p:mocha": "mocha test/spec/admin.production.io/dashboard/alice/2361-p.js",
"a2361p-p:spec": "npm run a2361p-p:mocha -- --reporter spec --slow 0",
"a2361p-p:json": "npm run a2361p-p:mocha -- --reporter json",
"a2361p-p:jsonReport": "npm run a2361p-p:json > report/a2361p-p.json",
"a2361pf-p:mocha": "mocha test/spec/admin.production.io/dashboard/alice/2361-pf.js",
"a2361pf-p:spec": "npm run a2361pf-p:mocha -- --reporter spec --slow 0",
"a2361pf-p:json": "npm run a2361pf-p:mocha -- --reporter json",
"a2361pf-p:jsonReport": "npm run a2361pf-p:json > report/a2361pf-p.json",
"a2361:all": "npm run clean; npm run a2361p-l:mocha; npm run a2361p-l:spec; npm run a2361p-l:json; npm run a2361p-l:jsonReport; npm run a2361pf-l:mocha; npm run a2361pf-l:spec; npm run a2361pf-l:json; npm run a2361pf-l:jsonReport; npm run a2361p-p:mocha; npm run a2361p-p:spec; npm run a2361p-p:json; npm run a2361p-p:jsonReport; npm run a2361pf-p:mocha; npm run a2361pf-p:spec; npm run a2361pf-p:json; npm run a2361pf-p:jsonReport",
"test": "mocha"
}
This is only for around 8 tests or so. I plan on writing scripts to output reports to junit formats and it's already starting to look like an eye strain.
How can I structure my npm scripts to be more readable?
edit: selecting this as the best answer for now until another solution is posted.
As a cheap trick I made empty test scripts to act as a header then simply indent the proper scripts under it. Not a fully sufficient method but it is better than no indention at all.
Warning: Running the empty scripts will cause errors.
{
"utils": "",
"clean": "rm -rf report/*; rm -rf *.xml",
"report": "rm -rf report/; mkdir report",
"all-tests": "",
"tests:mocha": "mocha test/spec/",
"at:mocha": "npm run tests:mocha -- --recursive",
"at:junit": "npm run at:mocha -- --reporter mocha-junit-reporter",
"at:jReport": "MOCHA_FILE=./report/all-tests.xml npm run at:junit",
"all-prod-admin-tests": "",
"prod-tests:mocha": "mocha test/spec/admin.production.io/",
"apa:mocha": "npm run -prod-tests:mocha -- --recursive",
"apa:junit": "npm run apa:mocha -- --reporter mocha-junit-reporter",
"apa:jReport": "MOCHA_FILE=./report/all-prod-admin-tests.xml npm run apa:junit",
"all-local-admin-tests": "",
"local-tests:mocha": "mocha test/spec/admin.pclocal.us/",
"ala:mocha": "npm run -prod-tests:mocha -- --recursive",
"ala:junit": "npm run ala:mocha -- --reporter mocha-junit-reporter",
"ala:jReport": "MOCHA_FILE=./report/all-local-admin-tests.xml npm run ala:junit",
"google-example": "",
"google:mocha": "mocha test/spec/googleTest.js",
"google:spec": "npm run google:mocha -- --reporter spec --slow 0",
"google:junit": "npm run google:mocha -- --reporter mocha-junit-reporter",
"google:jReport": "MOCHA_FILE=./report/google.xml npm run google:junit",
"alice-local-admin-dashboard-tests": "",
"alda:mocha": "mocha test/spec/admin.pclocal.us/dashboard/alice/*.js",
"alda:junit": "npm run alda:mocha -- --reporter mocha-junit-reporter",
"alda:jReport": "MOCHA_FILE=./report/alice-local-admin-dashboard-tests-all.xml npm run alda:junit",
"2361-automated-test": "",
"local-admin-pass": "",
"a2361p-l:mocha": "mocha test/spec/admin.pclocal.us/dashboard/alice/2361-p.js",
"a2361p-l:spec": "npm run a2361p-l:mocha -- --reporter spec --slow 0",
"a2361p-l:junit": "npm run a2361p-l:mocha -- --reporter mocha-junit-reporter",
"a2361p-l:jReport": "MOCHA_FILE=./report/2361-local-pass.xml npm run a2361p-l:junit",
"local-admin-pass-fail": "",
"a2361pf-l:mocha": "mocha test/spec/admin.pclocal.us/dashboard/alice/2361-pf.js",
"a2361pf-l:spec": "npm run a2361pf-l:mocha -- --reporter spec --slow 0",
"a2361pf-l:junit": "npm run a2361pf-l:mocha -- --reporter mocha-junit-reporter",
"a2361pf-l:jReport": "MOCHA_FILE=./report/2361-local-pass-fail.xml npm run a2361pf-l:junit",
"alice-production-admin-dashboard-tests": "",
"apda:mocha": "mocha test/spec/admin.production.io/dashboard/alice/*.js",
"apda:junit": "npm run apda:mocha -- --reporter mocha-junit-reporter",
"apda:jReport": "MOCHA_FILE=./report/alice-production-admin-dashboard-tests-all.xml npm run apda:junit",
"2361-automated-test": "",
"prod-admin-pass": "",
"a2361p-p:mocha": "mocha test/spec/admin.production.io/dashboard/alice/2361-p.js",
"a2361p-p:spec": "npm run a2361p-p:mocha -- --reporter spec --slow 0",
"a2361p-p:junit": "npm run a2361p-p:mocha -- --reporter mocha-junit-reporter",
"a2361p-p:jReport": "MOCHA_FILE=./report/2361-prod-pass.xml npm run a2361p-p:junit",
"prod-admin-pass-fail": "",
"a2361pf-p:mocha": "mocha test/spec/admin.production.io/dashboard/alice/2361-pf.js",
"a2361pf-p:spec": "npm run a2361pf-p:mocha -- --reporter spec --slow 0",
"a2361pf-p:junit": "npm run a2361pf-p:mocha -- --reporter mocha-junit-reporter",
"a2361pf-p:jReport": "MOCHA_FILE=./report/2361-prod-pass-fail.xml npm run a2361pf-p:junit",
"test": "mocha"
}
To clean up your file paths for mocha tests, you might consider moving them to opts files.
So
"alda:mocha": "mocha test/spec/admin.pclocal.us/dashboard/alice/*.js",
could become
"alda:mocha": "mocha --opts mocha_opts/alda
where theopts file named alda contains:
test/spec/admin.pclocal.us/dashboard/alice/*.js
--recursive
Of course, mocha_opts and opts filenames would be whatever you want.
Also, -R is shorthand for --reporter, if that helps
opts files can be overridden by command line arguments so you could get some reuse out of them.
I use Babel a bunch and have my db, client and api server in the same project for now. Things got a little out of hand. Along with some shell/node scripts opts helped me out.
"scripts": {
"test": "npm run client:test && npm run api:test",
"knex": "babel-node node_modules/.bin/knex --cwd db",
"api:test": "mocha --opts api/__dev__/mocha.unit",
"api:cover": "api/__dev__/api-cover.sh",
"api:tdd": "npm run -s db:cycle && npm run -s api:test -- -w -R min",
"api:start": "babel-node api/server",
"api:watch": "nodemon --exec npm run -s api:start",
"client:test": "mocha --opts client/__dev__/mocha.unit",
"client:tdd": "npm run -s client:test -- -w -R min",
"client:cover": "client/__dev__/client-cover.sh",
"client:build": "babel-node scripts/client-build.js",
"client:watch": "npm run -s client:build -- --watch",
"db:make": "npm run knex migrate:make",
"db:latest": "npm run -s knex migrate:latest",
"db:rollback": "npm run -s knex migrate:rollback",
"db:cycle": "npm run -s db:rollback && npm run -s db:latest"
}
Let's acknowledge that json files are not a good place to store build tasks (no comments, no variables), and package.json is already particularly cluttered.
gulp-shelter could be a good way to rationalize your build scripts, if learning bash and make isn't an option for you, your team and external contributors. It allows you to store your build tasks in a JS file and combines all advantages from NPM scripts and gulpfiles: conciseness readability and reusability.
Here's how it would simplify your tasks:
const gulp = require('gulp');
const shelter = require('gulp-shelter')(gulp);
const testDir = 'test/spec/';
const clean = `rm -rf report/*`;
const report = `${clean}; mkdir report`;
const testsMocha = `mocha ${testDir}`;
const allTestsMocha = `${testsMocha} --recursive`;
const allTestsJson = `${allTestsMocha} --reporter json`;
const allTestsJsonReport = `${allTestsJson} > report/all-tests`;
...
shelter({
'clean': clean,
'report': report,
'all-tests:mocha': allTestsMocha,
'all-tests:json': allTestsJson,
'all-tests:jsonReport': allTestsJsonReport,
...
});