I am very new to server side scripting. And I am using NodeJS. My Problem is that after adding some new features to the app, i.e. after changing the code, these changes will be applied only after restarting the server. Till then NodeJS behaves so as though I hadn't changed anything. So for instance if I add console.log("works") and don't restart the server, then it hasn't any effect.
I am using Nuxt.js, which is actually the Vue.js framework but with additional and very usefull features mainly for server side rendering. I didn't integrate the express.js at the beginning of the project, beacause it wasn't planned to write any server side code. So I am normally exporting express and using it, which is pretty fine for me, since I need just a couple lines of code to use the NodeJS file system.
So, as it is pretty hard to code, if I should restart the server once I changed anything, I want to ask you if there is any solution to this problem.
Use nodemon
step 1 : npm install -g nodemon <- this will install nodemon globaly in your system
step 2 : change your start script within package.json
"scripts": {
"start": "nodemon fileName" <- like this //filename is you root file which starts the app like app.js
}
step 3 : npm start
This is already build in into nuxt. You just need to run it in dev mode, not in production.
E.g. for dev with change monitoring
nuxt
For production without monitoring
nuxt start
So in this particular case the following changes to the "scripts" in package.json have solved my problem.
"scripts": {
"dev": "nodemon --watch api --exec \"nuxt\"",
"start": "nodemon nuxt",
}
The following link could also be usefull to you.
Install nodemmon in your application to allow live update npm -g install nodemon
and add the following codes inside your packages json file :
"main": "app.js",
"scripts": {
"start": "node app"
},
on your command line, just type : start
Related
When I save changes to my client-side code, the browser hot-reloads as expected. But when I make changes to my server code, no hot-reloading occurs. This is a problem because we want to just run 1 command (i.e. npm start) to launch our React webpack-dev-server AND our API server, and rerunning the entire npm start to manually relaunch the server after changes is slow (because it unnecessarily relaunches the React dev-server as well). Also sometimes we forget to relaunch the server code, so in reality it should just hot-reload anyway.
I've looked across the internet and surprisingly can't find any straightforward solutions. I feel like I shouldn't have to eject the entire project and go deep into the webpack configurations to get this to work.
This is what the npm start portion of my package.json looks like now:
"scripts": {
46 "start": "concurrently --kill-others \"react-scripts start\" \"node server.js\"",
...
}
Is there perhaps a way I can do "react-scripts start" with a different target or something?
I've looked around and had a lot of trouble figuring this out. I'm hoping someone might be able to point me to a post or have information on how to do this.
My problem is that I have 2 projects I've made using WebStorm:
I have 1 application that is my server-side code running on port 3000. It's a simple Node Express app.
The second application is an Angular 4 / Ionic 3 application running the client side on port 8100.
I want to run my server application in debug mode, so that it hits the breakpoints for all the data being sent from the client side app.
For example: Angular / Ionic app sends a get request for all clients for a given customer. The customer is sent via url parameter. I want the server code to pause when it receives this request and so I can see this URL parameter. Fairly simple.
The server is also using grunt to build the project, and nodemon to watch it. I'm using some npm scripts to make life easy. Here are the scripts:
"scripts": {
"dev": "SET NODE_ENV=development && nodemon ./bin/www",
"grunt": "grunt",
"start": "node ./bin/www"
},
Nothing fancy.
I have WebStorm configured to run my scripts from hitting play. So the play button will first run the following sequence:
npm run grunt
npm run dev
Again ... nothing fancy.
Now how do I get this thing to setup a debugger so I can listen in WebStorm? I have a both projects open in separate windows, and I am initiating the calls to the server from the client. How do I make the break points grab hold and show me the data coming into the server?
I feel like this is incredibly easy and I'm missing something really stupid. Any help would be much appreciated.
You need starting you server in debugger to get breakpoints in your server code hit. If you prefer to start your app via npm script, you have to add $NODE_DEBUG_OPTION (or %NODE_DEBUG_OPTION% on Windows) to make sure that Node.js is started with appropriate debug options (--debug-brk, --inspect-brk, etc)
So:
in package.json, modify your dev script as follows:
"dev": "SET NODE_ENV=development && nodemon %NODE_DEBUG_OPTION% ./bin/www"
right-click your package.json, choose Show npm scripts
right-click dev script in npm tool window that opens, choose edit 'dev' settings to create a run configuration.
open your source files in editor, add breakpoints
press Debug to start debugging
run your client app, initiate the calls to the server
I have completed todo app by learning from this video:
Super MEAN Stack Tutorial: Angular, Node/Express, Webpack, MongoDB, SASS, Babel/ES6, Bootstrap
In that video at time 19:18 at this url it is taught that I should use the below two commands in seperate git-bash instances if I want to run it in windows using npm run dev:
node server
webpack-dev-server --progress --colors
But in Linux (or any other OS than windows) you can use this script:
"Scripts": {
"start": "NODE_PATH=$NODE_PATH:./src node server",
"dev": "npm start & webpack-dev-server --progress --colors"
}
So, Is there any way I can do the same in windows?
Also, In that tutorial I can see that port no. 3000 is assigned to node server, but due to using dev dependencies he runs the localhost:8080 in browser. You can see that here. After the tutorial finishes, I followed along and created that app. Now I would like to deploy it. So, I would first like to learn to run test my site in non-dev dependencies mode. i.e. when I type localhost:3000 in browser, my app should run successfully. So, can anybody explain the steps for that?
Update:
I am a newbie in node.js. I watched many videos on node and tried to learn something from that. In all the videos I see that I run node server on port no. 3000 and then I type localhost:3000 in my browser. Now lastly I watched video about mean stack in which he uses webpack. Now, I am confused. I think there are two servers running. first server is webpack's server and second server is node's server. Upto today I typed localhost:3000 in my browser because I mentioned that port 3000 will be used by node in my code. But now in the video he is running localhost:8080 in browser. It means webpack's server is used. Then what happened to node server. Why can't I just run localhost:3000? Also in the video it is explained that webpack is a dev dependency. So, I think after the app is completed and ready to be deployed, my project can be run on the node server (by making some changes to the code, I am not sure). Let's take an example. Now I don't want to deploy the app to a real server. I want the same app to run on my friend's pc. He is not a developer. So, he should not depend on webpack as webpack is a dev dependency. So, he should be able to run the app on node server instead of webpack's server. So, he should type localhost:3000 instead of localhost:8080. That's what I don't understand.
Let's break this down:
If you've defined this script:
"Scripts": {
"start": "NODE_PATH=$NODE_PATH:./src node server",
"dev": "npm start & webpack-dev-server --progress --colors"
}
... then this npm command: npm run dev
... actually invokes these two actions:
a) npm start & # Runs NPM in the background
b) webpack-dev-server --progress --colors # Concurrently runs webpack in the foreground
You can accomplish the same thing in many ways using Windows, starting with a simple .bat file like this:
EXAMPLE: RunDev.bat:
start npm start
webpack-dev-server --progress --colors
=======================================================================
STRONG SUGGESTION:
Please forget about watching videos for a few moments. Try a couple of "hello world" tutorials. More importantly, play with the actual code. Try changing things in the code, and see what happens.
Forget about webpack, at least for the moment.
Think of npm as a "build tool"; not as a way to run your application. At least for a moment.
Focus on "node". Write a "node application".
Part of your "node application" will require "ExpressJS" and "Jade" (now renamed "pug" - I'm still using "Jade"). Use npm to get your ExpressJS and Jade dependencies, but stay focussed on Node.
SUGGESTED TUTORIAL:
A Simple Website in Node.js, Ben Gourley
Be sure to:
a. Download the code
b. Work through the tutorial, using the downloaded code
Please post back (a new post) with any specific questions you might have as you work through the tutorial.
I am new to nodejs and this is first time I am using nodemon. I am using nodejs on windows. I have got following in my package.json file
"scripts": {
"start": "nodemon ./bin/www"
}
And I use npm start from command line to start my express app. The process start with a default port which is annoying. But what is even more annoying is that every time I change a file nodemon restarts the application, sometimes on an entirely different random port number. I tried changing the script section in package.json file to the below but that did not make any difference
"scripts": {
"start": "nodemon ./bin/www 3000"
},
From the comments it seems you're specifying the port through an env variable, let's call it EXPRESS_PORT. The node process doesn't inherit it when you start it with npm because npm start creates a new shell with its own environment. So you end up passing port undefined to express. That makes it bind to a random free port. To fix this you can set the variable in the start command:
"scripts": {
"start": "EXPRESS_PORT=3000 nodemon ./bin/www"
}
Or you can export it from your shell with export EXPRESS_PORT=3000 and then run npm start. If you do this you need to make sure to always export before starting the server, so you might want to place the export in ~/.profile or ~/.bashrc.
Currently is seems that for any code change in a sails.js app you have to manually stop the sails server and run sails lift again before you can see the changes.
I was wondering if there is any way when running in development mode to automatically restart the sails server when it detects a code change?
You have to use a watcher like forever, nodemon, or something else...
Example
Install forever by running:
sudo npm install -g forever
Run it:
forever -w start app.js
To avoid infinite restart because Sails writes into .tmp folder, you can create a .foreverignore file into your project directory and put this content inside:
**/.tmp/**
**/views/**
**/assets/**
See the issue on GitHub:
Forever restarting because of /.tmp.
You can use sails-hook-autoreload
Just lift your app as normal, and when you add / change / remove a model or controller file, all controllers and models will be reloaded without having to lower / relift the app.
For example with nodemon to watch api and config directories
.nodemonignore contents
views/*
.tmp/*
.git/*
Run the command after creating .nodemonignore
$> nodemon -w api -w config
Example for supervisor to ignore 3 directories
$> supervisor -i .tmp,.git,views app.js
If you're using Sails 0.11, you can install this hook to automatically reload when you change models or controllers (views do not require reloading):
npm install sails-hook-autoreload
https://www.npmjs.com/package/sails-hook-autoreload
install nodemon globally or locally.
npm install nodemon --save
npm install nodemon -g
install sails locally in you project as follows
npm install sails --save
then change package.json
from
"scripts": {
"debug": "node debug app.js",
"start": "node app.js"
},
to
"scripts": {
"debug": "node debug app.js",
"start": "node app.js",
"dev": "export NODE_ENV=development && nodemon --ignore 'tmp/*' app.js && exit 0"
},
then
npm run dev
I had the same problem and I have solved it using grunt-watch and grunt-forever with sails#beta tasks. The result is 4 grunt commands:
UPDATE: tasks are available in the current sails version (it's no longer beta :>)
start Starts the server
stop Stops the server
restart Restarts the server
startWatch Starts the server and waits for changes to restart it (using grunt-watch). This is probably your solution, but the other commands are also useful.
Here's the code - I'm using sails#beta, which includes a tasks directory, I don't know if this is included in previous versions:
First of all you have to install forever in your sails directory:
npm install grunt-forever --save-dev
tasks/config/forever.js Configure forever task.
module.exports = function(grunt) {
grunt.config.set('forever', {
server: {
options: {
index: 'app.js',
logDir: 'logs'
}
}
});
grunt.loadNpmTasks('grunt-forever');
};
tasks/config/watch.js (edit) Edit watch task in order to add a new rule
// api and assets default rules
,
server: {
// Server files to watch:
files: [
'api/**/*',
'config/**/*'
],
// Restart server
tasks: ['forever:server:restart']
}
tasks/register/watchForever.js Register your custom tasks (this file can be renamed to whatever you want)
module.exports = function(grunt) {
// Starts server
grunt.registerTask('start', [
'compileAssets',
'linkAssetsBuild',
'clean:build',
'copy:build',
'forever:server:start'
]);
// Restarts the server (if necessary) and waits for changes
grunt.registerTask('startWatch', [
'restart',
'watch:server'
]);
// Restarts server
grunt.registerTask('restart', [
'forever:server:restart'
]);
// Stops server
grunt.registerTask('stop', [
'forever:server:stop'
]);
};
With this you should be able to use
grunt startWatch
and make your server wait for changes to be restarted :>
Hope this helped!
Better you use
npm install -g nodemon
i am using this, and it will helps to improve my developing speed. no need to edit any files for this one!.
after installation
nodemon app.js
For anyone coming to this question now, it seems that this is no longer necessary - an application launched with sails lift will have a grunt watch task running, and code changes will be visible without a restart.
I didn't realise this was happening at first because there's nothing to indicate what's happening in the console, but it does seem to work without a restart (I'm using Sails 0.11)