🥳 TurboStrapi is now ready to use!

TurboStrapi: The Strapi & Next.js Monorepo Starter

TurboStrapi is the go-to starter template for Strapi projects, crafted to kickstart your projects, combining the powers of Strapi, Next.js, and Turborepo in a monorepo setup. Unleash your creativity and scale with ease!

📦 Stack

• Strapi: Handle your content like never before.
• Next.js 14: For a blazing fast frontend experience.
• Turborepo: Efficient monorepo management to keep things tidy.
• Tailwind CSS: Awesome utility-first CSS framework.

✨ Features

Discover the pre-configured goodies TurboStrapi brings to your table:

• 🧩 Strapi: Fully typed with basic content-types.

• 🔥 Next.js 14: Already connected to Strapi via an API service.

• 💼 Turborepo: Pre-configured, ready to go.

• 🎨 Tailwind CSS: Shared configuration ensuring consistent styles.

• 🌐 Localization: Multi-language Content support pre-configured.

• 🎡 CVA & tailwind-merge: Tailwind variants made easy.

• 🛠️ Code Quality: Out-of-the-box ESLint, Prettier, and TypeScript.

• 📦 Sample DB Seed: Import demo data for a quick setup.

• 🚧🧪 100% Test Coverage: All implemented features are fully tested.

• 🚧🔍 SEO Optimized: Pre-configured for peak search engine visibility.

  🚧 WIP: Stay tuned!

🚀 Get Up and Running

1. Grab the Code

   git clone https://github.com/sawden/turbostrapi.git

2. Setup Environment Copy and adjust the example .env for both apps:

   • Backend:

     cp apps/backend/.env.example apps/backend/.env

   • Frontend:

     cp apps/frontend/.env.example apps/frontend/.env

     Ignore FRONTEND_BACKEND_API_SECRET for now

3. Install Dependencies

   yarn

4. Import Demo Data Seed demo data into the Strapi backend:

   yarn workspace @turbostrapi/backend strapi import -f ./seed-data.tar.gz

5. Launch Light up both Strapi and Next.js:

   yarn dev

6. Create API Token First, open http://localhost:1337 to create your Admin user. Then, go to Strapi API Tokens and generate a token with the following settings:

   • Name: Public Read
   • Description: Access to public content.
   • Token duration: Unlimited
   • Token type: Custom

   Type	Permissions
   Global	✅ find
   Page	✅ find | ✅ findOne
   I18n	✅ listLocales

   After saving, add the token to FRONTEND_BACKEND_API_SECRET in apps/frontend/.env

7. Witness Magic Visit frontend http://localhost:3000 and backend http://localhost:1337.

8. Read the Docs Each workspace has its own README.md — Take a look before you start:

   • Backend
   • Frontend

🗂️ Project Structure

root/
│
├── apps/
│   ├── backend/             ℹ️ Strapi Workspace
│   └── frontend/            ℹ️ Next.js Workspace
│
├── configs/
│   ├── tailwind-config/     ℹ️ Shared Tailwind Configuration
│   ├── eslint-config/       ℹ️ ESLint Configurations
│   └── ...
│
├── packages/
│   ├── cva/                 ℹ️ CVA setup with tailwind-merge
│   └── ui/                  ℹ️ React UI Library
│
├── turbo.json
├── README.md
└── ...

This starter uses @turbostrapi as the package namespace. You can easily replace it globally through search and replace with a namespace of your choice.

🏎️ Remote Caching

Turborepo can use a technique known as Remote Caching to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.

By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can create one, then enter the following commands:

npx turbo login

This will authenticate the Turborepo CLI with your Vercel account.

Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:

npx turbo link

💡 Contribute

TurboStrapi is better with your input. Got an enhancement or a bugfix? Dive in:

1. Fork it.
2. Create your feature branch.
3. Commit your changes.
4. Push to the branch.
5. Create a new Pull Request.

📄 Legalese

TurboStrapi is open-source and available under the MIT License. Dive into the LICENSE for more details.

Useful Links

• strapi
• Turbo
• Next.js
• shadcn/ui
• tailwindcss
• heroicons