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?

Is the `$locationProvider` being set to use HTML5 mode? Would look like `$locationProvider.html5Mode(true);`. If so, when in the app, the location URL is being modified as the route changes but the browser is not actually requesting that new URL from the server. On reload, the browser *is* asking for that URL and the server has no matching resource for it. — Tautologistics, Oct 24 '14 at 13:35
Thanks. Yes `html5Mode`is `true`. Is there anything I can do to make it work? (like on the remote server) — François Romain, Oct 24 '14 at 13:39

score 3 · Accepted Answer · edited May 23 '17 at 11:46

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')
                    ];
                }
            }
        }

score 0 · Answer 2 · answered Oct 24 '14 at 23:45

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.

Cannot GET / page

2 Answers2