Migrate to ZEIT Now
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" } }
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 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.') })
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 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
.
/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!') }
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.` ) }
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.') }
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 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}.`) })
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 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 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}.`) }
now dev
to replicate the ZEIT Now Platform environment locally.