Coder Social home page Coder Social logo

Add 404 page about grunt-contrib-connect HOT 6 CLOSED

gruntjs avatar gruntjs commented on September 28, 2024
Add 404 page

from grunt-contrib-connect.

Comments (6)

stevenvachon avatar stevenvachon commented on September 28, 2024 1

Here's what helped me: https://gist.github.com/ssafejava/8704372

from grunt-contrib-connect.

iObject avatar iObject commented on September 28, 2024

I would LOVE this!

from grunt-contrib-connect.

shama avatar shama commented on September 28, 2024

I think custom 404 handling should happen in your own middleware instead. Thanks for the suggestion though!

from grunt-contrib-connect.

Siyfion avatar Siyfion commented on September 28, 2024

@shama Say you wanted to handle all 404s by returning the index.html page (which is quite often the case in a single page app), how would I go about doing this? Do I have access to the fs module?

I thought something like the below config might have worked, then I realised that it's only connect, not the full express framework.

      livereload: {
        options: {
          open: true,
          base: [
            '.tmp',
            '<%= yeoman.app %>'
          ],
          middleware: function(connect, options) {
            var middlewares = [];
            var directory = options.directory || options.base[options.base.length - 1];
            if (!Array.isArray(options.base)) {
              options.base = [options.base];
            }
            options.base.forEach(function(base) {
              // Serve static files.
              middlewares.push(connect.static(base));
            });
            // Make directory browse-able.
            middlewares.push(connect.directory(directory));
            // Handle 404
            middlewares.push(function(req, res, next) {
              res.sendfile(options.base[1] + '/index.html');
            });
            return middlewares;
          }
        }
      },

from grunt-contrib-connect.

shama avatar shama commented on September 28, 2024

@Siyfion You could build your own if you need something simple:

middleware: function(connect, options) {
  return [function(req, res) {
    var filename = '.' + req.url;
    if (!grunt.file.exists(filename)) filename = './404.html';
    res.end(grunt.file.read(filename));
  }];
},

But by that point it would probably be easier to use one of the many file serving libraries intended for serving files in a more production like environment (express, st, estatic, etc) or something like https://npmjs.org/package/grunt-express

from grunt-contrib-connect.

szalishchuk avatar szalishchuk commented on September 28, 2024

I had the same issue myself, after couple of hours of research, here is the solution I've ended up with.

from grunt-contrib-connect.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.