Using TiDB Serverless and Vercel to Streamline App Development

TiDB is an advanced open-source, distributed SQL database with online transactional and analytical processing capabilities. TiDB Serverless is a cloud DBaaS deployment option of TiDB designed for developers to build applications in a much smarter, faster, simpler, and always-available way. Vercel is the creator and maintainer of Next.js and an end-to-end platform for front-end developers to quickly develop, preview, ship, and iterate web applications. With the integration of TiDB Severless and Vercel, web application development will become much faster, more streamlined, and more automated.

In this tutorial, we’ll describe step by step how to quickly create an all-in-cloud bookstore website using TiDB Serverless and Vercel with a traditional object–relational mapping (ORM) based API development.

Things you should know before you get started

Vercel can host websites with serverless/edge functions, which is different from that with traditional APIs. The key differences between a serverless function and a traditional API are as follows :

A serverless function is designed to run a specific piece of code in response to an event; they execute on-demand and scale automatically without need for infrastructure management. While a traditional API provides a more generic interface that follows a request-response model allowing clients to directly interact with the system or service.
A serverless function is usually associated with a specific cloud provider, while a traditional API can be implemented on any infrastructure.
Serverless functions facilitate faster development with shorter deployment cycles, while traditional APIs may require more development time to set up infrastructure and manage scaling, potentially slowing down the deployment process.This tutorial is for developers who plan to build web applications quickly with small amounts of data.

Prerequisites

Before you get started to build your web applications with TiDB Serverless and Vercel, make sure you’ve already registered for the following:

A TiDB cloud account.
A GitHub account.
A Vercel account that you can log into with your GitHub account.

Create the TiDB Serverless cluster

In this section, we’ll create a Serverless Tier TiDB Cloud cluster step by step.

Sign in to your TiDB Cloud.
Follow the on-screen instruction to create a Serverless Tier cluster for free in seconds.
Click the cluster name to enter the cluster interface. In the cluster interface, click Connect to access the connection details. Make sure to note down the values of Host, Port, and User from the Connection section. We will use this information later to configure the ORM connection in our code.

Deploy the book-store website using a Cloud IDE

Now that we have successfully created our TiDB Serverless cluster, let’s see how we can accelerate the development efforts by using collaborative development on the cloud. We recommend using GitHub Codespace as an integrated development environment (IDE). GitHub Codespaces is a cloud-based development environment that provides accessibility, consistency, scalability, collaboration, and isolation.

Set up the Workspace

You can create a workspace in GitHub Codespace by following the steps below:

Navigate to the GitHub repository for the bookstore.
Under Code – Codespaces tab, click the Create codespace on the main button as shown below. This should open and load the files and folders within the GitHub repository in a new browser window.
Allow the default terminal to settle on “/workspaces/tidb-prisma-vercel-demo (main)” prompt. You will see the Bookshop Demo interface in the IDE as shown below:

Verify Connection to the TiDB Serverless cluster

In the terminal, verify that you can connect to your TiDB Serverless cluster. Using the information we obtained in Step 3, execute the following commands:

sudo apt updatesudo apt install -y mysql-clientmysql --connect-timeout 15 -u <user_name> -h <host> -P 4000 -D <database_name> --ssl-mode=VERIFY_IDENTITY --ssl-ca=/etc/ssl/certs/ca-certificates.crt -p<your_password>

Create a Bookstore Schema

When we develop an application, an ORM framework is always helpful to make the code more maintainable, more secure, and more efficient. In this demonstration, we’ll use Prisma, a popular TypeScript ORM, as an example to create a bookstore schema. You may also use other ORMs to build your own applications.

Install dependencies, open a new terminal in the Cloud IDE and execute the following command:
```
yarn
```
To configure the DATABASE_URL environment variable in your runtime, execute the following command in your terminal. You will also use the information we obtained in Step 3 of “Create the TiDB Serverless cluster”.
```
export DATABASE_URL='mysql://<user_name>:<password>@<host>:4000/<database_name>?pool_timeout=60&sslaccept=accept_invalid_certs'
```
Initialize the database and tables in TiDB Serverless by executing the command below:
```
yarn prisma:deploy
```

Launch the project in your cloud IDE

Initiate a development preview by executing the following command:

yarn vercel-buildyarn start

Once port 3000 becomes available, you’ll receive a prompt. Click Open in Browser to preview the live demo.

Port 3000 is available

With the completion of all the steps, the project has been successfully initialized with TiDB Serverless. We now have an established database connection and a suite of predefined tables. To perform operations like selecting, updating, or deleting, please refer to the Prisma Vercel API code. Within this code base, you’ll discover how to interact with the TiDB Serverless database and its tables through Prisma, as well as how to encapsulate these interactions into APIs.

Deploy on Vercel via TiDB Serverless Integration

In a typical deployment workflow, there’s often a need for multiple environments like development, staging, and production. However, manually configuring these environments can be time-consuming and error-prone for developers, particularly when frequent configuration updates are required. To save you from these mundane tasks, we recommend utilizing TiDB’s cloud integration directly from the Vercel marketplace. Setting up and launching a project requires just a few clicks. Moreover, we offer our demonstration code as a TiDB Cloud Starter Template for your convenience.

Now, let’s proceed to deploy your application using a Vercel Template

Visit the TiDB Cloud Starter Template and click Deploy. You will be instructed to create a GitHub repository. Simply provide a name for the repository and Vercel will create a repository if it does not exist.
After creating the Git repository, click on the ‘Add’ button located next to ‘TiDB Cloud’ within the ‘Add Integrations’ section. In the popup window, select the target Vercel Project, TiDB Organization, Project, and Cluster name (you can opt to leave these three fields with their default values).
Select Prisma for the Framework, and then click Add Integration. This will automatically navigate you back to Vercel’s integration screen, where you can observe a deployment in progress.
After a successful deployment, click the Continue to Dashboard button. This will direct you to the dashboard page, where you can then click the Visit button located on the right side to verify whether your application has been deployed successfully.
Verify auto-generated environment variables by clicking on Settings > Environment Variables. Thanks to the integration, all connection information is automatically configured for you.

Conclusion

In this short tutorial, we showed the ease and effectiveness of utilizing TiDB Serverless and Vercel integration to streamline the development process with:

TiDB Serverless, which simplifies the process and reduces the learning curve for developers.
ORM compatibility, which offers seamless integration with popular ORM systems.
Cloud IDE, which utilizes codespaces to provide a more efficient development experience.
TiDB Serverless’ integration with Vercel, which provides one-click configuration to simplify setup.

These enhancements reflect our ongoing commitment to creating a more developer-friendly ecosystem within TiDB Serverless. In a subsequent blog post, we will also show you alternative ways to build a bookstore using TiDB Cloud’s Data Services, which enable you to access TiDB cloud data via HTTPS requests using a custom API endpoint.

If you are interested in the source code of our virtual bookstore, check out the demo’s GitHub code repository. If you have any questions or feedback, feel free to contact us through our Twitter, LinkedIn, or our Slack Channel.

Discover how TiDB Serverless can streamline your app development by spinning up a free cluster instantly!