Cannot GET / page

Question

I am trying to use grunt contrib connect for local development and testing of an angular app.

the gruntfile is configured like so:

connect: {
    server: {
        options: {
            open: true,
            keepalive: true, 
            hostname: 'localhost',
            port: 8080
        }
    }
}

and the task

grunt.registerTask('serve', [
    'connect:server'
]);

grunt serve opens the browser with the file listing of the root directory. Clicking on the dist directory launches the app. Everything is fine until here: it's possible to change page from the app menu, but… direct access or reload of any of these pages, gives Cannot GET /dist/page… It's necessary to go back to `localhost:8080/dist' to make it work again…

What could I do to make this work?

Answer 1

I recommend you add the base option to specify the 'dist' directory as the root for the Connect server:

connect: {
    server: {
        options: {
            open: true,
            keepalive: true, 
            hostname: 'localhost',
            port: 8080,
            base: 'dist'
        }
    }
}

If that doesn't solve your problem, it will at least make the routes less confusing.

Answer 2

I found a solution here, using grunt connect-modrewrite

the grunt task is now:

server: {
    options: {
        port: 9000,
        livereload: 35729,
        hostname: 'localhost',
        open: true,
        middleware: function (connect) {
            return [
                        modRewrite(['^[^\\.]*$ /index.html [L]']),
                        connect.static('dist')
                    ];
                }
            }
        }