I'm using Grunt for my angular 1 app and grunt-connect to run the website, but on refresh it doesnt have a fallback so I get a 404 and white screen

Question

I'm using Grunt for my angular 1 app and grunt-connect to run the website, but on refresh it doesnt have a fallback so I get a 404 and white screen.

I've used gulp before and that had a fallback with its connect plugin.

The issue I'm trying to solve is when I refresh browser I loose the website and get a 404 and white screen.

I'm very new to grunt.

Heres my current grunt code:

module.exports = function(grunt) {

        //Configures each plugin:   
        grunt.initConfig({

        //This is the connect bit:
         connect: {
            website: {
                port: 8000,
                base: 'app'
            }
         },

          sass: {                              // Task 
            dist: {                            // Target 
              options: {                       // Target options 
                style: 'expanded'
              },
              files: {                         // Dictionary of files 
                'app/styles/styles.css': 'app/styles/base.scss'   // 'destination': 'source'
              }
            }
          },
          cssmin: {
              target: {
                files: [{
                  expand: true,
                  cwd: 'app/styles',
                  src: ['*.css', '!*.min.css'],
                  dest: 'app/styles',
                  ext: '.min.css'
                }]
              }
           },   
           watch: {

                    css: {
                        files: 'app/styles/base.scss',
                        tasks: ['sass'],
                        options: {
                          livereload: {
                            host: 'localhost',
                            port: 8000
                          },
                          spawn: true,
                          interrupt: true,
                          debounceDelay: 250,
                          reload: true
                        },
                    }    
            } 
        });      

        //Loads libruaries:
        grunt.loadNpmTasks('grunt-contrib-sass');
        grunt.loadNpmTasks('grunt-contrib-cssmin');
        grunt.loadNpmTasks('grunt-contrib-watch');
        grunt.loadNpmTasks('grunt-contrib-jshint');
        grunt.loadNpmTasks('grunt-connect');

        //grunt.registerTask('default', ['sass', 'cssmin', 'jshint', 'connect', 'watch']);

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

Screen grab of bug:

Answer 1

Your connect is missing options..

 connect: {
            website: {
                port: 8000,
                base: 'app',
                keepalive: true,
                livereload: true
            }
         },