grunt-connect-proxy

grunt connect proxy + grunt-livereload 404 when reload


I'm have problem with my Gruntfile config but I don't know how resolve this. When my path has single route ex: localhost:9000/contractor reload work fine, but when reload localhost:9000/add/something I get error 404 beacuse browser search files in 'add' directory not in main directory example: GET localhost:9000/add/bower_components/bootstrap/dist/css/bootstrap.css Directory 'add' not exist. I'm using Angular 1.6.0 and angular-route 1.6.0

Gruntfile.js

'use strict';

var modRewrite = require('connect-modrewrite');
var config = {app: 'app'};
var mountFolder;

module.exports = function (grunt)
{
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-jshint');

    require('load-grunt-tasks')(grunt);

    mountFolder = function (connect, dir)
    {
        return connect['static'](require('path').resolve(dir));
    };

    grunt.initConfig({
                config: config,
                watch: {
                    livereload: {
                        options: {
                            livereload: '<%= connect.options.livereload %>'
                        },
                        files: ['<%= config.app %>/index.html',
                            '<%= config.app %>/*.js',
                            '<%= config.app %>/modules/**/*']
                    }
                },
                connect: {
                    options: {
                        port: 9000,
                        livereload: 35729,
                        hostname: 'localhost'
                    },
                    livereload: {
                        options: {
                            open: true,
                            middleware: function (connect)
                            {
                                return [
                                    // in case of using html5Mode - makes accessible uris without hashbang but containing view's path
                                    modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png|\\.jpg|\\.ttf|\\.woff|(\\api.+)$ /index.html [L]']),
                                    mountFolder(connect, config.app),
                                    connect().use('/bower_components', connect.static('./bower_components')),
                                    require('grunt-connect-proxy/lib/utils').proxyRequest];
                            }
                        }
                    },
                    proxies: [{
                        context: '/api',
                        host: 'localhost',
                        port: 3000,
                        changeOrigin: true
                    }],
                    jshint: {
                        default: {
                            options: {
                                jshintrc: true
                            },
                            files: {
                                src: ['app/**/*.js', 'test/**/*.js', '!app/bower_components/**/*.js']
                            }
                        },
                        verify: {
                            options: {
                                jshintrc: true,
                                reporter: 'checkstyle',
                                reporterOutput: 'target/jshint.xml'
                            },
                            files: {src: ['app/**/*.js', 'test/**/*.js', '!app/bower_components/**/*.js']}
                        }
                    }
                }

            }
    );

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

    grunt.registerTask('default', ['serve']);
};

My dependecy:

 "devDependencies": {
    "connect-livereload": "0.5.2",
    "connect-modrewrite": "0.9.0",
    "grunt": "0.4.5",
    "grunt-cli": "0.1.13",
    "grunt-contrib-connect": "0.7.1",
    "grunt-contrib-jshint": "0.11.3",
    "grunt-contrib-watch": "0.6.1",
    "grunt-connect-proxy": "0.2",
    "load-grunt-tasks": "3.0.0"
  }

Solution

  • Problem was be on angular-route 1.6.0 . I'm add

    <base href="/" />
    

    to index.html before linked css style and work.