We Keep Coding

node packge.json scripts - add command to existing script

I'd like to add a command to the "start" script so when I do npm start, first thing that will run is npm install.
My package.json looks as follows:
.
.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "DEBUG=my-app node src/index.js",
"dev": "nodemon src/index.js"
},
.
.
.
I thought about adding npm install inside the start script:
"start": "npm install DEBUG=my-app node src/index.js",
But this doesn't work so I'd like to get a suggestion, wether if it's even possible..

I think you only use the && conector. like:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "npm install && DEBUG=my-app node src/index.js",
"dev": "nodemon src/index.js"
}

Andy yes, my app should be deployed once with a single command.
This is a quite a heavy/slow start, installing all modules before starting the app.
That means if I change the code somewhwere in my node server, stop the process and run it again, a full install is gonna happen. I realize that you have a dev script with nodemon, but still.
Another case: If your app crashes on the live server and you need to start it up again then a full install will happen. What happens if a module has gone up a patch or a minor version. That means you will start up a project with different dependencies.
If you're doing this in the ci/cd then a pipeline is usually split up:
Install - npm ci
Build/compile - for example if you have typescript (not in your case)
Run all tests
Remove the devDependencies with npm prune
Start up the process
What you would maybe do is have a script called "pipeline" or something, and then call that.
"pipeline": npm ci && npm run build && npm test && npm prune && npm start
This script would then be called in your pipeline code.

Fastify reload browser

In Fastify framework is there anyway to reflesh the browser when changes happen on save.
In Express we have npm livereload as a middleware to listen to backend changes in Express. Are there any similar functions in Fastify or do I have to write my own registered plugin to automatically reflesh the browser on backend changes?

The livereload package that you mentioned is a general-purpose tool that works with Fastify as well. I was able to make it run with the following packages:
typescript Running tsc -w -outdir dist/ to watch the .ts files and transpile them into .js files
nodemon Running nodemon -r dotenv/config dist/server.js to watch the .js files and restart the web server
livereload Running livereload ./dist/ -w 500 so that the browser refreshes once the server restarted
concurrently To tie it all together in the package.json
"scripts": {
"build": "tsc",
"start": "node -r dotenv/config dist/server.js",
"dev:tsc": "tsc -w -outdir dist/",
"dev:watch": "nodemon -r dotenv/config dist/server.js",
"dev:livereload": "livereload ./dist/ -w 500",
"dev": "concurrently -k -p \"[{name}]\" -n \"TypeScript,App,LiveReload\" -c \"yellow.bold,cyan.bold,green.bold\" \"yarn dev:tsc\" \"yarn dev:watch\" \"yarn dev:livereload\" "
},
Note that you need to include the following <script> tag in your .html files to make livereload work
<script>
document.write(
'<script src="http://' +
(location.host || "localhost").split(":")[0] +
':35729/livereload.js?snipver=1"></' +
"script>"
);
</script>
This was enough to make my small Fastify project run, your milage may vary.

Yes, there is the fastify-cli module for that:
https://github.com/fastify/fastify-cli
it has the --watch option that you can use to live reload your backend on file changes.
In your package.json add this script:
"dev": "fastify start -l info --watch --pretty-logs app.js",
Note that app.js must expose this interface:
module.exports = function (fastify, ops, next) {
next()
}

How can I run multiple NPM commands with a single NPM Command on Windows

I am setting a package.json file that will start Nodemon, run my watch css command and run browser sync all with the "npm start" command.
This works on my Mac computer at work but does not work on my Windows computer at home.
On my Mac, it will listen for any changes to server and SCSS files and also run browser sync.
On Windows it only runs Nodemon and just waits for any server changes. It looks like it ignores my other two commands.
Do I need to do something different for Windows? Ideally I would like the code to work universally on both platforms.
Nodemon seems to be the problem here because watch-css css and browsersync work but anything after nodemon does not work.
"scripts": {
"build-css": "node-sass --output-style compressed --source-map true -o public/css scss",
"watch-css": "nodemon -e scss -x \"npm run build-css\"",
"build-js": "browserify js/app.js -o public/js/app.js",
"browser-sync": "browser-sync start --port 4000 --proxy 'localhost:3000' --files 'views/*' 'public/**/*' --no-notify",
"start": "nodemon ./bin/www & npm run watch-css & npm run browser-sync"
},

Here's what I use: npm-run-all(this is cross-platform). They allow you to run your processes/commands parallelly and sequentially (-p or -s).
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/ --importer=node_modules/node-sass-tilde-importer",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
// ... and much more
}
This is working fine for me in both windows and mac. Try it, hope this is helpful.

How to Build NextJS Project on Local without Now

I need to build My React NextJS Project on local to host it at Appache server, when I run command run build it did not generate build folder.
I R & D on it, everyone recommend ZEIT – Next.js build with Now but it build project on cloud but I need a build for my local appache server. So please help me out.
Here is an my of package.json:
......
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start"
},
......

After so many struggle, I found answer of my question I have to add following line in my package.json under scripts:
"scripts": {
......
"export": "npm run build && next export"
.....
},
Basically I my case, npm run build && next export was complete required command to build NextJS project. So after adding this into package.json you just need to run in terminal:
npm export
and it will generate complete build for nextjs project.

You have a package.json script called build that runs next build. The next build command by default builds the app for development, which doesn't create a production bundle.
In order to create the production bundle on your local machine, you need to specify that you're on production environment through NODE_ENV=production (this is done automatically in now and other deployment servers). Basically, your package.json would end up:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start",
"prod:build": "NODE_ENV=production npm run build"
},
You can replace npm run build with next build directly if you prefer that.

Running json-server and protractor test on both Windows and Linux

I would like to run json-server and then a protractor test on both Windows and Linux. For now, I have two configurations, one for Linux and one for Windows. Relevant part from packages.json:
"scripts": {
"start": "json-server --watch testdb.json --static ./src",
"e2e-win": "npm run protractor",
"e2e-linux": "npm run protractor",
"pree2e-win": "start /b npm start",
"pree2e-linux": "npm start &",
...
}
The json-server is started as a background process and then the protractor executes. Is there any way how to do this in an OS agnostic way? I simply want one target e2e.

I'd the package say concurrently is a good match for your example, this way in the package.json you can simply do in the scripts section (taken from one tutorial I'm going through):
"ng": "ng",
"serve": "ng serve --proxy-conf proxy.conf.json",
"api": "json-server --watch api/data.json --routes api/routes.json",
"start_custom": "concurrently \"npm run api \" \"npm run serve\""
Finally just run on the command line npm run start_custom