This is a Next.js project that uses Prisma to connect to a PlanetScale database and Tailwind CSS along Shadcn/ui for styling. Basically the T3 Stack
pscale auth login
Create a new database with the following command:
pscale database create <DATABASE_NAME>
A branch,
main
, was automatically created when you created your database, so you can use that forBRANCH_NAME
in the steps below.
Clone the repository.
git clone https://github.com/KewKartik/NIRFTL
Install the dependencies.
npm install
Next, you'll need to create a database username and password through the CLI to connect to your application. If you'd prefer to use the dashboard for this step, you can find those instructions in the Connection Strings documentation and then come back here to finish setup.
First, create your .env
file by renaming the .env.example
file to .env
:
mv .env.example .env
Next, using the PlanetScale CLI, create a new username and password for the branch of your database:
pscale password create <DATABASE_NAME> <BRANCH_NAME> <PASSWORD_NAME>
The
PASSWORD_NAME
value represents the name of the username and password being generated. You can have multiple credentials for a branch, so this gives you a way to categorize them. To manage your passwords in the dashboard, go to your database overview page, click "Settings", and then click "Passwords".
Take note of the values returned to you, as you won't be able to see this password again.
Password production-password was successfully created.
Please save the values below as they will not be shown again
NAME USERNAME ACCESS HOST URL ROLE PLAIN TEXT
--------------------- -------------- ----------------------------------- ------------------ -------------------------------------------------------
production-password xxxxxxxxxxxxx xxxxxx.us-east-2.psdb.cloud Can Read & Write pscale_pw_xxxxxxx
You'll use these properties to construct your connection string, which will be the value for DATABASE_URL
in your .env
file. Update the DATABASE_URL
property with your connection string in the following format:
mysql://<USERNAME>:<PLAIN_TEXT_PASSWORD>@<ACCESS_HOST_URL>/<DATABASE_NAME>?sslaccept=strict
Push the database schema to your PlanetScale database using Prisma.
npx prisma db push
Run the seed script to populate your database with Product
and Category
data.
npm run seed
Run the app with following command:
npm run dev
Open your browser at localhost:3000 to see the running application.
After you've got your application running locally, it's time to deploy it. To do so, you'll need to promote your database branch (main
by default) to be the production branch (read the branching documentation for more information).
pscale branch promote <DATABASE_NAME> <BRANCH_NAME>
Now that your branch has been promoted to production, you can either use the existing password you generated earlier for running locally or create a new password. Regardless, you'll need a password in the deployment steps below.
Choose one of the following deploy buttons and make sure to update the DATABASE_URL
variable during this setup process.
For example we can consider vercel as our hosting platform. (We need to use a workaround to generate prisma at every devployment ).
Within the scripts section of your project's package.json file, if there is not already a script named postinstall, add one and add prisma generate to that script:
{
...
"scripts" {
"postinstall": "prisma generate"
}
...
}
Within the scripts section of your project's package.json file, within the build script, prepend prisma generate to the default vercel build command:
{
...
"scripts" {
"build": "prisma generate && <actual-build-command>"
}
...
}
Another way to do it is just add npx prisma generate && next build
!
(With Proxy).