Merge branch 'main' of github.com:lumify-systems/web-template
This commit is contained in:
181
README.md
181
README.md
@@ -1,159 +1,96 @@
|
||||
|
||||
|
||||
# ✨ Lumify Sanity Template
|
||||
|
||||
Modern web template for Next.js, Sanity Studio, and Bun, with monorepo structure and reusable UI components. 🚀
|
||||
Official CLI and starter template for building modern web apps with Next.js, Sanity, Bun, and Shadcn UI — bundled into a single monorepo.
|
||||
|
||||
---
|
||||
|
||||
## 📦 What It Does
|
||||
|
||||
## 🧩 Features
|
||||
The `lumify/sanity-template` CLI sets up a fully functional monorepo with:
|
||||
|
||||
- ⚡ **Next.js** (App Router, TypeScript, Tailwind CSS)
|
||||
- 📝 **Sanity Studio** (custom schemas, live preview, type generation)
|
||||
- 🏗️ **Monorepo** (TurboRepo, packages for UI and Sanity connection)
|
||||
- 🎨 **Reusable UI components**
|
||||
* ⚡ **Next.js App Router** for the frontend
|
||||
* 📝 **Sanity Studio** CMS with custom schemas
|
||||
* 🏗️ **TurboRepo** structure (client, studio, shared packages)
|
||||
* 🎨 **Shadcn UI** components and theming pre-installed
|
||||
* 🧪 Preconfigured dev tools (Tailwind, TypeScript, ESLint, Prettier)
|
||||
|
||||
---
|
||||
|
||||
## 🚀 How to Use
|
||||
|
||||
You can scaffold a new project using the CLI:
|
||||
|
||||
```bash
|
||||
bunx lumify/sanity-template
|
||||
```
|
||||
|
||||
Then follow the interactive prompts:
|
||||
|
||||
* Choose a project name
|
||||
* Select a package manager (bun, npm, etc.)
|
||||
* (Optionally) Provide a path to a favicon
|
||||
|
||||
After that:
|
||||
|
||||
* The CLI will create a Sanity project and prompt you to log in.
|
||||
* It will open a GitHub repository creation screen in your browser.
|
||||
* Once you confirm and hit **Enter** in the CLI again, it will push the entire project and complete setup automatically.
|
||||
* You can edit your values anytime after setup in `packages/sanity-connection/index.ts`.
|
||||
|
||||
---
|
||||
|
||||
## 🗂️ Project Structure
|
||||
|
||||
```
|
||||
apps/
|
||||
client/ # Next.js frontend app
|
||||
src/
|
||||
app/ # App router pages & layouts
|
||||
components/ # React UI components
|
||||
lib/ # Utility functions
|
||||
public/ # Static assets
|
||||
studio/ # Sanity Studio (CMS)
|
||||
client/ # Next.js frontend
|
||||
studio/ # Sanity Studio CMS
|
||||
packages/
|
||||
sanity-connection/ # Shared Sanity config/utilities
|
||||
typescript-config/ # Shared tsconfig presets
|
||||
ui/ # Shared UI components
|
||||
ui/ # Shadcn components & design system
|
||||
sanity-connection/ # Shared Sanity config and token
|
||||
typescript-config/ # Shared TypeScript presets
|
||||
```
|
||||
|
||||
All apps and packages are connected with TurboRepo workspaces.
|
||||
|
||||
You can run commands from the root:
|
||||
|
||||
```bash
|
||||
bun run dev # Start client and studio in parallel
|
||||
bun run build # Build all apps and packages
|
||||
bun run deploy # Deploy the Sanity Studio
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧩 Shadcn UI
|
||||
|
||||
## 🏁 Getting Started
|
||||
Shadcn UI is pre-installed and configured in `client`
|
||||
|
||||
To add components run the following inside the client folder:
|
||||
|
||||
### 1️⃣ Sanity Project Setup
|
||||
|
||||
1. Create a new project at [sanity.io](https://www.sanity.io/)
|
||||
2. Copy your **Project ID** for later
|
||||
3. In Sanity, set up the following CORS origins:
|
||||
|
||||
| URL | Status |
|
||||
|-------------------------------|-------------|
|
||||
| https://example.vercel.app | Not Allowed |
|
||||
| http://localhost:3000 | Not Allowed |
|
||||
| https://*.api.sanity.io | Not Allowed |
|
||||
| wss://*.api.sanity.io | Not Allowed |
|
||||
| https://example.sanity.studio | Allowed |
|
||||
| http://localhost:3333 | Allowed |
|
||||
|
||||
4. Create a **token** with `Viewer` permissions (for live preview):
|
||||
|
||||
| Name | Permissions |
|
||||
|----------------------------------------|-------------|
|
||||
| Main Token (Copy it for the next step) | Viewer |
|
||||
|
||||
|
||||
### 2️⃣ Configure the Repo
|
||||
|
||||
Edit `packages/sanity-connection/index.ts` and fill in:
|
||||
|
||||
1. `pageTitle` – Name for your Sanity Studio
|
||||
2. `publicViewerToken` – The token from above
|
||||
3. `studioHost` – Lowercase, no special chars (e.g. `myproject`)
|
||||
4. `studioUrl` – `https://<studioHost>.sanity.studio`
|
||||
5. `projectId` – From Sanity project settings
|
||||
6. `previewUrl` – Your website URL (`http://localhost:3000` for local dev)
|
||||
|
||||
---
|
||||
|
||||
|
||||
## 💻 Local Development
|
||||
|
||||
|
||||
Install dependencies (from the root):
|
||||
|
||||
```sh
|
||||
bun install
|
||||
```bash
|
||||
bunx shadcn-ui@latest add [component]
|
||||
```
|
||||
|
||||
🔗 [ui.shadcn.dev](https://ui.shadcn.dev/docs/components)
|
||||
|
||||
Start all apps (Next.js and Sanity Studio) in parallel from the root:
|
||||
🔗 [shadcnui-blocks.com](http://www.shadcnui-blocks.com)
|
||||
|
||||
```sh
|
||||
bun run dev
|
||||
```
|
||||
🔗 [kokonutui.com](https://kokonutui.com)
|
||||
|
||||
🔗 [ui.aceternity.com](https://ui.aceternity.com)
|
||||
|
||||
✨ You do not need to `cd` into any subdirectory—TurboRepo will handle running the correct scripts in each package/app.
|
||||
🔗 [21st.dev](https://21st.dev)
|
||||
|
||||
---
|
||||
|
||||
## 🧠 Sanity Docs
|
||||
|
||||
## 🛠️ Useful Scripts
|
||||
Customize your Studio or learn more about Sanity at:
|
||||
|
||||
| Script | Description |
|
||||
|--------------------|------------------------------------|
|
||||
| bun run dev | Start dev server (client/studio) |
|
||||
| bun run build | Build app/studio |
|
||||
| bun run deploy | Deploy Sanity Studio |
|
||||
| bun run generate | Generate Sanity types |
|
||||
📘 [sanity.io/docs](https://www.sanity.io/docs)
|
||||
|
||||
---
|
||||
|
||||
|
||||
## 🚢 Deployment
|
||||
|
||||
To deploy Sanity Studio:
|
||||
|
||||
```sh
|
||||
bun run deploy
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
|
||||
## 🧬 Type Generation
|
||||
|
||||
To generate types from your Sanity schemas:
|
||||
|
||||
```sh
|
||||
bun run generate
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
on github
|
||||
|
||||
## 🚀 Use This Template
|
||||
|
||||
Easily kickstart your own project with this template on GitHub:
|
||||
|
||||
1. ⭐️ **Go to the repository page on GitHub.**
|
||||
2. ⤴️ Click the **"Use this template"** button (top right) and select **"Create a new repository"**.
|
||||
3. 📝 Fill in your new repository details and click **"Create repository from template"**.
|
||||
4. ⬇️ Clone your new repository:
|
||||
|
||||
```sh
|
||||
git clone https://github.com/your-username/your-repo-name.git
|
||||
cd your-repo-name
|
||||
```
|
||||
|
||||
5. 📦 Install dependencies and start development:
|
||||
|
||||
```sh
|
||||
bun install
|
||||
bun run dev
|
||||
```
|
||||
|
||||
6. 🛠️ Follow the [Getting Started](#getting-started) steps above to configure your Sanity project and environment.
|
||||
|
||||
Happy building! 🎉
|
||||
Happy building with Lumify! 🚀
|
||||
|
||||
Reference in New Issue
Block a user