Setting Up Your Database

Before you can continue working on your dashboard, you'll need some data. In this chapter, you'll be setting up a PostgreSQL database using `@vercel/postgres`. If you're already familiar with PostgreSQL and would prefer to use your own provider, you can skip this chapter and set it up on your own. Otherwise, let's continue!

Create a GitHub repository

To start, let's push your repository to Github if you haven't done so already. This will make it easier to set up your database and deploy.

If you need help setting up your repository, take a look at this guide on GitHub.

Good to know:

• You can also use other Git provider like GitLab or Bitbucket.
• If you're new to GitHub, we recommend the GitHub Desktop App for a simplified development workflow.

Create a Vercel account

Visit vercel.com/signup to create an account. Choose the free "hobby" plan. Select Continue with GitHub to connect your GitHub and Vercel accounts.

Connect and deploy your project

Next, you'll be taken to this screen where you can select and import the GitHub repository you've just created:

Name your project and click Deploy.

By connecting your GitHub repository, whenever you push changes to your main branch, Vercel will automatically redeploy your application with no configuration needed. When opening pull requests, you'll also have instant previewswhich allow you to catch deployment errors early and share a preview of your project with team members for feedback.

Congratulations! 🎉 Your project is now deployed in vercel BUT AS YOU CAN SEE IT DOESN'T WORK YET. 💩

If you click on the link, you'll see that the project is deployed but your page display an error 404.

Don't worry 😟, this is normal because we haven't yet installed the Vercel Edge Adapter . Let's do that now. 👇

Install the Vercel Edge Adapter

To install the Vercel Edge Adapter, it's very simple, run the following command in your terminal:

This command open a interactive script, you can see all the modifications that will be made.

Press `Enter` to start the installation.

Great 🎉, you have add Vercel Edge Adapter on your project. Now, push your changes to GitHub for create new deployment on Vercel.

Your project SHOULD now be deployed on Vercel, but you'll see that it still doesn't work!!! 💩 This time, the deployment failed completely. 😱

Resolve the error by following the next steps 👇

Resolve Vercel error

If you go to the deployments page of your project on Vercel, you'll see that the deployment failed.

Click on the failed deployment to see the error details.

As you can see the error is related to an unsupported module by Vercel. To resolve this issue, I found the following solution on the Official Qwik Discord

In the `package.json` file of your project, move the dependency `@qwikest/icons` from the `dependencies` section to the `devDependencies` section.

Then, push your changes to GitHub to create a new deployment on Vercel.

And there you go, your project is now deployed on Vercel and working correctly. 🎉🚀

Personal note:

• I had a lot of trouble and wasted a lot of time deploying Qwik's projects on Vercel. I don't know the exact cause of this error and therefore cannot explain it to you, if you yourself encounter deployment problems on Vercel, I advise you to join the Official Qwik Discord and ask for help. Community members are very responsive and will help you solve your problem.
• You can also join Learn Qwik Discord, I would be happy to help you if I can. 😁

Create a Postgres database

To set up a database, select the Storage tab from your project dashboard. Select Postgres → Create.

Accept the terms, assign a name to your database, and ensure your database region is set to Washington D.C (iad1) - this is the default region for all new Vercel projects. By placing your database in the same region or close to your applicationcode, you can reduce latency for data requests.

Good to know: You cannot change the database region once it has been initalized. If you wish to use a different region, you should set it before creating a database.

Next, click the Connect button:

Once connected, navigate to the .env.local tab, click Show secret and Copy Snippet.

⚠️ Make sure you reveal the secrets before copying them.

At the root of your project, create a new file called .env and paste the copied snippet.

⚠️ Important: Go to the .gitignore file and add the .env file to prevent it from being pushed to GitHub. This file contains sensitive information that should not be shared.

Finally, paste and run the following code in your terminal to install the Vercel Postgres SDK .

⚠️ Attention: You must install the `@vercel/postgres` package as a `devDependency` to avoid deployment issues on Vercel.

Great! 🎉, you've successfully connected your project to a Postgres database on Vercel! 🚀

Seed your database

Now that your database has been created, let's seed it with some initial data. This will allow you to have some data to work with as you build the dashboard.

At the root of your project, create a new folder called `script`

Download the following file and place it in the `script` folder:

• seed.js 💾

This script contains the instructions for creating and seeding the invoices, customers, user, revenue tables.

Don't worry if you don't understand everything the code is doing, but to give you an overview, the script uses SQL to create the tables, and the data from placeholder-data.js file to populate them after they've been created.

Next, in your `package.json` file, add the following line to your scripts:

This is the command that will execute seed.js.

To avoid TypeScript errors, you can also add these lines to your `tsconfig.json` file:

This script needs `bcrypt` to run. Run the following command to install them:

Now, for seed your database, run the following command in your terminal:

You should see some `console.log` messages in your terminal to let you know the script is running.

Troubleshooting:

• Make sure to reveal your database secrets before copying it into your .env file.
• The script uses bcrypt to hash the user's password, if bcrypt isn't compatible with your environment, you can update the script to use `bcryptjs` instead.
• If you run into any issues while seeding your database and want to run the script again, you can drop any existing tables by running DROP TABLE tablename in your database query interface. See the executing queries section below for more details. But be careful, this command will delete the tables and all their data. It's ok to do this with your example app since you're working with placeholder data, but you shouldn't run this command in a production app.
• If you continue to experience issues while seeding your Vercel Postgres database, go to Learn Qwik Discord.

Exploring your database

Let's see what your database looks like. Go back to Vercel, and click Data on the sidenav.

In this section, you'll find the four new tables: users, customers, invoices, and revenue.

By selecting each table, you can view its records and ensure the entries align with the data from placeholder-data.js file.

Executing queries

You can switch to the "query" tab to interact with your database. This section supports standard SQL commands. For instance, inputting `DROP TABLE customers` will delete "customers" table along with all its data - so be careful!

Let's run your first database query. Paste and run the following SQL code into the Vercel interface:

Congratulations, you've successfully set up your database in Qwik! 🎉

Source code

You can find the source code for chapter 6 on GitHub.