Fastify reload browser - javascript

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()
}

Related

Nodejs: How to prepare code for production environment

I'm a beginner developing with Nodejs and React.
Right now, I've got a first version of my web application which works correctly in development environment, but I'm trying to build a version for production environment but I've got this error
ReferenceError: document is not defined
The scripts of my package.json are:
"scripts": {
"dev-webpack": "webpack-dev-server --hot --mode development",
"clean": "rm -rf ./dist",
"dev": "npm run build-dev && cross-env NODE_ENV=development nodemon --exec babel-node src/server/server.js --ignore ./src/client",
"build-dev": "npm run clean && npm run compile-dev",
"compile-dev": "NODE_ENV=development webpack -d --config ./webpack.config.babel.js --progress",
"compile": "NODE_ENV=production webpack -p --config ./webpack.config.babel.js --progress",
"build": "npm run clean && npm run compile",
"start": "npm run build && node ./dist/assets/js/bundle.js"
},
And I try to create the version for production environment with the command npm run start
I have been looking for information about the problem and it seems it's due because I have no Browserify my web application. But, I don't know how to do this correctly nor the steps to follow to do it correctly.
I am seeking a list of the steps required to build a correct version for production environment.
Edit I:
These are the static files generated with "build" script:
The React application is designed to be run in a browser.
When you run dev-webpack you are running an HTTP server and pointing a browser at it.
When you run build you are creating a static JavaScript file. You need to deploy it to a web server (along with the associated HTML document) and then point a browser at the HTML document.
You are currently trying to execute bundle.js with Node and not a browser.
You need to serve your index.html file. You can use serve to host the HTML file.

Using nodemon and --inspect with serverless

I am writing a lambda service and hate having to stop and start the server after every change.
I do have this running together with chrome --inspect working correctly:
"start": "node --inspect-brk $(which serverless) invoke local -f getGoldenDeomondotcom"
I then used:
"start": "nodemon --exec \"node --inspect-brk $(which serverless) invoke local -f getGoldenDeomondotcom\""
to allow me to use nodemon with --inspect, however the messages don't pipe through to chrome.
Any ideas how I could use them together?
Make sure you use js or replace js in the code below with your language ext e.g py,ts
in your package.json
"scripts": {
"start:dev": "nodemon -e js --exec \"sls offline\""
},
From github ... (https://github.com/akupila)
nodemon --exec "serverless serve start"
I'm using this in package.json during dev:
"scripts": {
"start": "nodemon --exec \"serverless serve start\""
}
This allows me to just run npm start. Whenever any file in the project changes nodemon will restart serve.
I'm using serverless-offline and serverless-dynamodb-local, I just added
"start": "nodemon --exec \"sls offline start\"" to scripts

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 can I run multiple npm scripts in parallel?

In my package.json I have these two scripts:
"scripts": {
"start-watch": "nodemon run-babel index.js",
"wp-server": "webpack-dev-server",
}
I have to run these 2 scripts in parallel everytime I start developing in Node.js. The first thing I thought of was adding a third script like this:
"dev": "npm run start-watch && npm run wp-server"
... but that will wait for start-watch to finish before running wp-server.
How can I run these in parallel? Please keep in mind that I need to see the output of these commands. Also, if your solution involves a build tool, I'd rather use gulp instead of grunt because I already use it in another project.
Use a package called concurrently.
npm i concurrently --save-dev
Then setup your npm run dev task as so:
"dev": "concurrently --kill-others \"npm run start-watch\" \"npm run wp-server\""
If you're using an UNIX-like environment, just use & as the separator:
"dev": "npm run start-watch & npm run wp-server"
Otherwise if you're interested on a cross-platform solution, you could use npm-run-all module:
"dev": "npm-run-all --parallel start-watch wp-server"
From windows cmd you can use start:
"dev": "start npm run start-watch && start npm run wp-server"
Every command launched this way starts in its own window.
You should use npm-run-all (or concurrently, parallelshell), because it has more control over starting and killing commands. The operators &, | are bad ideas because you'll need to manually stop it after all tests are finished.
This is an example for protractor testing through npm:
scripts: {
"webdriver-start": "./node_modules/protractor/bin/webdriver-manager update && ./node_modules/protractor/bin/webdriver-manager start",
"protractor": "./node_modules/protractor/bin/protractor ./tests/protractor.conf.js",
"http-server": "./node_modules/http-server/bin/http-server -a localhost -p 8000",
"test": "npm-run-all -p -r webdriver-start http-server protractor"
}
-p = Run commands in parallel.
-r = Kill all commands when one of them finishes with an exit code of zero.
Running npm run test will start Selenium driver, start http server (to serve you files) and run protractor tests. Once all tests are finished, it will close the http server and the selenium driver.
I've checked almost all solutions from above and only with npm-run-all I was able to solve all problems. Main advantage over all other solution is an ability to run script with arguments.
{
"test:static-server": "cross-env NODE_ENV=test node server/testsServer.js",
"test:jest": "cross-env NODE_ENV=test jest",
"test": "run-p test:static-server \"test:jest -- {*}\" --",
"test:coverage": "npm run test -- --coverage",
"test:watch": "npm run test -- --watchAll",
}
Note run-p is shortcut for npm-run-all --parallel
This allows me to run command with arguments like npm run test:watch -- Something.
EDIT:
There is one more useful option for npm-run-all:
-r, --race - - - - - - - Set the flag to kill all tasks when a task
finished with zero. This option is valid only
with 'parallel' option.
Add -r to your npm-run-all script to kill all processes when one finished with code 0. This is especially useful when you run a HTTP server and another script that use the server.
"test": "run-p -r test:static-server \"test:jest -- {*}\" --",
I have a crossplatform solution without any additional modules. I was looking for something like a try catch block I could use both in the cmd.exe and in the bash.
The solution is command1 || command2 which seems to work in both enviroments same. So the solution for the OP is:
"scripts": {
"start-watch": "nodemon run-babel index.js",
"wp-server": "webpack-dev-server",
// first command is for the cmd.exe, second one is for the bash
"dev": "(start npm run start-watch && start npm run wp-server) || (npm run start-watch & npm run wp-server)",
"start": "npm run dev"
}
Then simple npm start (and npm run dev) will work on all platforms!
If you replace the double ampersand with a single ampersand, the scripts will run concurrently.
How about forking
Another option to run multiple Node scripts is with a single Node script, which can fork many others. Forking is supported natively in Node, so it adds no dependencies and is cross-platform.
Minimal example
This would just run the scripts as-is and assume they're located in the parent script's directory.
// fork-minimal.js - run with: node fork-minimal.js
const childProcess = require('child_process');
let scripts = ['some-script.js', 'some-other-script.js'];
scripts.forEach(script => childProcess.fork(script));
Verbose example
This would run the scripts with arguments and configured by the many available options.
// fork-verbose.js - run with: node fork-verbose.js
const childProcess = require('child_process');
let scripts = [
{
path: 'some-script.js',
args: ['-some_arg', '/some_other_arg'],
options: {cwd: './', env: {NODE_ENV: 'development'}}
},
{
path: 'some-other-script.js',
args: ['-another_arg', '/yet_other_arg'],
options: {cwd: '/some/where/else', env: {NODE_ENV: 'development'}}
}
];
let runningScripts= [];
scripts.forEach(script => {
let runningScript = childProcess.fork(script.path, script.args, script.options);
// Optionally attach event listeners to the script
runningScript.on('close', () => console.log('Time to die...'))
runningScripts.push(runningScript); // Keep a reference to the script for later use
});
Communicating with forked scripts
Forking also has the added benefit that the parent script can receive events from the forked child processes as well as send back. A common example is for the parent script to kill its forked children.
runningScripts.forEach(runningScript => runningScript.kill());
For more available events and methods see the ChildProcess documentation
npm-run-all --parallel task1 task2
edit:
You need to have npm-run-all installed beforehand. Also check this page for other usage scenarios.
Quick Solution
In this case, I'd say the best bet If this script is for a private module intended to run only on *nix-based machines, you can use the control operator for forking processes, which looks like this: &
An example of doing this in a partial package.json file:
{
"name": "npm-scripts-forking-example",
"scripts": {
"bundle": "watchify -vd -p browserify-hmr index.js -o bundle.js",
"serve": "http-server -c 1 -a localhost",
"serve-bundle": "npm run bundle & npm run serve &"
}
You'd then execute them both in parallel via npm run serve-bundle. You can enhance the scripts to output the pids of the forked process to a file like so:
"serve-bundle": "npm run bundle & echo \"$!\" > build/bundle.pid && npm run serve & echo \"$!\" > build/serve.pid && npm run open-browser",
Google something like bash control operator for forking to learn more on how it works. I've also provided some further context regarding leveraging Unix techniques in Node projects below:
Further Context RE: Unix Tools & Node.js
If you're not on Windows, Unix tools/techniques often work well to achieve something with Node scripts because:
Much of Node.js lovingly imitates Unix principles
You're on *nix (incl. OS X) and NPM is using a shell anyway
Modules for system tasks in Nodeland are also often abstractions or approximations of Unix tools, from fs to streams.
step by step guide to run multiple parallel scripts with npm.
install npm-run-all package globally
npm i -g npm-run-all
Now install and save this package within project where your package.json exists
npm i npm-run-all --save-dev
Now modify scripts in package.json file this way
"scripts": {
"server": "live-server index.html",
"watch": "node-sass scss/style.scss --watch",
"all": "npm-run-all --parallel server watch"
},
now run this command
npm run all
more detail about this package in given link
npm-run-all
with installing npm install concurrently
"scripts": {
"start:build": "tsc -w",
"start:run": "nodemon build/index.js",
"start": "concurrently npm:start:*"
},
Use concurrently to run the commands in parallel with a shared output stream. To make it easy to tell which output is from which process, use the shortened command form, such as npm:wp-server. This causes concurrently to prefix each output line with its command name.
In package.json, your scripts section will look like this:
"scripts": {
"start": "concurrently \"npm:start-watch\" \"npm:wp-server\"",
"start-watch": "nodemon run-babel index.js",
"wp-server": "webpack-dev-server"
}
npm install npm-run-all --save-dev
package.json:
"scripts": {
"start-watch": "...",
"wp-server": "...",
"dev": "npm-run-all --parallel start-watch wp-server"
}
More info: https://github.com/mysticatea/npm-run-all/blob/master/docs/npm-run-all.md
Just add this npm script to the package.json file in the root folder.
{
...
"scripts": {
...
"start": "react-scripts start", // or whatever else depends on your project
"dev": "(cd server && npm run start) & (cd ../client && npm run start)"
}
}
... but that will wait for start-watch to finish before running wp-server.
For that to work, you will have to use start on your command. Others have already illustrated but this is how it will work, your code below:
"dev": "npm run start-watch && npm run wp-server"
Should be :
"dev": " start npm run start-watch && start npm run wp-server"
What this will do is, it will open a separate instance for each command and process them concurrently, which shouldn't be an issue as far as your initial issue is concerned. Why do I say so? It's because these instances both open automatically while you run only 1 statement, which is your initial goal.
I ran into problems with & and |, which exit statuses and error throwing, respectively.
Other solutions want to run any task with a given name, like npm-run-all, which wasn't my use case.
So I created npm-run-parallel that runs npm scripts asynchronously and reports back when they're done.
So, for your scripts, it'd be:
npm-run-parallel wp-server start-watch
My solution is similar to Piittis', though I had some problems using Windows. So I had to validate for win32.
const { spawn } = require("child_process");
function logData(data) {
console.info(`stdout: ${data}`);
}
function runProcess(target) {
let command = "npm";
if (process.platform === "win32") {
command = "npm.cmd"; // I shit you not
}
const myProcess = spawn(command, ["run", target]); // npm run server
myProcess.stdout.on("data", logData);
myProcess.stderr.on("data", logData);
}
(() => {
runProcess("server"); // package json script
runProcess("client");
})();
In a package.json in the parent folder:
"dev": "(cd api && start npm run start) & (cd ../client && start npm run start)"
this work in windows
This worked for me
{
"start-express": "tsc && nodemon dist/server/server.js",
"start-react": "react-scripts start",
"start-both": "npm -p -r run start-react && -p -r npm run start-express"
}
Both client and server are written in typescript.
The React app is created with create-react-app with the typescript template and is in the default src directory.
Express is in the server directory and the entry file is server.js
typescript code and transpiled into js and is put in the dist directory .
checkout my project for more info: https://github.com/nickjohngray/staticbackeditor
UPDATE:
calling npm run dev, to start things off
{"server": "tsc-watch --onSuccess \"node ./dist/server/index.js\"",
"start-server-dev": "npm run build-server-dev && node src/server/index.js",
"client": "webpack-dev-server --mode development --devtool inline-source-map --hot",
"dev": "concurrently \"npm run build-server-dev\" \"npm run server\" \"npm run client\""}
You can also use pre and post as prefixes on your specific script.
"scripts": {
"predev": "nodemon run-babel index.js &",
"dev": "webpack-dev-server"
}
And then run:
npm run dev
In my case I have two projects, one was UI and the other was API, and both have their own script in their respective package.json files.
So, here is what I did.
npm run --prefix react start& npm run --prefix express start&
Simple node script to get you going without too much hassle. Using readline to combine outputs so the lines don't get mangled.
const { spawn } = require('child_process');
const readline = require('readline');
[
spawn('npm', ['run', 'start-watch']),
spawn('npm', ['run', 'wp-server'])
].forEach(child => {
readline.createInterface({
input: child.stdout
}).on('line', console.log);
readline.createInterface({
input: child.stderr,
}).on('line', console.log);
});
I have been using npm-run-all for some time, but I never got along with it, because the output of the command in watch mode doesn't work well together. For example, if I start create-react-app and jest in watch mode, I will only be able to see the output from the last command I ran. So most of the time, I was running all my commands manually...
This is why, I implement my own lib, run-screen. It still very young project (from yesterday :p ) but it might be worth to look at it, in your case it would be:
run-screen "npm run start-watch" "npm run wp-server"
Then you press the numeric key 1 to see the output of wp-server and press 0 to see the output of start-watch.
A simple and native way for Windows CMD
"start /b npm run bg-task1 && start /b npm run bg-task2 && npm run main-task"
(start /b means start in the background)
I think the best way is to use npm-run-all as below:
1- npm install -g npm-run-all <--- will be installed globally
2- npm-run-all --parallel server client
How about a good old fashioned Makefile?
This allows you a lot of control including how you manage subshells, dependencies between scripts etc.
# run both scripts
start: server client
# start server and use & to background it
server:
npm run serve &
# start the client
client:
npm start
call this Makefile and then you can just type
make start to start everything up. Because the server command is actually running in a child process of the start command when you ctrl-C the server command will also stop - unlike if you just backgrounded it yourself at the shell.
Make also gives you command line completion, at least on the shell i'm using. Bonus - the first command will always run so you can actually just type make on it's own here.
I always throw a makefile into my projects, just so I can quickly scan later all the common commands and parameters for each project as I flip between them.
Using just shell scripting, on Linux.
"scripts": {
"cmd": "{ trap 'trap \" \" TERM; kill 0; wait' INT TERM; } && blocking1 & blocking2 & wait"
}
npm run cmd
and then
^C will kill children and wait for clean exit.
As you may need to add more and more to this scripts it will become messy and harder to use. What if you need some conditions to check, variables to use? So I suggest you to look at google/zx that allows to use js to create scripts.
Simple usage:
install zx: npm i -g zx
add package.json commands (optional, you can move everything to scripts):
"scripts": {
"dev": "zx ./scripts/dev.mjs", // run script
"build:dev": "tsc -w", // compile in watch mode
"build": "tsc", // compile
"start": "node dist/index.js", // run
"start:dev": "nodemon dist/index.js", // run in watch mode
},
create dev.mjs script file:
#!/usr/bin/env zx
await $`yarn build`; // prebuild if dist is empty
await Promise.all([$`yarn start:dev`, $`yarn build:dev`]); // run in parallel
Now every time you want to start a dev server you just run yarn dev or npm run dev.
It will first compile ts->js and then run typescrpt compiler and server in watch mode in parallel. When you change your ts file->it's will be recompiled by tsc->nodemon will restart the server.
Advanced programmatic usage
Load env variables, compile ts in watch mode and rerun server from dist on changes (dev.mjs):
#!/usr/bin/env zx
import nodemon from "nodemon";
import dotenv from "dotenv";
import path from "path";
import { fileURLToPath } from "url";
// load env variables
loadEnvVariables("../env/.env");
await Promise.all([
// compile in watch mode (will recompile on changes in .ts files)
$`tsc -w`,
// wait for tsc to compile for first time and rerun server on any changes (tsc emited .js files)
sleep(4000).then(() =>
nodemon({
script: "dist/index.js",
})
),
]);
function sleep(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
function getDirname() {
return path.dirname(fileURLToPath(import.meta.url));
}
function loadEnvVariables(relativePath) {
const { error, parsed } = dotenv.config({
path: path.join(getDirname(), relativePath),
});
if (error) {
throw error;
}
return parsed;
}

How to use nodemon with .env files?

I am using an .env file to hold environment variables for the server. This works if I run the server with foreman start. But it doesn't work with nodemon.
I would like to use nodemon instead because it restarts automatically when you modify the server. How can I get nodemon to work with .env files?
Install dotenv npm i dotenv
Create .env file and your variables inside
Add the script to execute
"dev": "nodemon -r dotenv/config ./app/index.js " or
"start": "node -r dotenv/config ./app/index.js "
Run the app using npm run dev or npm run start
I have a production Procfile with:
web: node web.js
So I have created a Procfile_dev file with:
web: nodemon web.js
And when I am at development environment I run:
$ foreman start -f Procfile_dev
It works like a charm and doesn't affect production.
You can get nodemon to directly use the .env with the following command
$: env $(cat .env) nodemon app.js
Be aware that you'll have to restart it if you make changes to .env and it won't like it if there are any spaces in your .env file.
With recent versions of Node (since io.js 1.6), you can pass it the -r flag to require a module on start. This lets you directly load .env by using nodemon's --exec:
nodemon --exec 'node -r dotenv/config'
This requires the npm package dotenv to be installed.
Place your local configuration variables in the .env file and run foreman along with nodemon using the following command
$ foreman run nodemon web.js
This works pretty well for me so far,
nodemon -w . -w .env index.js
How it works:
"-w ." tells nodemon to watch the files in the current directory
"-w .env" tells nodemon to watch the .env file
"index.js" is just the file to run when changes occur (could be anything)
"scripts": {
"start": "node -r dotenv/config src/server.js dotenv_config_path=dev.env dotenv_config_debug=true",
"start:dev": "nodemon --exec \"npm start\""
}
In my case the .env file is used for development and not deployment. So I wanted my code to be decoupled from the .env file. Ideally I didn't want to import 'dotenv/config' anywhere in my code. This is my solution:
My nodemon config:
{
"watch": [
"src",
".env"
],
"ext": ".ts",
"exec": "ts-node -r dotenv/config ./src/index.ts"
}
My NPM script:
"start:dev": "nodemon"
In this solution ts-node requires dotenv, which sets up the environment variables before the main app starts. This means that nowhere in my code do I need a import 'dotenv/config'. dotenv can become a dev dependency, and this also prevents dotenv to be loaded at all once the code is deployed.
Thread necromancy!
Use grunt-env to load environmental variables from your heroku config.
In Three steps
Creating the file on root folder > .env
# .env ======
PORT=5000
WHO_AM_I="Who Knows"
Install the dotenv
Run below command
"dev": "nodemon -r dotenv/config src/app.js"
You can access the your defined variables using > process.env.varible_name
If you want to run Typescript in nodemon and require a particular .env file with dotenv then you can do:
In package.json scripts:
"dev": "nodemon -r dotenv/config src/myApp.ts dotenv_config_path=/path/to/your/env/file",
And a line in nodemon.json to tell nodemon to use ts-node when encountering Typescript extensions:
"execMap": {"ts": "node -r ts-node/register"},
This is useful for using a development .env file say .env.development.local for local dev work and leave the main .env file for live production variables.
Use the -w key to specify nodemon what to watch additionally.
"scripts": {
"dev": "env-cmd nodemon -w app -w *.js -w .env server.js"
}
Don't forget rerun npm run dev
Heroku Procfile
Change: web: node app.js to web: nodemon app.js
To load the dotenv package and any declared .env vars into the environment, you can do the following:
nodemon -r dotenv/config myapp.js
I use cross-env for environments.
npm i cross-env
set package.json.
"start": "cross-env NODE_ENV=production node dist/app.js",
"dev": "cross-env NODE_ENV=dev nodemon --exec ts-node src/app.ts",
npm run start OR npm run dev

Categories