grunt-contrib-connect
Advanced tools
grunt-contrib-connect is a Grunt plugin that provides a simple web server for serving static files. It is commonly used in development workflows to serve files, enable live reloading, and proxy requests to other servers.
Serve Static Files
This feature allows you to serve static files from a specified directory. In this example, the server runs on port 9000 and serves files from the 'public' directory.
json
{
"connect": {
"server": {
"options": {
"port": 9000,
"base": "public"
}
}
}
}
Live Reload
This feature enables live reloading of the web page when files change. The server is configured to use live reload, and the watch task monitors changes in the 'public' directory.
json
{
"connect": {
"server": {
"options": {
"port": 9000,
"base": "public",
"livereload": true
}
}
},
"watch": {
"options": {
"livereload": true
},
"files": [
"public/**/*"
]
}
}
Proxy Requests
This feature allows you to proxy requests to another server. In this example, requests to '/api' are proxied to 'api.example.com' on port 80.
json
{
"connect": {
"server": {
"options": {
"port": 9000,
"base": "public",
"middleware": function(connect, options, middlewares) {
middlewares.unshift(require('grunt-connect-proxy/lib/utils').proxyRequest);
return middlewares;
}
},
"proxies": [
{
"context": "/api",
"host": "api.example.com",
"port": 80
}
]
}
}
}
http-server is a simple, zero-configuration command-line HTTP server. It is similar to grunt-contrib-connect in that it serves static files, but it is a standalone tool and does not require Grunt.
live-server is a simple development HTTP server with live reload capability. It is similar to grunt-contrib-connect's live reload feature but is a standalone tool that does not require Grunt.
browser-sync is a powerful tool for synchronizing browser testing. It provides live reloading, CSS injection, and synchronized browser testing. It offers more features compared to grunt-contrib-connect but can be used alongside Grunt.
Start a connect web server.
This plugin requires Grunt ~0.4.0
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-contrib-connect --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-contrib-connect');
Run this task with the grunt connect command.
Note that this server only runs as long as grunt is running. Once grunt's tasks have completed, the web server stops. This behavior can be changed with the keepalive option, and can be enabled ad-hoc by running the task like grunt connect:keepalive.
This task was designed to be used in conjunction with another task that is run immediately afterwards, like the grunt-contrib-qunit plugin qunit task.
Type: Integer
Default: 8000
The port on which the webserver will respond. The task will fail if the specified port is already in use. You can use the special values 0 or '?' to use a system-assigned port.
Type: String
Default: 'http'
May be 'http' or 'https'.
Type: String
Default: 'localhost'
The hostname the webserver will use.
Setting it to '*' will make the server accessible from anywhere.
Type: String or Array
Default: '.'
The base (or root) directory from which files will be served. Defaults to the project Gruntfile's directory.
Can be an array of bases to serve multiple directories.
Type: Boolean
Default: false
Keep the server alive indefinitely. Note that if this option is enabled, any tasks specified after this task will never run. By default, once grunt's tasks have completed, the web server stops. This option changes that behavior.
This option can also be enabled ad-hoc by running the task like grunt connect:targetname:keepalive
Type: Boolean
Default: false
Set the debug option to true to enable logging instead of using the --debug flag.
Type: Boolean or Number
Default: false
Set to true or a port number to inject a live reload script tag into your page using connect-livereload.
This does not perform live reloading. It is intended to be used in tandem with grunt-contrib-watch or another task that will trigger a live reload server upon files changing.
Type: Function
Default:
function(connect, options) {
return [
// Serve static files.
connect.static(options.base),
// Make empty directories browsable.
connect.directory(options.base),
];
}
Lets you add in your own Connect middlewares. This option expects a function that returns an array of middlewares. See the project Gruntfile and project unit tests for a usage example.
In this example, grunt connect (or more verbosely, grunt connect:server) will start a static web server at http://localhost:9001/, with its base path set to the www-root directory relative to the gruntfile, and any tasks run afterwards will be able to access it.
// Project configuration.
grunt.initConfig({
connect: {
server: {
options: {
port: 9001,
base: 'www-root'
}
}
}
});
If you want your web server to use the default options, just omit the options object. You still need to specify a target (uses_defaults in this example), but the target's configuration object can otherwise be empty or nonexistent. In this example, grunt connect (or more verbosely, grunt connect:uses_defaults) will start a static web server using the default options.
// Project configuration.
grunt.initConfig({
connect: {
uses_defaults: {}
}
});
You can specify multiple servers to be run alone or simultaneously by creating a target for each server. In this example, running either grunt connect:site1 or grunt connect:site2 will start the appropriate web server, but running grunt connect will run both. Note that any server for which the keepalive option is specified will prevent any task or target from running after it.
// Project configuration.
grunt.initConfig({
connect: {
site1: {
options: {
port: 9000,
base: 'www-roots/site1'
}
},
site2: {
options: {
port: 9001,
base: 'www-roots/site2'
}
}
}
});
Like the Basic Use example, this example will start a static web server at http://localhost:9001/, with its base path set to the www-root directory relative to the gruntfile. Unlike the other example, this is done by creating a brand new task. in fact, this plugin isn't even installed!
// Project configuration.
grunt.initConfig({ /* Nothing needed here! */ });
// After running "npm install connect --save-dev" to add connect as a dev
// dependency of your project, you can require it in your gruntfile with:
var connect = require('connect');
// Now you can define a "connect" task that starts a webserver, using the
// connect lib, with whatever options and configuration you need:
grunt.registerTask('connect', 'Start a custom static web server.', function() {
grunt.log.writeln('Starting static web server in "www-root" on port 9001.');
connect(connect.static('www-root')).listen(9001);
});
A default certificate authority, certificate and key file are provided and pre-
configured for use when protocol has been set to https.
NOTE: The passphrase used on the files is grunt
####### Advanced HTTPS config
If the default certificate setup is unsuitable for your environment, OpenSSL can be used to create a set of self-signed certificates with a local ca root.
### Generate the CA key
### Set a passphrase and remember what it is
openssl genrsa -des3 -out ca.key 2048
### Generate a CA root
openssl req -new -x509 -days 3650 -key ca.key -out ca.crt
### Generate the server key
openssl genrsa -out server.key 1024
### Generate the request to the self-signed CA root
openssl req -new -key server.key -out server.csr
### Generate the server certificate
openssl x509 -req -in server.csr -out server.crt -CA ca.crt -CAkey ca.key -CAcreateserial -days 3650
For more details on the various options that can be set when configuring SSL, please see the Node documentation for TLS.
Grunt configuration would become
// Project configuration.
grunt.initConfig({
connect: {
server: {
options: {
protocol: 'https',
port: 8443,
key: grunt.file.read('server.key').toString(),
cert: grunt.file.read('server.crt').toString(),
ca: grunt.file.read('ca.crt').toString(),
passphrase: 'grunt',
},
},
},
});
The connect plugin will emit a grunt event, connect.{taskName}.listening, once the server has started. You can listen for this event to run things against a keepalive server, for example:
grunt.registerTask('jasmine-server', 'start web server for jasmine tests in browser', function() {
grunt.task.run('jasmine:tests:build');
grunt.event.once('connect.tests.listening', function(host, port) {
var specRunnerUrl = 'http://' + host + ':' + port + '/_SpecRunner.html';
grunt.log.writeln('Jasmine specs available at: ' + specRunnerUrl);
require('open')(specRunnerUrl);
});
grunt.task.run('connect:tests:keepalive');
});
Task submitted by "Cowboy" Ben Alman
This file was generated on Sun Sep 01 2013 21:18:08.
FAQs
Start a connect web server
The npm package grunt-contrib-connect receives a total of 0 weekly downloads. As such, grunt-contrib-connect popularity was classified as not popular.
We found that grunt-contrib-connect demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.