Express API with a Static Frontend on ZEIT Now

Live Demo: https://express.now-examples.now.sh/

This example shows a pre-setup project including:

• An api directory, containing a single endpoint that retrieves the current time with Express built with the @now/node Builder.
• A www directory, containing static files such as index.html and style.css that show a frontend with information from the API.

Get Started with This Project

To get started with this project yourself, you can use Now CLI to initialize it.

From your terminal, use the following command to create a directory called my-express-project including the files of this example:

now init express my-express-project

Then, cd into your new project's directory (with cd my-express-project).

You now have a project, ready to go into development, staging, or production with Now. Your next step is up to you. Try one of the following:

Local Development

Using Now CLI, as you did to initialize this project, you can use the following command from your terminal to start a development environment locally which replicates the production environment on Now so you can test your new project:

now dev

Automatic Deployments with Git

Using either Now for GitHub or Now for GitLab, you can push this project to a Git repository and it will deploy automatically.

If on anything other than the default branch, with each push your project will be deployed, automatically, to a unique staging URL.

If pushing or merging to the default branch, your project will be deployed and aliased in a production environment, automatically.

Read more about the ZEIT Now Git Integrations:

• Now for GitHub
• Now for GitLab

Deploying from Your Terminal

Using Now CLI, you can also deploy to both staging and production environments from your terminal.

For a staging deployment, you can use the following one-word command:

now

Then, for production, including automatic aliasing, you can use the following:

now --target production

For more information on deploying, see the Deployment Basics documentation.

Configuration Breakdown

This example contains a now.json file which instructs Now how to treat this project when developing locally and deploying.

{
  "version": 2,
  "name": "my-express-project",
  "builds": [
    { "src": "www/**/*", "use": "@now/static" },
    { "src": "api/**/*.js", "use": "@now/node" }
  ],
  "routes": [{ "src": "/", "dest": "www/index.html" }]
}

The above instructs Now with:

• The version property, specifying the latest Now 2.0 Platform version.
• The name property, setting the name for the deployment.
• The builds property, allowing Now to use the @now/node Builder with a specific source target.
• The routes property, instructing Now to route the user to the www/index.html file when requesting the root path.

For more information on configuring Now, see the Configuration documentation.

Resources

Learn more about the ZEIT Now platform from our documentation, including:

• More information on deploying Express projects and some technical details.
• More information on the platform itself, including domains and aliasing and local development.