Migrate to ZEIT Now

Learn how to migrate your websites and APIs to the ZEIT Now Platform with zero configuration.

This guide highlights a set of common scenarios and how they are deployed with ZEIT Now.

Frontend Frameworks

When deploying frontend frameworks, ZEIT Now locates a build script in a package.json file at your project's root, then executes the script to build and deploy your project. If your project is building using this method, no changes are required.

{
  ...
  "scripts": {
    "build": "gatsby build",
    "dev": "gatsby develop"
  }
}

An example Gatsby build script inside a package.json.

When your project uses this method to build a frontend framework, you can deploy using Now CLI from your terminal:

now

Next, setup a Now for Git integration to deploy your projects automatically on each push, and add a custom domain to deploy your projects to.

Serverful vs. Serverless APIs

Serverful applications need to run consistently, watching for requests. Then, when requested, the application handles the request itself.

In serverful monolith style applications, routing is commonly handled by a single file. Inside of that file, all routes are declared, providing a single point of failure. Let's look at an Express.js example to illustrate this:

app.get('/', function(req, res) {
  res.send('GET homepage.')
})

app.post('/teams', function(req, res) {
  res.send('POST teams data.')
})

app.get('/teams/data', function(req, res) {
  res.send('GET teams data.')
})

A common routes configuration for serverful Express.js.

Moving to ZEIT Now and Serverless

With serverless, functionality is split into separate files, called Serverless Functions. When a path is requested, the individual Serverless Function is invoked. This avoids the whole application from having to wait and watch for requests, saving on time and resources.

Step 1: Creating an API Directory

The only requirement for Serverless Functions on Now, without advanced configuration, is that you place your files inside of an /api directory. By doing this, Now will be able to handle both the routing and building of these files – dramatically simplifying the process of developing an API.

When using the /api directory, routing is based on the filesystem, making it easy to keep track of endpoints simply by looking at the file tree. For example, the file /api/teams/zeit.js would be available at the endpoint /api/teams/zeit.

Note: When making calls to the /api directory, no file extensions are required.

For the above example, you would only need to place the /teams directory within the /api directory.

Step 2: Creating Files for Routes

With the /api directory created and the structure added, the next step is to add the required files for the endpoints.

As an example the first file – index.js – would sit at the root of the /api directory. This is equivalent to app.get('/', and the contents of the file would be:

module.exports = (req, res) => {
  res.send('Hello world!')
}

A Serverless Function in an example index.js file, within the /api directory.

The next file would be placed inside the /teams directory inside of the /api directory, also named index.js. This is equivalent to app.post('/teams'). The contents of the file would be:

module.exports = (req, res) => {
  res.send('This response would confirm a POST request to the teams endpoint.')
}

A Serverless Function in an example index.js file, within the /api/teams directories.

The last route would also be placed in the /teams directory, however, it would be named data.js - this is equivalent to app.get('/teams/data'). The contents of the file would be:

module.exports = (req, res) => {
  res.send('This response would send information about teams.')
}

A Serverless Function in an example data.js file, within the /api/teams directories.

Note: The endpoint for an index.js file can be invoked through the parent folder's path. You can opt-out of this behaviour by not using the index.js filename for API endpoints.

Bonus: Dynamic Routes

Using route parameters with your Serverless Functions is made easy with Now. Let's first take a look at another serverful Express.js example that uses a dynamic route.

app.get('/teams/:member', function(req, res) {
  res.send(`GET details about the ${req.query.member}.`)
})

A common routes configuration, that recieves and uses a route parameter, for serverful Express.js.

The above route uses the route parameter member, with Express.js making it available as part of the req.query object.

To convert this route for use inside of the /api directory with Now, we will once again place it inside the /teams directory. However, this time we will name it [member].js - this is what is called a Path Segment.

Path Segments allows your endpoints to receive route parameters and, just like Express, they are made available on the req.query object with the key specified in the filename.

Taking this into account, we can convert the above Express route for Now with the following code:

// api/teams/[member].js
module.exports = (req, res) => {
  res.send(`This response will send details about the ${req.query.member}.`)
}

A Serverless Function in an example [member].js file, within the /api/teams directories.

Note: When using Serverless Functions in your project, or advanced functionality, you need to use now dev to replicate the ZEIT Now Platform environment locally.


Written By
Written by msweeneydevmsweeneydev
Written by timothytimothy
Written by skllcrnskllcrn
on July 31st 2019