5

I am new to both Sails and grunt so I might be missing the obvious. I am trying to automatically refresh my sails app in the browser whenever files change.

I start the app with sails lift and it runs on the default port 1337.

I tried adding options: {livereload:true} to my grunt-contrib-watch configuration but as far as I understand I need to somehow inject the livereload JavaScript into my page?

I tried to use grunt-contrib-connect with the livereload option to inject the JavaScript but it seems to just start another server. When I navigate to the started server (localhost:8000) I just see the folder structure. The livereload JavaScript is injected however.

I want to avoid the livereload Chrome Plugin if possible.

What's the best way to inject the livereload JavaScript into my Sails app? Or should I just use another tool like Browsersync?

Thank you! :)

Philipp Baschke
  • 53
  • 1
  • 4

2 Answers2

6
  1. Add livereload option to tasks/config/watch.js
    module.exports = function(grunt) {

     grunt.config.set('watch', {
        api: {

            // API files to watch:
            files: ['api/**/*', '!**/node_modules/**']
        },
        assets: {

            // Assets to watch:
            files: ['assets/**/*', 'tasks/pipeline.js', '!**/node_modules/**'],

            // When assets are changed:
            tasks: ['syncAssets' , 'linkAssets']
        },
        // ADD THIS 
        options: {
          livereload: true,
        },
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
};
  1. Add livereload script to your layout, somewhere at the end before </body> tag, by default to views/layout.ejs:
<script src="http://localhost:35729/livereload.js"></script>

Except of localhost you can use IP or DNS name of server

This will refresh page if a file is changed in api or assets folder.

By default Ggrunt-contrib-watch uses 35729 port. You can point other port like livereload: 8000

EDIT: Well, I do not really know if this is totally correct, but looks like you can override layout settings in config/env/development.js. Add something like:

module.exports = {
    views: {
        layout: 'dev'
    }
}

Then you can create separate layout file views/dev.ejs where you can add livereload script and other development params. Also you can add livereload key in the same way.

Muhammad Omar ElShourbagy
  • 6,718
  • 2
  • 32
  • 50
Bulkin
  • 1,020
  • 12
  • 27
  • Thank you for your answer. Do you also have a suggestion how to dynamically inject the script tag (instead of just adding it to layout)? Because I don't want to include it in production mode. – Philipp Baschke Jul 12 '15 at 11:56
  • @PhilippBaschke I added some info to the answer, did not test that – Bulkin Jul 14 '15 at 06:53
  • Both your suggestions work! :) And with the `views/dev.ejs` , the livereload script does not show up when I `sails lift --prod`. I don't like the duplication of the layout though and I still feel like it should be possible via `devJs` in `tasks/config/sails-linker.js` somehow. But **it works, so thank you very much! :)** – Philipp Baschke Jul 24 '15 at 10:49
  • @PhilippBaschke I think the best option is to add an environment test inside layout.ejs like this : `<% if(sails.config.environment == 'development' ){ %> <% } %>` – codeKonami Aug 06 '15 at 13:22
  • @codeKonami Well that was easy. Thank you very much for your tip! :) – Philipp Baschke Sep 02 '15 at 07:03
  • While this does cause livereload to work, I noticed there will sometimes be a looping reload especially when working with html or css assets. What I did was change the "tasks" to ["build"] instead of ["syncAssets",..etc.]. Hope this helps others as well. – Joshua May 02 '16 at 04:31
1

After lost some time trying do this with sails/grunt, i install the livereload browser plugin (http://livereload.com/extensions/) for .html, js and css and the package (https://www.npmjs.com/package/sails-hook-autoreload) for the models and controllers.

Works like a charm.

Liko
  • 2,130
  • 19
  • 20