This is Not
an official starter Turborepo.
Clone this repo then run the following command:
npm i
This Turborepo includes the following packages/apps:
store
: a Next.js 14 app with Tailwind CSSdashboard
: another Next.js 14 app with Tailwind CSS@repo/ui
: a stub React component library with Tailwind CSS, NextUI, shadcn\ui shared by bothstore
&dashboard
@repo/database
: Prisma ORM wrapper to manage & access your database
Each package/app is 100% JavaScript
.
This example is set up to produce compiled styles for ui
components into the dist
directory. The component .jsx
files are consumed by the Next.js apps directly using transpilePackages
in next.config.js
. This was chosen for several reasons:
- Make sharing one
tailwind.config.js
to apps and packages as easy as possible. - Make package compilation simple by only depending on the Next.js Compiler and
tailwindcss
. - Maintain clear package export boundaries.
Another option is to consume packages/ui
directly from source without building. If using this option, you will need to update the tailwind.config.js
in your apps to be aware of your package locations, so it can find all usages of the tailwindcss
class names for CSS compilation.
For example, in tailwind.config.js:
content: [
// app content
`src/**/*.{js,ts,jsx,tsx}`,
// include packages if not transpiling
"../../packages/ui/*.{js,ts,jsx,tsx}",
],
If you choose this strategy, you can remove the tailwindcss
and autoprefixer
dependencies from the ui
package.
To add shadcn component cd into packages/ui
then use any shadcn CLI
example :
# C:\..\your-project\packages\ui>
npx shadcn-ui@latest add button
this will add the component in packages/ui/src/Shadcn
We use Prisma to manage & access our database. As such you will need a database for this project, either locally or hosted in the cloud.
To make this process easier, we offer a docker-compose.yml
file to deploy a MySQL server locally with a new database named turborepo
(To change this update the MYSQL_DATABASE
environment variable in the docker-compose.yml
file):
cd my-turborepo
docker-compose up -d
Once deployed you will need to copy the .env.example
file to .env
in order for Prisma to have a DATABASE_URL
environment variable to access.
cp .env.example .env
If you added a custom database name, or use a cloud based database, you will need to update the DATABASE_URL
in your .env
accordingly.
Once deployed & up & running, you will need to create & deploy migrations to your database to add the necessary tables. This can be done using Prisma Migrate:
npx prisma migrate dev
If you need to push any existing migrations to the database, you can use either the Prisma db push or the Prisma migrate deploy command(s):
npm run db:push
# OR
npm run db:migrate:deploy
There is slight difference between the two commands & Prisma offers a breakdown on which command is best to use.
An optional additional step is to seed some initial or fake data to your database using Prisma's seeding functionality.
To do this update check the seed script located in packages/database/src/seed.js
& add or update any users you wish to seed to the database.
Once edited run the following command to run tell Prisma to run the seed script defined in the Prisma configuration:
npm run db:seed
For further more information on migrations, seeding & more, we recommend reading through the Prisma Documentation.
This Turborepo has some additional tools already setup for you:
- Tailwind CSS, NextUI, shadcn\ui for styles
- Prisma for database ORM
- Docker Compose for local database