I tried express-livereload, but it just reloaded view files.
Should I use another tool, or this one can be configured to watch for my index.js file which runs the server?
I read that options are the same as node-livereload, and default for watched files include .js files.
Any URL you know with a simple configuration?
My main problem is how to setup good development environment for Express.js, and I would like to inspect the variables when I am making a request, is painful to restart each time I make a change in a route.
PS I tried node-inspector to inspect variables when server handles a request, but it seems node-inspector is not intended for that, right?
I think Nodemon has what you're looking for.
Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development.
Example invocation:
nodemon index.js
I use express.js, normally start server by
npm start
with Nodemon installed, I use
nodemon --exec npm start
Note: nodemon app.js will NOT work here,
because express.js use start script
To install nodemon
npm install -g nodemon
You can livereload both front and backend changes to the browser using 'livereload', 'connect-livereload', and 'nodemon'. Also, this way you don't need Gulp or Grunt. Here's how they work together:
livereload opens a high port and notifies the browser of any changed file
connect-livereload monkey patches every served HTML page with a JavaScript snippet that connects to this high port
nodemon restarts the server on any changed backend file
Set up livereload in Express
Set up Express to both start livereload server watching the public directory and ping the browser during nodemon-induced restart:
const livereload = require("livereload");
const connectLivereload = require("connect-livereload");
// open livereload high port and start to watch public directory for changes
const liveReloadServer = livereload.createServer();
liveReloadServer.watch(path.join(__dirname, 'public'));
// ping browser on Express boot, once browser has reconnected and handshaken
liveReloadServer.server.once("connection", () => {
setTimeout(() => {
liveReloadServer.refresh("/");
}, 100);
});
const app = express();
// monkey patch every served HTML so they know of changes
app.use(connectLivereload());
Start Express with Nodemon
Start the server with nodemon, for example, with a dedicated watch script by running npm run watch.
The key point here is to ignore the public directory that's already being watched by livereload. You can also configure files with non-default extensions, like pug and mustache, to be watched.
"scripts": {
"start": "node ./bin/www",
"watch": "nodemon --ext js,pug --ignore public"
},
You can read a longer explanation in "Refresh front and backend changes to browser with Express, LiveReload and Nodemon."
It might interest you to know that since the release of Node.js V18, Node.js can automatically restart a server upon making a change to the index.js file.
To use the feature, run the server with the following command:
node --watch index.js
Note: At the time of writing, the feature is still experimental.
Related
I am trying to containerize my React application with docker and am now a little bit stuck with the server.js file as I do not know how to "implement" the application inside. I was able to simply show a "Hello World" but can't seem to run the application inside.
My idea was initially, that I could just use the index.js file as an entrypoint and use it in the "res.end(x)" as this was the place where I could simply enter the "Hello World".
Am I missing just something small or is my general approach wrong?
My server.js file looks as followed:
const http= require('http');
const fs = require('fs');
const index = fs.readFileSync('index.js');
let app = http.createServer((req, res) => {
res.writeHead(200,{'Content-Type': 'text/plain'});
res.end(index);
});
app.listen(9030, '0.0.0.0');
console.log('Node server running on port 9030')
I share with you this best documentation :
https://nodejs.org/en/docs/guides/nodejs-docker-webapp/
React is generally coded in .jsx files, which need to be compiled/transpiled into regular Javascript. Once this is done, you can serve these files to web browsers any way you like.
Understanding Build tools
React compilation/transpilation is done using Webpack or Parcel. If you're using Create-React-App, then you're using Webpack under the hood. CRA npm start will run a Webpack dev server, and npm run build will put all of the files you need in your build directory. You should do the latter if you want to
Avoid using Webpack dev server
Most tutorials, including the one linked in the comments, suggest using Webpack development server (aka npm start) to run your server in Docker. which is not recommended. Not only does it consume more resources to run, but the development build will run slower in browsers than the production build. The development server is also not meant to handle heavy loads.
Use build for production, with a real server
Use npm run build to generate the build files in the build directory, then use a real web server to serve them to the world.
One example in Docker, using Nginx to serve the files, can be found here
Alternatively the CRA build command itself offers a helpful hint:
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
This will work in a Docker Node container. An example of a very not-optimized Dockerfile might look like this
FROM node:16-alpine
COPY . .
RUN npm install
RUN npm build
RUN npm install -D serve
CMD ["./node_modules/.bin/serve", "-s", "build"]
The build process can be improved here to leverage cache (by first copying package.json and package-lock.json and installing before copying code over, see example at the end of the answer here), and all of the RUN commands combined
I am deploying a Vue client using Vue-cli 3, which uses Webpack
(I can start the client by calling "yarn dev --open")
I am also writing a server with an API for the client
(I can start the server by calling "node server/server.js")
Is there a way to start both the client and the server with one command?
I was thinking that I should add some code to vue.config.js to start the server before the client is being compiled.
Preferably this would all work in a hot-reload way.
So far I tried a shell script as Alex78191 suggested:
#!/usr/bin/env bash
node server/server.js &
yarn dev --open
This works, but when I try to stop the servers using ctrl-C, only the yarn-process stops, but the node server keeps on running.
Is there a way in bash to stop all started processes (background and foreground) with the ctrl-C command?
I was able to get this working with the following bash script:
#!/usr/bin/env bash
node server/server.js &
pid=$!
yarn dev --open
trap "kill ${pid}; exit 1" INT
This script is a little bit more complex than you might expect to make sure that all child processes stop when this script stops (using ctrl-C). For more information on stopping child processes I found some help here: how-can-bash-script-do-the-equivalent-of-ctrl-c-to-a-background-task
in my package.json I am using
"scripts": {
"start": "node app.js"
},
but if I use nodemon replace with node app.js like
"scripts": {
"start": "nodemon app.js"
},
then what will happen? Because when I got any error at server side, other API also close working. So I think it happen because I use node app.js if I use nodemon app.js than server will restart or not.
When you develop a node app and you make some changes, to see them in effect you have to restart the server.
When you launch your node.js application with Nodemon it will monitor for any changes and automatically restart the server, improving your productivity.
Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development. Install it using npm.
npm install -g nodemon
How to use nodemon?
nodemon "filename" ignore the quotation and place name of the server file.
Nodemon:
monitors for any changes in your Node.js application
automatically restarts the server,
saving time and tedious work.
it's one way to make your development efficient with Opn:
Opn is a dependency that opens web browser links, files, and executables. We will be using Opn to automatically open a web browser to our local host every time our server restarts.Install with npm
npm install opn.
How to use node?
node "filename" ignore the quotation and place the filename (ex app.js ,server.js)
node:
no automatic restart the server every time you do the tedious work
no monitors for any change
nodemon is like a live-server for your node application. any changes made in your node application will get reflected as server will restart again.
as stated here :
nodemon will watch the files in the directory in which nodemon was
started, and if any files change, nodemon will automatically restart
your node application.
nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.
To use nodemon, replace the word node on the command line when executing your script.
In terminal,instead of typing node app.js,you can type: npm start
In package.json file,you can change it to:
"scripts": {
"start": "nodemon app.js"
},
In short,it is like a live server for node js, like we have in HTML & CSS.
When you are using node you have to restart on your own to see the changes you made But nodemon watches the particular path for any changes.If you make any changes in your file, nodemon will restart it for you.
when we install node, we will get automatically node and npm global variable.
for using nodemon you need to install it
npm install -g nodemon
we can access files with node as well but each time when we do changes we need to stop server and restart it.
node "filename" // provide filename
but if we accessing file with nodemon you no need to stop server and restart it only one line of command will save restart server time
nodemon "filename" // provide filename
this one line helps you saving lot of development time and test your sample javascript code
Nodemon stands for Node Monitor.
When you run a server using the command node index.js, after every change in your code you have to again run the node index.js command and reload the page to see the changes. Nodemon solves this problem for you. It auto-updates the server for you.
I started my new project in sails(express on nodejs). I am currently starting my server using command
sails lift
But whenever I make changes, I need to restart my server. How do I start my server such a way any changes during development are automatically reflected on my localhost website?
Previously I created webserver using mean.io and starting server with command
grunt
used to start server in watch mode.
There is a hook for that for sails >= 0.11:
npm install sails-hook-autoreload
Here is how to configure it:
// [your-sails-app]/config/autoreload.js
module.exports.autoreload = {
active: true,
usePolling: false,
dirs: [
"api/models",
"api/controllers",
"api/services"
]
};
Models, controllers or services will be reloaded without having to relift the app
Alternatively, you could use Forever to start your app.
// In a terminal, from the root directory of your project
forever -w -o log/out.log -e log/err.log app.js
The -w option restarts the app on file changes. You can use a .foreverignore file to exclude some paths:
// [your-sails-app]/.foreverignore
**/.tmp/**
**/views/**
**/assets/**
**/log/**
With this solution, the app will be completely stopped and restarted but you can use it with any version of sails and there is not this limitation from the sails-hook-autoreload documentation:
As for now, it's not possible to add new directories to be reloaded.
I am currently programming Node.js with Express.js, and every time I change a line of code in the file router or app, I need to type the command:
pm2 reload id_project.
How do I make pm2 auto-reload the project when a file is changed?
You need to start your pm2 project with the --watch option:
pm2 start <script|name|id> --watch
Where <script|name|id> refers to:
script the path to the script you want to let pm2 handle
name the name of the configuration in the "ecosystem" file
id refers to an already running application using pm2, which can be obtained using pm2 list (note that this would actually require a restart instead of start, so it's probably the least desirable of the options)
You could also specify which files/directories to ignore:
pm2 start <script> --watch --ignore-watch "node_modules"
Watch & Restart
Or create an "ecosystem" json file describing how you want pm2 to treat your project:
{
"name": "project_name",
"script": "index.js",
"watch": true,
"ignore_watch": ["node_modules"]
}
JSON options
PM2 comes with a handy development tool that allow you to start an application and restart it on file change:
# Start your application in development mode
# it print the logs and restart on file change too
# Two way of running your application :
pm2-dev start my-app.js
# or
pm2-dev my-app.js
By default, pm2 doesn’t automatically refresh our server every time we change files.
You need to start your pm2 project with the --watch cli argument in order to tell pm2 to refresh when files have changed:
pm2 start id_project --watch
check out the docs for more details, or #rogier-spieker answer which is more detailed.
pm2 is a Node process manager that has lots of bells and whistles. you can run the below command to automatically restarting the node application when file changes in the directory are detected.
pm2 start index.js --watch
Note that because pm2 runs things in the background, you can’t just ctrl+c your way out of a running pm2 process. You have to stop it by passing the ID or the name.
pm2 stop 0
pm2 stop index
other two options are below
npx supervisor index.js
nodemon index.js