Migrate to ZEIT Now

Migrate your websites and APIs to the ZEIT Now Platform with zero configuration.

Frontend Frameworks

ZEIT Now tries to automatically detect the frontend framework you’re using for your project and configure the project settings for you. If you’d like to override the settings or specify a different framework, take a look at our documentation on build settings.

Custom Domains

To migrate your domains to ZEIT Now, refer to the following documentation:

Serverful vs. Serverless APIs

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

In serverful monolith style apps, routing is commonly handled by a single file. 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. Instead of a file or process growing monolithically, this gives us the ability to break down the app into independently scalable parts.

When a path is requested, the Serverless Function for that path is invoked. This avoids the whole app 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 ZEIT Now, without advanced configuration, is that you place your files inside of an /api directory. By doing this, ZEIT 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 from the /api route!')
}

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') and could be used to create a new team. The contents of the file would be:

module.exports = (req, res) => {
  const { name } = req.body
  res.send(
    `This response would create a new team called ${name}, using a POST request.`
  )
}

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 behavior by not using the index.js filename for API endpoints.

Bonus: Dynamic Routes

Using route parameters with your Serverless Functions is made easy with ZEIT 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 receives 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 ZEIT Now, we will once again place it inside the /teams directory. However, this time we will name it [member].js - this is called a Path Segment.

Path Segments allow 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 ZEIT 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