Prisma Edge functions

Modified from prisma-edge-functions. Thanks for their excellent work.

Edge functions are serverless functions at The Edge. They are written in JavaScript or TypeScript and run on a global network. It allows running server-side code geographically close to end users and enjoy lower latency.

This sample application shows how you can work with TiDB Cloud and edge functions. And here is a live demo build on vercel.

Set up TiDB Cloud

1. Go to TiDB Cloud and create a serverless tier cluster.
2. Navigate to your serverless tier cluster's dashboard.
3. Click Connect to set a password, you can also build the prisma connect string with this pattern mysql://USER:PASSWORD@HOST:PORT/edge_function?sslaccept=strict.

4. Connect to your serverless tier cluster and create a database named edge_function. This application will build on this database.

Set up Prisma Data Proxy

Edge environments only support HTTP-based connections. Therefore, we can not connect to TiDB Cloud which use long-lived TCP connections directly.

The Prisma Data Proxy is a proxy server for your database that allows you to interact with your database over HTTP, manages a connection pool, and ensures database connections are reused. It allows database access from Edge runtimes such as Vercel Edge Functions, Netlify Edge Functions and Cloudflare Workers.

1. sign in to the Prisma Data Platform and click New Project.

2. Fill in the Connection string with this pattern mysql://USER:PASSWORD@HOST:PORT/edge_function?sslaccept=strict. You can find the connection information in your TiDB Cloud console.

3. Leave the Static IPs as disabled because TiDB Cloud Serverless Tier is accessible from any IP address.

4. Select a Data Proxy region that is geographically close to your TiDB Cloud cluster location. Then click Create project.

   

5. Click Skip and continue to Data Platform to go to the Data Platform.

6. Click Data Proxy in Data Platform, then click Create a new connection string to create a new connection string that starts with prisma://. Copy and save it for later use.

   

7. Click Schema Viewer in Data Platform, you can fill in the repository and click Link Prisma schema after you fork a repository. It is optional, if you don't link to your repository, prisma data proxy will sync the schema automatically by introspection mechanism.

   

Deploy on Local

1. Fork this repository and clone it to your local machine.

   git clone https://github.com/${user_name}/nextjs-prisma-edge-example.git
   cd nextjs-prisma-edge-example
   

2. Optional: Link Prisma schema to the new repository you create. Follow Set up Prisma Data Proxy step 7.

3. Set DATABASE_URL environment variables.

   export DATABASE_URL=mysql://<User>:<Password>@<Endpoint>:<Port>/edge_function?sslaccept=strict
   

4. apply prisma migrate and seed.

   npx prisma migrate deploy
   npx prisma db seed
   

5. Replace the DATABASE_URL with the connection string you got from Prisma Data Platform.

   export DATABASE_URL=DATABASE_URL=prisma://aws-us-east-1.prisma-data.com/?api_key=•••••••••••••••••
   

6. Generate Prisma Client that will connect through the Prisma Data Proxy using HTTP.

   npx prisma generate --data-proxy
   

7. Start the app.

   npm run dev
   

🎉 Mission Completes.

The app is now running, navigate to http://localhost:3000/ in your browser to explore it.

Deploy on Vercel

The Deploy button will take you through Vercel's project creation flow. Vercel will help to clone this job to your own GitHub repository and automatically deploy it.

1. Click the Deploy button.
2. Click GitHub button and authenticate GitHub account.
3. Select your Git Scope and fill in Repository Name for your own GitHub repository.
4. Click Create to create the git repository.
5. Optional: Link Prisma schema to the new repository you create. Follow Set up Prisma Data Proxy step 7.
6. Enter the environment variables:
   • MIGRATE_DATABASE_URL: the tidb cloud connection string.
   • DATABASE_URL: the Prisma Data Proxy connection string.
7. Click Deploy.

🎉 Mission Completes.

Now wait for the deployment to complete, then you can view your site on the default domain generated by Vercel.

Deploy on Netlify

The Deploy to Netlify button will take you to Netlify's deployment page. Then Netlify will help to clone this job to your own GitHub repository and automatically deploy it.

1. Click the Deploy to Netlify button.
2. Click Connect to GitHub and authenticate GitHub account.
3. Fill in Repository name for your own GitHub repository.
4. Enter the environment variables:
   • MIGRATE_DATABASE_URL: the tidb cloud connection string.
   • DATABASE_URL: the Prisma Data Proxy connection string.
5. Click Save & Deploy.
6. [Optional]: Link Prisma schema to the new repository you create. Follow Set up Prisma Data Proxy step 7.

🎉 Mission Completes.

Now wait for the deployment to complete, then you can view your site on the default domain generated by Netlify.