{"id":15333,"library":"grunt-contrib-connect","title":"Grunt Connect Web Server","description":"grunt-contrib-connect is a Grunt plugin designed to start a static web server using the `connect` middleware framework. It is currently at stable version 5.0.1, with recent updates, including a major version bump (v5.0.0) in early 2024, indicating an active, though mature, maintenance cycle. This plugin enables developers to configure server parameters such as port, hostname, protocol (HTTP, HTTPS, or HTTP2), and a flexible base directory for serving files, including support for multiple roots and `serve-static` options. Its primary differentiation is its tight integration into the Grunt build system, facilitating seamless local development servers or serving static assets during build processes, often used in conjunction with other Grunt tasks like `grunt-contrib-qunit` for testing. The plugin wraps the popular `connect` server, providing a familiar API within the Grunt ecosystem.","status":"active","version":"5.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/gruntjs/grunt-contrib-connect","tags":["javascript","gruntplugin","server","connect","http"],"install":[{"cmd":"npm install grunt-contrib-connect","lang":"bash","label":"npm"},{"cmd":"yarn add grunt-contrib-connect","lang":"bash","label":"yarn"},{"cmd":"pnpm add grunt-contrib-connect","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This is a Grunt plugin and requires Grunt as a peer dependency to function.","package":"grunt","optional":false}],"imports":[{"note":"Grunt plugins are loaded via `grunt.loadNpmTasks` in the Gruntfile, not directly imported or required into application code.","wrong":"import { connect } from 'grunt-contrib-connect';\nconst connect = require('grunt-contrib-connect');","symbol":"connect","correct":"grunt.loadNpmTasks('grunt-contrib-connect');"},{"note":"Configuration for `grunt-contrib-connect` is typically nested under the `connect` key within `grunt.initConfig()`. While `grunt.config.set` works, `initConfig` is the standard approach for initial setup.","wrong":"grunt.config.set('connect', { /* ... */ });","symbol":"Task Configuration","correct":"grunt.initConfig({\n  connect: {\n    // options here\n  }\n});"}],"quickstart":{"code":"// Gruntfile.js\nmodule.exports = function(grunt) {\n  // Load the plugin that provides the 'connect' task.\n  grunt.loadNpmTasks('grunt-contrib-connect');\n  grunt.loadNpmTasks('grunt-contrib-watch'); // Often used alongside connect\n\n  grunt.initConfig({\n    connect: {\n      options: {\n        port: 9000,\n        hostname: 'localhost', // '0.0.0.0' for external access\n        livereload: 35729 // Set a specific port for live reload\n      },\n      dev: {\n        options: {\n          open: true, // Automatically open the browser\n          base: 'app' // Serve files from the 'app' directory\n        }\n      },\n      test: {\n        options: {\n          port: 9001,\n          base: ['temp', 'test'], // Serve from multiple directories\n          keepalive: true // Keep server alive for continuous testing\n        }\n      }\n    },\n\n    watch: {\n      options: {\n        livereload: '<%= connect.options.livereload %>'\n      },\n      files: [\n        'app/**/*.{html,css,js}',\n        '!app/vendor/**/*.js' // Ignore vendor files\n      ],\n      tasks: [] // No tasks, just trigger livereload\n    }\n  });\n\n  // Register a default task that runs connect and watch\n  grunt.registerTask('default', ['connect:dev', 'watch']);\n  grunt.registerTask('serve-test', ['connect:test']);\n};\n","lang":"javascript","description":"This quickstart demonstrates how to install `grunt-contrib-connect`, load it in your Gruntfile, and configure two `connect` tasks: one for development with live reload and automatic browser opening, and another for testing that keeps the server alive indefinitely. It also shows a basic `grunt-contrib-watch` setup, a common companion to `connect` for modern web development workflows."},"warnings":[{"fix":"Review your `protocol: 'http2'` configurations. Test your HTTP/2 endpoints thoroughly after upgrading to v5.x. Consult the `http2-wrapper` documentation if you encounter issues.","message":"Version 5.0.0 replaced `node-http2` with `http2-wrapper`. If your Gruntfile had custom configurations or relied on specific behaviors of the previous HTTP/2 implementation, this change might introduce breaking changes. Review HTTP/2 related options and ensure compatibility.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Only use `keepalive: true` for dedicated server tasks (e.g., `grunt serve`). For development workflows where other tasks need to run (e.g., `watch`), either omit `keepalive` or run `connect` in a separate `grunt-concurrent` task if you need it alongside other blocking tasks.","message":"Using the `keepalive: true` option will prevent any subsequent Grunt tasks from running, as the server will remain active indefinitely. This is intended behavior for long-running servers but can be a common pitfall.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If `hostname` is a wildcard and `open: true`, specify the full URL in the `open` option to override the default `localhost` behavior (e.g., `open: 'http://<your-ip>:<port>'`).","message":"When `hostname` is set to a wildcard like `'0.0.0.0'`, the `open` option will default to using `localhost` in the browser URL. If you need a specific IP or hostname opened, explicitly set the `open` option to a full URL (e.g., `open: 'http://192.168.1.100:9000'`).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Test your application with various browsers when using HTTP/2. If issues arise, consider reverting to `protocol: 'http'` or `https` for broader compatibility or for debugging purposes.","message":"Attempting to use `protocol: 'http2'` may lead to browser compatibility issues if the client browser does not fully support HTTP/2 or the specific server configuration. Ensure your client environment is up-to-date.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Change the `port` option in your Gruntfile's `connect` task to an unused port, or enable `useAvailablePort: true` (if supported and desired) to automatically find a free port.","cause":"The specified port in the `connect` task configuration is already occupied by another application or process on your system.","error":"Fatal error: Port 9000 is already in use by another process."},{"fix":"Ensure you have `npm install grunt-contrib-connect --save-dev` and `grunt.loadNpmTasks('grunt-contrib-connect');` in your Gruntfile.","cause":"The `grunt-contrib-connect` plugin has not been loaded correctly in your Gruntfile, or it's not installed.","error":"Warning: Task \"connect\" not found. Use --force to continue."},{"fix":"This typically means another server is running on the same port. Use `lsof -i :8000` (macOS/Linux) or `netstat -ano | findstr :8000` (Windows) to identify and terminate the conflicting process, or change the port in your Gruntfile.","cause":"This is a low-level Node.js error indicating that the server tried to bind to a network address and port that is already in use by another process.","error":"Error: listen EADDRINUSE: address already in use :::8000"}],"ecosystem":"npm"}