Note: This documentation is for version 1 of the Now platform. For the latest features, please see the version 2 documentation. If you have yet to upgrade, see the upgrade guide.

Configuring Static Applications on Now

In order to change the default behavior of a static deployment running on Now, there are configuration options that can be used within a static property within a now.json file.

Following is a list of configuration options that enable static deployments to be controlled flexibly.

By default, the current working directory will be served. To serve a specific path, use this option to pass a custom directory relative to the current working directory.

Usage:

{
  "static": {
    "public": "dist"
  }
}

An example of setting the directory `./dist` as the path to serve content from, set within a `now.json` file.

Default: true

By default, .html extensions are removed from URLs.

Usage:
To disable this feature, pass false as the value.

{
  "static": {
    "cleanUrls": false
  }
}

An example of disabling the `cleanUrls` feature from within a `now.json` coniguration file.

Restrict this feature to certain paths using the following:

{
  "static": {
    "cleanUrls": [
      "/app/**"
    ]
  }
}

An example of restricting the `cleanUrls` feature to the `app` directory from within a `now.json` coniguration file.

rewrites allow to serve a file under a different path than that file is under. For example, to serve a file named edit.html under the URL projects/*/edit. This will make the edit.html file accessible through any URL following the pattern that was configured, such as projects/acme/edit.

Usage:
Using the above example, setting up a rewrite from projects/*/edit to server edit.html:

{
  "static": {
    "rewrites": [
      { "source": "projects/*/edit", "destination": "/edit.html" }
    ]
  }
}

An example of a `rewrite` setup within a `now.json` configuration file that points the path `projects/*/edit` to the `edit.html` file.

This is very beneficial for single page applications (SPAs), where the user should be directed to the index.html file.

{
  "static": {
    "rewrites": [
      { "source": "app/**", "destination": "/index.html" }
    ]
  }
}

An example of setting up the `rewrites` option to route requests from any path starting with `app/` to `/index.html`.

Another feature of the rewrites option is "routing segments". When a route is requested using this method, Now can pass a particular section of that route to the file that's intended to be served. For example, to route a user from projects/acme/edit to /edit-acme.html, the following method is used:

{
  "static": {
    "rewrites": [
      { "source": "/projects/:id/edit", "destination": "/edit-:id.html" }
    ]
  }
}

An example of a `rewrite` option setup that routes users from `/projects/[any ID]/edit` to the file `/edit-[any ID].html`.

The redirects option provides a method to redirect users from one path to another, or to an external URL.

Usage:
Using the above example, setting up a rewrite from projects/*/edit to server edit.html:

{
  "static": {
    "redirects": [
      { "source": "/old", "destination": "/new" }
    ]
  }
}

An example of setting up a redirect from the route `/old` to `/new`.

By default, all redirects are carried out with the status code 301, but this behavior can be adjusted by setting the type property directly on the object.

{
  "redirects": [
    { "source": "/old", "destination": "/new", "type": 302 }
  ]
}

An example of setting up a redirect from the route `/old` to `/new` using the status code `302`.

Like rewrites, redirects support "routing segments".

{
  "redirects": [
    { "source": "/old/:id", "destination": "/new/:id" }
  ]
}

An example of setting up a redirect from the route `/old/[any ID]` to `/new/[any ID]`. For example, `/old/12` would redirect to `/new/12`.

The headers configuration option gives the ability to set custom headers and to overwrite the default headers.

Usage:
For example, when using the Now CDN, you might want to set custom caching headers since we automatically set them for static deployments.

{
  "static": {
    "headers": [
      {
        "source": "**/*.@(jpg|jpeg|gif|png)",
        "headers": [{
          "key": "Cache-Control",
          "value": "max-age=7200"
        }]
      }, {
        "source": "404.html",
        "headers": [{
          "key": "Cache-Control",
          "value": "max-age=300"
        }]
      }
    ]
  }
}

An example of setting Cache-Control header for image files and the `404.html` page.

Note: If the ETag header is defined with this configuration option, the handler will automatically reply with status code 304 for the path if a request comes in with a matching If-None-Match header.

Another example is to use the Accept header to serve a different kind of content. In order to serve the contents of directories, errors, and other meta information as JSON instead of HTML, the following configuration can be used:

{
  "static": {
    "headers": [
      {
        "source": "**",
        "headers": [{
          "key": "Accept",
          "value": "application/json"
        }]
      }
    ]
  }
}

For a path that is not a file but a directory, Now will automatically render a list of all the files and directories contained inside that directory.

Usage:
This option can be disabled by passing false to the option from within a now.json configuration file.

{
  "static": {
    "directoryListing": false
  }
}

Disabling `directoryListing` for an app in a `now.json` configuration file.

It can also be used to restrict listing to certain paths:

{
  "static": {
    "directoryListing": [
      "/assets/**",
      "/!assets/private"
    ]
  }
}

Enabling `directoryListing` for all directories under the `/assets/` path, but disabling it for the `/assets/private` path.

To prevent listing certain files in the directory listing that Now provides, if it is enabled, use the unlisted property.

Usage:
This option can be disabled by passing false to the option from within a now.json configuration file.

{
  "static": {
    "unlisted": [
      ".git",
      ".DS_Store"
    ]
  }
}

Configuring `unlisted` to prevent the `.git` and `.DS_Store` files from showing in directory listings.

Note: The above example shows the default excluded files from directory listings.

By default, Now tries to make assumptions for whether to add or remove trailing slashes. To explicitly enable or disable them, pass a boolean to the configuration option.

Usage:

{
  "static": {
    "trailingSlash": true
  }
}

Configuring Now to add a trailing slash to paths. For example, accessing `/test` will result in a 301 redirect to `/test/`.

By default, if a deployment contains more than one file, Now will not render a file if it is the sole content of a directory. To enable the file to be rendered, pass true to the renderSingle property.

Usage:

{
  "static": {
    "renderSingle": true
  }
}

Configuring Now to render files if they are the sole content of directories.