Deploy a GraphQL Server with Zeit Now
1 votes
208 views
by Nikolas Burk

Introduction

Once you're done implementing your GraphQL server and have tested it enough locally to make it available to the general public, you need to deploy it to the web.

In this tutorial, you're going to learn how you can use Now - an amazing one-click deployment tool from the Zeit team - to deploy your GraphQL server.

The tutorial has two parts:

  1. Basic: Learn how to do a simple and straightforward deployment with now based on the node-basic GraphQL boilerplate project
  2. Advanced: Learn how to deploy with now with environment variables based on the node-advanced GraphQL boilerplate project

Install Now Desktop

The first thing you need to do is download the Now Desktop app and login.

Step 1

Open https://zeit.co/download in your browser and hit the DOWNLOAD-button.

Now Desktop includes the now CLI.

Part 1: Basic Deployment with Now

Bootstrap the GraphQL server

In this tutorial, you'll use the node-basic GraphQL boilerplate project as a sample server to be deployed. The easiest way to get access to this boilerplate is by using the graphql create command from the GraphQL CLI.

The boilerplate project is based on graphql-yoga, a lightweight GraphQL server based on Express.js, apollo-server and graphql-tools.

Step 2

If you haven't already, go ahead and install the GraphQL CLI. Then, bootstrap your GraphQL server with graphql create:

npm install -g graphql-cli
graphql create hello-basic --boilerplate node-basic
Step 3

When prompted where (i.e. to which Prisma server) to deploy your Prisma service, choose the Demo server option. Note that this requires you to authenticate with Prisma Cloud as that's where the Demo server is hosted.

The above graphql create command creates a new directory called hello-basic where it places the source files for your GraphQL server as well as the configuration for the belonging Prisma service.

You now have a proper foundation to deploy your GraphQL server.

Deploy the server with now

The now command uploads your source files and invokes the start script defined in your package.json to start the remote server.

Step 4

All you need to is navigate into the hello-basic directory and invoke now:

cd hello-basic
now

If this is the first time you're using now, it will ask you to authenticate with their service.

That's it, your GraphQL server is now deployed and available under the URL printed by the CLI 🎉 The URL looks similar to https://hello-basic-__ID__.now.sh (where __ID__ is a random ID for your service generated by now).

Part 2: Advanced: Using environment variables

Bootstrap the GraphQL server

Step 5

In your terminal, navigate into a new directory and download the node-advanced boilerplate as follows:

graphql create hello-advanced --boilerplate node-advanced
Step 6

Like before, when prompted where to deploy the service, choose the Demo server.

The service is now deployed to a demo server.

Deploy the server with now

This time, your service requires certain environment variables to be set. If you just ran now like in the previous section, the deployment would not succeed - or rather the Playground that would be deployed wouldn't work correctly because it doesn't know against which Prisma service it should be running. Because this Steprmation is now provided in terms of environment variables.

That's what you can use the --dotenv option of the now command for! It takes as an argument a .env file where environment variables are specified.

.env files are a convention / best practice for specifying environment variables. Many tools (such as Docker or other deployment tooling) "understand" .env files - and so does now when using the --dotenv flag.

Step 7

All you need to is navigate into the hello-advanced directory and invoke now with that argument:

cd hello-advanced
now --dotenv .env

If you deployed your Prisma service locally with Docker, your .env file will contain local references for the environment variables PRISMA_ENDPOINT (such as http://localhost:60000/hello-advanced/dev). In that case you can create another .env file (e.g. called .env.prod) and make sure PRISMA_ENDPOINT is set to the proper remote URL (of course that requires that you properly deploy the Prisma service to some public server on the web before) and then refer to that one during deployment:

now --dotenv .env.prod

You can find some documentation about how to handle environment variables and secrets when using now here.