Hosting Your Database with Planetscale

Before we deploy our application to Vercel and push it up to production, we need to host our database. Our current setup works only locally, so we'll use Planetscale for its ease of use and generous free tier.

For this tutorial, we'll stick to a basic setup. Note that even for the free tier, Planetscale requires a valid credit card, but in my experience, they do not charge you.

Setting Up Your Planetscale Account

If you don't have a Planetscale account yet, go to planetscale.com, sign up, and follow along with the video. Once your account is created, you'll see your dashboard, where you can create multiple organizations. Each organization gets one free tier instance, but you need to provide unique credit card info for each one. Deleting organizations can be tricky, so be prepared to manage them carefully.

Creating a Database

To create a database, follow these steps:

1. On your dashboard, click the button to create a new database.
2. Name your database (e.g., "tasks DB").
3. Choose the free "hobby" tier and select your region. The region choice is not crucial for this setup.
4. Click "Create Database."

Once created, you'll be prompted to set up a connection. You can do this later by clicking "Skip for now." Your database setup may take some time, so be patient. If the loading spinner gets stuck, refresh your browser to check the status.

Connecting to Your Database

Once the setup is complete, connect to your database:

1. Go to your database dashboard and click "Connect."
2. Select the "Prisma" option to set up the connection.
3. Update your .env file with the new connection string.
4. In schema.prisma, replace the client and data source with the new connection details.

Do not delete your current model in schema.prisma. You only need to update the connection details.

Running Migrations

To push your local database to Planetscale, run the following command:

npx prisma db push

Planetscale works smoothly with Prisma, making the migration process straightforward.

Restarting Your Server

Once the migration is complete, restart your server:

npm run dev

Open Prisma Studio to verify the database setup:

npx prisma studio

After refreshing your application, you should see an empty tasks list, ready for new entries. Add a task to confirm everything is working correctly, now with data stored in the cloud.

Conclusion

With your database hosted on Planetscale, you can confidently push your application to production on Vercel. This setup ensures your data is accessible and managed efficiently, leveraging the benefits of cloud storage.