Enabling proxies for "dist" target

[utilityboy]

Hello,

This may be a somewhat of a silly question, but I haven't been able to come up with the proper configuration to allow proxying for a dist target. I have an angular app based on yeoman's angular generators and would like to test some aspects of the dist target without deploying the entire application.

My understanding of Grunt is somewhat limited, but wanted to ask the if this was in fact possible without proceeding down a rabbit hole.

Many thanks.

connect task:

      dist: {
        options: {
          middleware: function(connect, options) {
            if (!Array.isArray(options.base)) {
              options.base = [options.base];
            }

            // Setup the proxy
            var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest];

            // Serve static files.
            options.base.forEach(function(base) {
              middlewares.push(connect.static(base));
            });

            // Make directory browse-able.
            var directory = options.directory || options.base[options.base.length - 1];
            middlewares.push(connect.directory(directory));

            return middlewares;
          },
          open: false,
          base: [
            '<%= yeoman.dist %>'
          ]
        }
      }

actual grunt task

  grunt.registerTask('serve', function(target) {
    if (target === 'dist') {
      return grunt.task.run([
        'build',
        'configureProxies:dist',
        'connect:dist:keepalive'
      ]);
    }
...
}

[javadoug]

Is there an answer to this question. I'm stuck on this, too.

[gonzofish]

+1

[zimbrecka]

Hello,

I don't know if this could help, but in one project I got it working adding a "proxies" property to dist configuration :

dist: {
  options: {
    open: true,
    base: '<%= yeoman.dist %>',
    middleware: function (connect,options) {
      if (!Array.isArray(options.base)) {
          options.base = [options.base];
      }
      // Setup the proxy
      var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest];
      // Serve static files.
      options.base.forEach(function(base) {
          middlewares.push(connect.static(base));
      });
      return middlewares;
    }          
  },
  proxies: proxies
}

where proxies is a shared array between "dist" and "livereload".

[nelyj]

HI @zimbrecka, Can you add an example for "proxies" ?. I try this add the next code in dist configuration.

  dist: {
    options: {
      open: true,
      base: '<%= yeoman.dist %>',
      middleware: function (connect,options) {
        if (!Array.isArray(options.base)) {
            options.base = [options.base];
        }
        // Setup the proxy
        var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest];
        // Serve static files.
        options.base.forEach(function(base) {
            middlewares.push(connect.static(base));
        });
        return middlewares;
      }          
    },    
    proxies: [{
      context: '/api',
      host: 'localhost',
      port: 3000
      // changeOrigin: true
    }]
  }

But I can't fix this. Someone has been able to fix them ?

[zimbrecka]

Hello @patojimenez, for sure I can (we load our Grunt config w/ load-grunt-config) :

  require('load-grunt-config')(grunt, {
    configPath: path.join(process.cwd(), 'grunt/configs'),
    data: {
      ...
      remoteHost: 'backoffice.project-dev.fr',
      proxies: [
        {
          context: '/api',
          host: '<%= remoteHost %>',
          port: 80,
          https: false,
          changeOrigin: true,
          xforward: false,
          headers: {
            'host': '<%= remoteHost %>'
          }
        },...

[nelyj]

Thanks a lot @zimbrecka, it works for me.

[zimbrecka]

Happy I could help !

[nelyj]

@zimbrecka have you an email contact ?, For some reason after run "grunt build" and create dist directory in my server appear and error 403. How can I check if the proxies settings are in my compiled js ?.

[mostafabarmshory]

remember to add configureProxies before connect task:

1) update dist options

   dist: {
        options: {
          open: true,
          middleware: function (connect, options) {
            var middlewares = [connect.static(appConfig.dist)];

            if (!Array.isArray(options.base)) {
              options.base = [options.base];
            }

            // Setup the proxy
            middlewares.push(require('grunt-connect-proxy/lib/utils').proxyRequest);

            // Serve static files
            options.base.forEach(function(base) {
              middlewares.push(connect.static(base));
            });

            return middlewares;
          }
        }
      }

2) update tasks

  grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
    if (target === 'dist') {
      return grunt.task.run([
        'build',
        'configureProxies:server', // added just before connect
        'connect:dist:keepalive'
      ]);
    }

    grunt.task.run([
      'clean:server',
      'wiredep',
      'concurrent:server',
      'postcss:server',
      'configureProxies:server', // added just before connect
      'connect:livereload',
      'watch'
    ]);
  });