Grunt dev server to allow push states

Question

I am trying to set up my grunt server to allow push states.

After countless google searches and reading SO posts I cannot figure out how to do this.

I keep getting errors like the one below.

Does anyone have any ideas how to fix this?

No "connect" targets found. Warning: Task "connect" failed. Use --force to continue.

It appears to me below that I have defined targets with the line

open: {
    target: 'http://localhost:8000'
 }

See complete code below:

var pushState = require('grunt-connect-pushstate/lib/utils').pushState;

module.exports = function(grunt) {

  // Project configuration.
    grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

        connect: {
        options: {
          hostname: 'localhost',
          port: 8000,
          keepalive: true,
          open: {
             target: 'http://localhost:8000'
          },
          middleware: function (connect, options) {
            return [
              // Rewrite requests to root so they may be handled by router 
              pushState(),

              // Serve static files 
              connect.static(options.base)
            ];
          } 
        }
      }
    });

  grunt.loadNpmTasks('grunt-contrib-uglify'); // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-connect'); // Load the plugin that provides the "connect" task.

  // Default task(s).
  grunt.registerTask('default', [ 'connect']);

};

Situations like this are why I switched to `gulp`. Also, the package is depricated. — Michael Cole, Sep 02 '16 at 14:46
@MichaelCole running into the same issues with `gulp`! any ideas of how to do it with `gulp`? It appears that not even google knows! — , Sep 02 '16 at 15:04
Sorry, I can't help. This is pretty old tech - I've built MEAN apps and didn't need this. Are you sure you need it? — Michael Cole, Sep 02 '16 at 15:08
I want a way of allowing push states on my local server. Do you know any other way of getting around this? I am no expert — , Sep 02 '16 at 15:11

score 0 · Answer 1 · edited May 23 '17 at 12:22

Push states are already included in most SPA frameworks, so you might not need this unless you're building a framework.

Angular: https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag

React: How to remove the hash from the url in react-router

This looks like a grunt build script to compile an application to serve. So I'm not exactly sure how you'd use pushStates in the build process. You may be trying to solve the wrong problem.

score 0 · Answer 2 · answered Sep 02 '16 at 19:25

Don't bother with grunt to deploy a local dev pushstate server for your SPA.

In your project directory, install https://www.npmjs.com/package/pushstate-server

npm i pushstate-server -D

Then to launch it, add a script entry in the package.json of your project:

… "scripts": { "dev": "pushstate-server" } …

This way you can now start it running npm run dev

All the requests which would normally end in a 404 will now redirect to index.html.

Grunt dev server to allow push states

2 Answers2