Grunt dev server to allow push states

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

};

Answers


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.


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.


Need Your Help

state began and ended not being triggered

ios swift uitapgesturerecognizer

I'm trying to make a button for Taking pictures and recording videos. When a long press is made it will record and 1 tap will take a picture. when button is being pressed i want to transform it to ...

nav menu won't line up horizontally

html css html-lists

i'm trying to get a horizontal navigation bar, but I can't get it to work right.