How to run sails in watch mode(during development) - javascript

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.

Related

Running the server in Local Machine without showing cmd the window

I' ve created my node.js app with express, now i want to upload it on my local server machine.
I've created a bat file (I will use task planner to run this) that basically move to folder app and launch "npm run start".
The question is: There's a more correct way to this? (no cloud) and is it possible to hide the cmd window?
Putting a node.js application to production can be done with pm2. Pm2 will spin up your application and keep it alive, without having any terminal/cmd open.
Simply install pm2 globally on your machine:
$ npm install pm2 -g
Then launch your application with pm2:
$ pm2 start app.js
There are some configurations you could do, so I suggest you look at their repo

Can't dockerize Nuxt.js application

I have simple Nuxt.js application and I want to dockerize it. Here is the script:
FROM node
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 8010
CMD [ "npm", "start" ]
When I build it and run container it seems to work and I can see something like this:
Entrypoint app = server.js server.js.map
READY Server listening on http://127.0.0.1:8010
But when I'm trying to see it in browser I get just error - This page isn’t working.
So, in general, how can I dockerize my Nuxt.js application and make it work on my machine?
Your app binds to 127.0.0.1 which means that it'll only accept connections from inside the container. By reading the docs, it seems you can set the HOST environment variable to the binding address you want. Try this, which sets it to 0.0.0.0 which means that the app accepts connections from everywhere
FROM node
ENV HOST=0.0.0.0
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 8010
CMD [ "npm", "start" ]
When running it, you should see READY Server listening on http://0.0.0.0:8010 rather than READY Server listening on http://127.0.0.1:8010

React App not starting in azure app service

I've deployed a simple react app to azure app service and it won't start:
How do I get the app to run index.html?
add this command in your azure dashboard > Configuration > Startup Command
pm2 serve /home/site/wwwroot --no-daemon
and restart your server. This fixed it for me!
You don't need to install express and configure index.js as mentioned in other answers since that needs config change and not sure whether app scaling event will retain those installations in new instance.
Easy way is to use pm2 since that is already part of stack. Pass the below startup command for the app
pm2 serve /home/site/wwwroot --no-daemon
Once we restart, it should pick the pages from the docroot (/home/site/wwwroot)
Go to Azure Configuration>General Settings
If your build folder is at the root of the project
Start up command: pm2 serve /home/site/wwwroot --no-daemon --spa
If your build folder is inside your client folder, just add the path
Start up command: pm2 serve /home/site/wwwroot/client/build --no-daemon --spa
Note:
Make sure your using Azure App Service linux server.
I added --spa at the end to fix the issue of react-router redirect, Using --spa will automatically redirect all queries to the index.html and then react-router will do its magic.
If you deployed to a Node Linux Web App the default document would be hostingstart.html located in /home/site/wwwroot/.
According to this:
When you create a Node.js app, by default, it's going to use
hostingstart.html as the default document unless you configure it to
look for a different file. You can use a JavaScript file to configure
your default document. Create a file called index.js in the root
folder of your site
So go to your ssh terminal, navigate to /home/site/wwwroot. Create index.js there with the following code:
var express = require('express');
var server = express();
var options = {
index: 'index.html'
};
server.use('/', express.static('/home/site/wwwroot', options));
server.listen(process.env.PORT);
NOTE: Be sure to run npm install --save express also in this folder else your app service will crash on startup
Restart, it will configure index.html as the default document for your app.
So thanks to Burke Holland. The easiest is to create a build folder running
npm run build
Then you copy your build folder into your destination and add a "ecosystem.config.js" file.
module.exports = {
apps: [
{
script: "npx serve -s"
}
]
};
See this link for more information:
https://burkeknowswords.com/this-is-how-to-easily-deploy-a-static-site-to-azure-96c77f0301ff
Note: This works for a deployment to a Node Linux App Service instance in Azure. No client side routing configuration needed with this approach!
For Windows App service you can create a config file for configuring your client side routing.

How to automatically reload Node.js project when using pm2

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

Reload Express.js routes changes without manually restarting server

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.

Categories

Resources