Grunt Livereload + Grunt Connect Proxy

Question

I am using Rails for my API, AngularJS on the front and I am having some issues getting livereload / grunt connect proxy to work properly.

Here is the snippet from my gruntfile:

connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost',
        livereload: 35729
      },
      proxies: [
        {
          context: '/api',
          host: 'localhost',
          port: 3000
        }
      ],
      livereload: {
        options: {
          open: true,
          base: [
            '.tmp',
            '<%= yeoman.app %>'
          ],
          middleware: function (connect, options) {
            var middlewares = [];
            var directory = options.directory || options.base[options.base.length - 1];

            // enable Angular's HTML5 mode
            middlewares.push(modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png$ /index.html [L]']));

            if (!Array.isArray(options.base)) {
              options.base = [options.base];
            }
            options.base.forEach(function(base) {
              // Serve static files.
              middlewares.push(connect.static(base));
            });

            // Make directory browse-able.
            middlewares.push(connect.directory(directory));

            return middlewares;
          }
        }
      },
      test: {
        options: {
          port: 9001,
          base: [
            '.tmp',
            'test',
            '<%= yeoman.app %>'
          ]
        }
      },
      dist: {
        options: {
          base: '<%= yeoman.dist %>'
        }
      }
    }

If I 'grunt build' everything works perfectly - off localhost:3000

However if I 'grunt serve' it opens a window through 127.0.0.1:9000 and I get 404 to all my API calls.

Also under serve it is mangling my background images from a CSS file I get this warning:

Resource interpreted as Image but transferred with MIME type text/html: "http://127.0.0.1:9000/images/RBP_BG.jpg"

I haven't done this before - so chances are I am doing it all wrong.

Answer 1

This is an old post, but please make sure that you actually initialize the proxy in the grunt serve task by calling configureProxies before livereload.

grunt.task.run([
  'clean:server',
  'bower-install',
  'concurrent:server',
  'autoprefixer',
  'configureProxies',
  'connect:livereload',
  'watch'
]);

Should work fine afterwards.

Answer 2

I don't like too much code in your connect.livereload.middleware configuration.
Is that all necessary ?

Take a look at this commit - chore(yeoman-gruntfile-update): configured grunt-connect-proxy in some of my projects.

• backend is Django
• ports: frontend: 9000, backend: 8000
• generator-angular was in v.0.6.0 when generating the project
• my connect.livereload.middleware configuration was based on: https://stackoverflow.com/a/19403176/1432478

Answer 3

I have a similar problem with you but I have no use yeoman.

My solution is to add the task 'configureProxies'.

this is my tasks:

grunt.registerTask('serve', ['connect:livereload','configureProxies', 'open:server', 'watch']);

and,'connect:livereload','configureProxies'——After my test, the order of these two tasks will not affect the results.

github grunt-connect-proxy