How to Deploy an Apollo GraphQL Server with Vercel
There are many options when it comes to the deployment of an Apollo GraphQL server such as AWS Lambda, Microsoft Azure, Google Cloud Functions, and Heroku. Guides for deployment using these technologies can be found here.
In this blog post, I will be showing a different method of deployment for an Apollo Express server: Vercel.
Vercel has created a platform for deployment that is incredibly fast and has several built-in features including an interactive dashboard and continuous integration with GitHub organizations or individual accounts. The Vercel CLI simplifies the process of deployment further. Since I could not find a written guide on the deployment process of an Apollo Express Server using Vercel, I decided to create my own from my personal experience.
Prerequisites:
- Vercel Account
- Apollo Express Server
- Vercel CLI Installation Instructions
Instructions
For this tutorial, I used TypeGraphQL to bootstrap my GraphQL schema and type definitions.
1. Configure the Apollo GraphQL server for production
For demonstration purposes, I enabled playground and introspection in production by setting these values to true within the options object when initializing the Apollo server. These options are false within the production environment to restrict public access to your GraphQL API.
Inside of the applyMiddleware method within the ApolloServer class, you must explicitly set the path to be able to access your API in a production environment.
2. Create a vercel.json file
Inside of your root directory create a file and name it vercel.json. This is our configuration file for deployment through Vercel
To deploy an Express server on the Vercel platform we can use the builds property. For more information on all available configurations of the vercel.json file visit here.
Inside of the file create a JSON object with a builds property like shown below:
If you are using TypeScript you must provide the paths to your output directory. In this tutorial, my tsconfig.json is set to compile to an output directory: public/dist like so:
Now we are all set to deploy!
3. Vercel CLI
Run this script in the root directory of your server repository:
vercel
Now you will be guided through a selection of configuration options for your Vercel deployment.
Make sure this is your root directory with the vercel.json file
It will then ask for your account or team to deploy to, an existing project, a name for the project if not existing already, and the directory in which your express server is located.
After these options have been configured you will be provided a link to the Vercel dashboard where you can set your start, build, and dev commands if not already present inside your package.json. You can also monitor the build status and check the logs of your deployed serverless function for errors.
Once the deployment is finished you can visit your GraphQL endpoint to see your playground if you configurated that option:
Conclusion
And that's it!
Although Vercel is more commonly utilized in deploying front-end frameworks utilizing serverless cloud functions, Vercel can be a simple yet powerful alternative for Apollo GraphQL APIs.
Thank you for reading my blog post!
