April 06, 2022

Fullstack App With TypeScript, PostgreSQL, Next.js, Prisma & GraphQL: Deployment

This article is the final part of the course where you build a fullstack app with Next.js, GraphQL, TypeScript, Prisma, and PostgreSQL. In this article, you will learn how to deploy your app to Vercel.

Table of Contents

Introduction

In this course you will learn how to build "awesome-links", a fullstack app where users can browse through a list of curated links and bookmark their favorite ones.

In part-4, you added support for image uploads using AWS S3. In this part, you will set up the Prisma Data Proxy to handle database connections in a serverless environment and then deploy the app to Vercel.

Prerequisites

To follow along with this tutorial, you will need an account on GitHub and a Vercel. You will also need a hosted PostgreSQL database. The Prisma Data Platform can automatically provision a database on Heroku for you when setting up your project.

Fork the repository

You can find the complete source code for the course on GitHub. To follow along, fork the repository to your own GitHub account.

If you're following along from the previous parts, ensure you have added your code to source control and pushed it to GitHub.

Database access in serverless environments with the Prisma Data Proxy

Serverless functions are ephemeral and short-lived – stateless. When traffic to your application spikes, the number of instances of a serverless function also goes up. On the other hand, database connections are stateful and require a TCP connection between the application and the database.

When a serverless function needs to access a database, it establishes a connection to it, submits a query, and receives the response from the database. The response data is then delivered to the client that invoked the serverless function, the database connection is closed and the function is torn down again.

When there's a traffic spike, each serverless function will spawn a new database connection.

Traditional databases such as PostgreSQL and MySQL typically have a database connection limit that can be easily exhausted when there's a traffic spike to your application. When the connection limit is exhausted, the requests to your application would start failing.

A solution to this problem is using a database connection pooler, such as pgBouncer for PostgreSQL or the Prisma Data Proxy.

The Prisma Data Proxy is a proxy server for your database that manages a connection pool and ensures existing database connections are reused. This prevents incoming user requests from failing and improves your app's performance.

Getting started with the Prisma Data Proxy

Go to https://cloud.prisma.io/projects/create and log in using GitHub. Give your project a name, select the Import a Prisma repository option and pick the "awesome-links" repository you forked or created. Select Next after filling out the details.

Creating a new project on the Prisma Data PlatformCreating a new project on the Prisma Data Platform

In the "Configure environment" step, you can either provision a new database or use your own. You can provision a PostgreSQL database on Heroku or a MySQL database on PlanetScale. If you choose to use your database, provide your database's connection string.

Provisioning a PostgreSQL database will create a new Heroku app and a PostgreSQL addon on your Heroku account. Provide a unique name for your Heroku app.

Note: If you are on Heroku's free plan, make sure that you have not exceeded the 5 applications limit. Otherwise, you will encounter an error.

In the Prisma Data Proxy configuration step, select the closest location to your database for better performance. Once you're done, select Create project.

Provision a new database using HerokuProvision a new database using Heroku

Once your project is ready, the "Deploy project" page will list two connection strings with some usage details:

  1. The first is the Prisma Data Proxy URL – you will use this one when deploying the app to Vercel.
  2. The second is your database's connection string you can use to run migrations as you evolve your database schema.

Copy the Prisma Data Proxy URL as you won't be able to see it again, but you can create more later.

Prisma Data Proxy environment variablesPrisma Data Proxy environment variables

Update the application

Enable the dataProxy Preview feature

Before you deploy your application, you will need to make a few updates to your application to make it work with the Prisma Data Proxy.

First, update your .env file by adding the renaming the existing DATABASE_URL to MIGRATE_DATABASE_URL. Create a DATABASE_URL variable and set the Prisma Data Proxy URL from the previous step here:

# .env
MIGRATE_DATABASE_URL="postgres://"
DATABASE_URL="prisma://"

The MIGRATE_DATABASE_URL will be used for making database schema changes to your database.

Next, update the Prisma schema by including dataProxy Preview feature in the generator block.

/// prisma/schema.prisma
generator client {
provider = "prisma-client-js"
previewFeatures = ["dataProxy"]
}

Create new scripts in package.json

Next, update your package.json file by updating the build script and add add a prisma:generate

"scripts": {
//... existing scripts
"vercel-build": "prisma:generate && next build",
"prisma:generate": "PRISMA_CLIENT_ENGINE_TYPE=\"dataproxy\" prisma generate",
},
  • prisma:generate – Generate Prisma Client that uses the Prisma Data Proxy
  • vercel-build – Generate Prisma Client and build the application

Skip type-checking in production

Create a next.config.js file in the root of your project and add the following code snippet to skip type-checking as Vercel is building app:

// next.config.js
module.exports = {
typescript: {
// !! WARN !!
// Dangerously allow production builds to successfully complete even if your project has type errors.
ignoreBuildErrors: true,
},
}

Update Apollo Client's API URI

Next, update the API's URI to /api/graphql in Apollo Client's configuration:

// lib/apollo.ts
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { relayStylePagination } from '@apollo/client/utilities';
export const client = new ApolloClient({
uri: '/api/graphql',
cache: new InMemoryCache({
typePolicies: {
Query: {
fields: {
links: relayStylePagination(),
},
},
},
}),
});

Deploy the app to Vercel

Log in to your Vercel account and create a new project by clicking New Project.

Creating a new project on VercelCreating a new project on Vercel

Next, import the "awesome-links" repository.

Importing a Git repositoryImporting a Git repository

Finally, add your environment variables.

Refer to the .env.example file in the repository for the environment variables.

Note: Make sure that you are using the Data Proxy connection string when setting the DATABASE_URL environment variable.

Once you've added the environment variables, click Deploy.

Configuring environment variablesConfiguring environment variables

Once your application is successfully deployed, copy its URL and:

  • Update the Allowed Callback URLs and Allowed Logout URLs on the Auth0 Dashboard with the URL of your application
  • Update your Auth0 Action with the URL of the deployed application
  • Update the AllowedOrigins Cross-origin Resource Sharing (CORS) policy on S3 with the URL to your deployed application
  • Update the AUTH0_CALLBACK_URL environment variable with the URL of your deployed application
  • Redeploy the application to production

If everything works correctly, you will be able to view your deployed application.

Summary

This article concludes the series. You learned how to build a full-stack app using modern tools that offer great developer experience and leveraged different services to get your application production-ready.

You:

  • Explored database modeling using Prisma
  • Built a GraphQL API using Apollo Server and Nexus
  • Added authentication using Auth0
  • Added image upload using AWS S3.
  • Used the Prisma Data Proxy to handle database connection pooling
  • Deployed your Next.js application to Vercel

You can find the complete source code for the app on GitHub. Feel free to raise issues or contribute to the repository if you find any bugs or want to make improvements.

Feel free to reach out on Twitter if you have any questions.

Join the discussion

Follow @prisma on Twitter

Don’t miss the next post!

Sign up for the Prisma newsletter