Comments (29)
Thanks for pointing this out. For me, this only happens when I introduce a syntax error that trips up the server and breaks the livereload script. So as long as the changes you make don't cause any errors it should reload correctly.
That said, I think a better way of dealing with this would be to have jshint validate your server code before it reloads. This would prevent the server from crashing if an error was introduced but would let you know where to fix it.
I'll probably release an update to the generator that adds this, but it should be pretty simple to add to your project.
Create a .jshintrc
file in the lib
folder with the following options:
{
"node": true,
"esnext": true,
"bitwise": true,
"camelcase": true,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 2,
"latedef": true,
"newcap": true,
"noarg": true,
"regexp": true,
"undef": true,
"strict": true,
"smarttabs": true
}
Then in your gruntfile under the jshint task add an option for the server code:
jshint: {
...
server: {
options: {
jshintrc: 'lib/.jshintrc'
},
src: [ 'lib/{,*/}*.js']
}
}
Finally, update the express task with the new jshint:server task.
express: {
files: [
'server.js',
'lib/{,*//*}*.{js,json}'
],
tasks: ['newer:jshint:server', 'express:dev'],
options: {
livereload: true,
nospawn: true //Without this option specified express won't be reloaded
}
}
I'm sure there will still be some that get through and crash the server, but that should catch most of the errors you might introduce.
Hope that helps!
from generator-angular-fullstack.
Hi there, thanks for the prompt response!
Unfortunately, still when I change for instance in file /lib/controllers/api.js the line with:
name : 'HTML5 Boilerplate 2',
(without syntactical errors)
it produces the error I was writing about. Refreshes the browser but with displaying the error. If you refresh manually then it works ok.
Is it possible that is something wrong with my setup? On your end it works ok this scenario?
from generator-angular-fullstack.
Hmm, that does actually work for me. So it probably is something wrong with your setup, but I'm not sure where that would be going wrong.
from generator-angular-fullstack.
I really can't figure out what the problem can be. I was using nodejs v.0.10.24 from nvm,
I changed this, and used the one installed from ppa for ubuntu but same issue occurs.
Everything goes smoothly both in the installation and in the generation of the project.
Could I try to check something else from my side? :(
from generator-angular-fullstack.
Well the way you describe it, the server restarts after you make a change, but it takes you to a 404 page.
What happening behind the scenes is that there's an express watch task that monitors changes in your file. When it detects a change, it restarts the server. When its finished restarting the server it triggers a livereload of your browser.
Strangely, it sounds like all of that is working for you, but that the livereload is happening before the server has finished restarting.
Maybe you could delay the livereload task for a second or two till you're sure the server has finished restarting.
In your gruntfile, try adding this to the express
watch task options:
options: {
debounceDelay: 1000,
livereload: true,
nospawn: true //Without this option specified express won't be reloaded
}
I don't know if debounceDelay works the way I think it does. If that doesn't work, you might want to check out the grunt-contrib-watch docs and see if theres anything else that could do the trick.
from generator-angular-fullstack.
Unfortunately even that option didn't do the trick. I checked a lot in the contrib-watch docs without finding anything. Also I increased a lot the debounceDelay without having any effect.
Maybe its another task which triggers the reload of the browser?
Also what node version are you using?
from generator-angular-fullstack.
It's definitely the express watch task which triggers the reload of the browser.
My version of node is 0.10.16, but that probably won't do you much good. I wish I could be of more help...
from generator-angular-fullstack.
Used the same node version, same behaviour.
Anyway, I will keep digging to see what is wrong with my setup and will let you know if I discover anything
from generator-angular-fullstack.
I am also facing the similar problem. For now I have disabled livereload
for express
task. My node version is 0.10.23
.
from generator-angular-fullstack.
When I split out the express
and livereload
tasks I was worried about the implications of reloading the browser just because the server has changed. In some cases this is desirable, but sometimes it is not.
As @abasak mentioned, you can change this behaviour by disabling LiveReload in the express task:
express: {
files: [
'server.js',
'lib/{,*//*}*.{js,json}'
],
tasks: ['newer:jshint:server', 'express:dev'],
options: {
livereload: true,
nospawn: true //Without this option specified express won't be reloaded
}
}
becomes:
express: {
files: [
'server.js',
'lib/{,*//*}*.{js,json}'
],
tasks: ['newer:jshint:server', 'express:dev'],
options: {
// livereload removed, or set to false
nospawn: true //Without this option specified express won't be reloaded
}
}
from generator-angular-fullstack.
I'm having the same issues here. If I save the server.js
file, even without changes, it starts reloading, but stops immediately after the database population step. Then grunt completely hangs.
from generator-angular-fullstack.
@kjellski Really? Maybe we should consider switching from grunt-express-server to nodemon https://github.com/ChrisWren/grunt-nodemon.
Need someone to see if it fixes the problem, but it would be worth it to try.
from generator-angular-fullstack.
@DaftMonk unfortunately I'm pretty bad at using and configuring grunt, I've dont nothing but copy paste parts of configs together honestly. But I would like to help, can you tell me what I should do to test this? Would I just hang that task in default and see whether it works or not? :/ sorry, I've got really no clue here...
from generator-angular-fullstack.
Can't test it right now, but I think this is what you'll need to do:
npm install -g nodemon
npm install --save-dev grunt-nodemon
- Add the nodemon configuration to the initConfig object
nodemon: {
dev: {
options: {
file: 'server.js',
nodeArgs: ['--debug'],
watchedExtensions: ['js'],
watchedFolders: ['lib'],
env: {
PORT: process.env.PORT || 9000
}
}
}
},
- Remove the 'express:dev' task from the express watch configuration
- In the serve task replace 'express:dev' with 'nodemon:dev'
edit: got a chance to run this, i thought nodemon triggered a livereload but apparently it doesn't. I'm starting to rethink this whole idea. I'm going to try to tinkering with an idea for how we could fix this.
from generator-angular-fullstack.
Ok heres another idea. I hate shooting in the dark but I gotta try it.
Try seperating the express livereload into its own watch task, since they run consecutively.
express: {
files: [
'server.js',
'lib/**/*.{js,json}'
],
tasks: ['newer:jshint:server', 'express:dev'],
options: {
// livereload: true,
nospawn: true //Without this option specified express won't be reloaded
}
},
expressReload: {
files: [
'server.js',
'lib/**/*.{js,json}'
],
options: {
livereload: true
}
}
If that still doesn't work, you could try adding a delay task:
grunt.registerTask('5sec', 'Delay for express restart.', function() {
var done = this.async();
setTimeout(function() {
done();
}, 5000);
});
And adding that to the express watch task stack:
tasks: ['newer:jshint:server', 'express:dev', '5sec'],
It sucks that I can't replicate the issue, this would be a lot easier to test/debug if I could. If anyone wants to give that a try let me know how it goes :)
from generator-angular-fullstack.
I originally used grunt-nodemon
but switched back to grunt-express-server
because grunt-nodemon
expected all your watch set-up to be in its configuration, rather than a watch task.
nodemon
(and grunt-nodemon
) does have much better error reporting though, like what line number has broken it if it fails to restart.
from generator-angular-fullstack.
@jeef3 Interesting, I'll try it out.
Do you think it would it be possible to switch over to it without losing any of the watch functionality we have?
from generator-angular-fullstack.
It's possible, worth a shot. If I get a chance (and no one beats me to it) I'll give it a shot tonight.
from generator-angular-fullstack.
It looks like we might be able to use grunt concurrent to run watch tasks alongside nodemon. I wonder if you can configure nodemon to open a new browser window when it starts as well.
from generator-angular-fullstack.
That's actually the other problem I ran into. I struggled to get it working properly with concurrent
. Just couldn't get open
to run.
from generator-angular-fullstack.
Ah, yeah. It would be nice if you could just tell nodemon to run the open
task when its finished starting up, but I doubt it's that simple.
from generator-angular-fullstack.
We had the same problem.
Our experience: The reload is triggered before the server is back.
Our solution: A waiting task.
// task that simply waits for 1 second, usefull for livereload
grunt.registerTask('wait', function () {
grunt.log.ok('Waiting...');
var done = this.async();
setTimeout(function () {
grunt.log.writeln('Done waiting!');
done();
}, 2000);
});
in watch task:
express: {
files: [
'server.js',
'server/**/*.{js,json}'
],
tasks: ['express:dev', 'wait'],
options: {
livereload: true,
nospawn: true //Without this option specified express won't be reloaded
}
}
from generator-angular-fullstack.
@diiimo2011 Thanks for posting that. What is the minimum timeout you need for that to continue to work?
Also it would be helpful if anyone else who's having this problem could try that and report back. I'd like to know how it worked so I could include that snippet in the generator.
from generator-angular-fullstack.
Here goes 1 second for Mac and Linux. Windows better 2 seconds. We have a team with Win, Linux and Mac and we use 2 seconds.
from generator-angular-fullstack.
If nobody else does this before, I'll try it this weekend, hope to have more time then. @DaftMonk I hope to get a look on your work regarding the model and service generation...
from generator-angular-fullstack.
@DaftMonk I figured this discussion belonged in here.
I'm sure it will be fine for most cases. I never looked into it, but did the delay
option in grunt-express-server
not help? Or even the output
? A shame there's no event callbacks like there is in nodemon.
from generator-angular-fullstack.
I could never get nodemon to behave exactly how I wanted it. It might be possible to get it working with a lot of tweaking, but for now, this is a simpler solution.
from generator-angular-fullstack.
Yeah, same, I had no luck with nodemon + LiveReload. Just... a shame is all 😄
Agreed.
from generator-angular-fullstack.
I'm seeing the same issue. I have the wait
task from @diiimo2011 in my Gruntfile
This is the wait
task:
// Used for delaying livereload until after server has restarted
grunt.registerTask('wait', function () {
grunt.log.ok('Waiting for server reload...');
var done = this.async();
setTimeout(function () {
grunt.log.writeln('Done waiting!');
done();
}, 2000);
});
...and the watch.express
config
express: {
files: [
'server.js',
'lib/**/*.{js,json}'
],
tasks: ['newer:jshint:server', 'express:dev', 'wait'],
options: {
livereload: true,
nospawn: true //Without this option specified express won't be reloaded
}
}
This is the relevant output on the console:
Running "express:dev" (express) task
Starting background Express server
debugger listening on port 5858
Running "open:server" (open) task
Running "watch" task
Waiting...
Express server listening on port 9000 in development mode
db connection open
I don't ever see the grunt.log.task('Waiting for server reload...')
output.
The task is there, and will run if called -- seems to indicate watch:express
isn't being run?
$grunt wait
Running "wait" task
>> Waiting for server reload...
Done waiting!
Done, without errors.
Execution Time (2014-05-05 06:02:52 UTC)
wait 2s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 100%
Total 2s
from generator-angular-fullstack.
Related Issues (20)
- Nunjucks
- Not able to signup or log in HOT 2
- unable to load the Client HOT 1
- Possibly unused function in template - authCallback()
- ERROR: install is not COMMAND nor fully qualified CLASSNAME HOT 2
- Cannot find module 'callsites' HOT 2
- Has anyone tried running this with Serverless Express?
- Is this project still maintained? HOT 1
- how to emit a socket event after updating a document? HOT 3
- Entire app is required and loaded twice, so everything fires twice. HOT 1
- Cannot start application HOT 1
- Cannot GET / after gulp serve HOT 5
- No generator works except endpoint
- yo angular-fullstack:endpoint message do not produce server/api/message/message.socket.js HOT 1
- SCSS DOESN'T WORK HOT 2
- Sequelize AND Mongo Build troubles
- Use multiple databases
- Lodash has no exported member 'noop' HOT 1
- Pagination and routes -- reactjs — currentpage and cureentpagesize — to be maintained independently
- clean
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from generator-angular-fullstack.