Currently, I am utilizing Grunt to manage my angular 1 application and grunt-connect to serve the website. However, I have encountered an issue where on refresh, there is no fallback mechanism in place which results in a 404 error and a blank white screen.
In the past, I have worked with Gulp which had a fallback feature with its connect plugin.
The main problem I am attempting to address is that upon refreshing the browser, the website disappears and I am presented with a 404 error along with a blank white screen.
As a newcomer to Grunt, I am still trying to figure out how to resolve this issue.
Here is the snippet of 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']);
};
Screenshot showing the bug: