Skip to content
Shadcnblocks.com Docs

Getting Started

Installing the template

This project uses pnpm as package manager. To install pnpm globally, run the following command:

Terminal window
npm install -g pnpm

1. Install Sanity CLI globally

Terminal window
pnpm install --global sanity@latest

Login to Sanity CLI:

Terminal window
sanity login

2. Clone the repository

Run the command in your Terminal to clone the repository:

Terminal window
git clone https://github.com/serge-0v/sanityblocks.git

Note this is a private repo, to get access you need to buy the Sanity CMS addon from Shadcnblocks

2. Install dependencies

Terminal window
cd sanityblocks
pnpm install

This will install the dependencies for both /frontend and /studio folders.

3. Create a new Sanity project

  • Navigate to Sanity and create a new project.
  • Navigate to API and add CORS origins http://localhost:3000 (for local development)
  • Copy .env.example to .env.local for both /frontend and /studio folders
  • Add a new API token with read access (Viewer) and copy the token to .env.local as SANITY_API_READ_TOKEN for /frontend
  • Copy the project ID and paste it to .env.local as NEXT_PUBLIC_SANITY_PROJECT_ID for /frontend and SANITY_STUDIO_PROJECT_ID for /studio

4. Configuring Resend

To use the contact form, you need to configure Resend.

  1. Create a new Resend account
  2. Create a new API key
  3. Add new domain to the domains
  4. Set the API key and email address to send and receive form submissions in the .env.local file for /frontend

5. Run the template locally

Start the development servers:

Terminal window
pnpm dev

This will start the development servers for both /frontend and /studio folders.

6. Open the app and sign in to the Studio

  • Open the Next.js app at http://localhost:3000 (The page will be empty until we import the data)
  • Open the Studio running locally in your browser on http://localhost:3333/studio. You should now see a screen prompting you to log in to the Studio. Use the same service (Google, GitHub, or email) that you used when you logged in to the CLI.

7. Import Sample Data

Import the demo dataset to get started with sample content. Be careful with the --replace flag, it will replace all the existing data in the dataset. This is a good way to get started with the template. You can always delete the dataset and start over. This will make your site look like the demo site: Demo.

Terminal window
cd studio
sanity dataset import sample-data.tar.gz production --replace