sanity-io / sanity-template-astro-clean

Clean starter template with Astro

A minimal Astro site with Sanity Studio

This starter uses Astro for the front end and Sanity to handle its content.

Featuring

• How to fetch content as data from the Sanity Content Lake
• How to render block content with Portable Text
• A Sanity Studio to create and edit content
• How to crop and render images with Sanity Image URLs

Prerequisites

• Node.js (v16.12 or later)

Getting started

Run the following commands

1. npm install to install dependencies

2. npx sanity@latest init --env, this will:

   • ask you to select or create a Sanity project and dataset
   • output a .env file with appropriate variables
   • (or use sanity init --env if you have the CLI installed)

3. Rename the variables in the .env file:

   • SANITY_STUDIO_PROJECT_ID → PUBLIC_SANITY_STUDIO_PROJECT_ID
   • SANITY_STUDIO_DATASET → PUBLIC_SANITY_STUDIO_DATASET

4. npm run dev to start the development server

Your Astro app should now be running on http://localhost:4321/ and Studio on http://localhost:4321/admin.

Add content

1. Visit the Studio and create and publish a new Post document
2. Visit the homepage and refresh the page to see your content rendered on the page

The schema for the Post document is defined in the /schema folder. You can add more document types to the Studio to suit your needs.

Removing TypeScript

If you do not wish to use TypeScript, we've included a remove-typescript.mjs file in the root of this repository. You can run this file with node remove-typescript.mjs to strip all types from this project. Please run this before tampering with any code to ensure that all types are properly removed.

If you intend to use TypeScript, you can safely remove the remove-typescript.mjs file.

Removing the embedded Studio

If you wish to manage and host the Studio separately, you remove the studioBasePath property for the sanity configuration in astro.config.mjs. You can also remove the following dependencies:

• output in astro.config.mjs…
  • …and adapter in astro.config.mjs
• react() in astro.config.mjs
• @sanity/vision react react-dom @types/react @types/react-dom from package.json
• schema folder (you might want to copy this to the new Studio location)
• sanity.config.ts (you might want to copy this to the new Studio location)

Deployments

Feel free to deploy the App to whichever hosting provider you prefer (Vercel, Netlify, Cloudflare, etc). Remember to change the adapter in the astro.config.mjs file to match your hosting provider.

Deploying the Studio on *.sanity.studio

You can also deploy the Sanity Studio on its own URL by running npx sanity deploy, provided you have added a sanity.cli.ts configuration file:

// sanity.cli.ts
import { defineCliConfig } from "sanity/cli";

export default defineCliConfig({
  api: {
    projectId: "<your-project-id>",
    dataset: "<your-dataset-name>",
  },
});

sanity-template-astro-clean's Issues

This template isn't working for persons with Astro 4

The template builds and operates as-is, but when persons upgrade it to use latest packages, including Astro 4 and @sanity/astro to accompany that, there are multiple failures.

To reproduce, run ncu -u from the top folder, and then attempt npm run dev, or npm run build.

Expected, is that with current packages, the template should just work.

I've created a fork with upgrades to fit the current software, available on branch main to make it easy to use. I'm not presenting a PR for these yet, because they necessarily use a temporarily published upgrade of @sanity/astro, on @narration-sd/santy-astro.

When its PR for official @sanity/astro resolves, I'll update the fork, and PR this repo for a completed result, reporting again here also.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

---

Using a curated preset maintained by

Sanity: The Composable Content Cloud

---

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

• chore(deps): update dependency @astrojs/vercel to v5
• chore(deps): update dependency @astrojs/vercel to v6
• chore(deps): update dependency @astrojs/vercel to v7
• chore(deps): update dependency @sanity/astro to v3
• chore(deps): update dependency astro to v4
• chore(deps): lock file maintenance
• 🔐 Create all pending approval PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency vite to v4.5.3 [security]
• chore(deps): update non-major (@astrojs/check, @astrojs/react, @portabletext/types, @sanity/types, @sanity/vision, @types/react, @types/react-dom, astro, astro-portabletext, autoprefixer, eslint, groq, prettier, prettier-plugin-astro, react, react-dom, sanity, typescript)
• chore(deps): update dependency @sanity/astro to v2
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

• @astrojs/check 0.2.0
• @astrojs/react 3.0.2
• @astrojs/vercel 4.0.5
• @sanity/astro 1.3.0
• @sanity/image-url 1.0.2
• @sanity/vision 3.17.0
• @types/react 18.2.24
• @types/react-dom 18.2.8
• astro 3.2.2
• astro-portabletext 0.9.4
• autoprefixer 10.4.16
• groq 3.17.0
• prettier-plugin-astro 0.12.0
• react 18.2.0
• react-dom 18.2.0
• sanity 3.17.0
• @portabletext/types 2.0.7
• @sanity/types 3.17.0
• eslint 8.50.0
• prettier 3.0.3
• rimraf 5.0.1
• typescript 5.2.2
• vite 4.4.10
• node >= 16.12

---

• Check this box to trigger a request for Renovate to run again on this repository

Build Fails on Vercel When Adding Post To Content Collection

Describe the bug

Deploying the template on vercel results in failed builds due to in invalid runtime for Vercel Serverless Functions.

To Reproduce

Steps to reproduce the behavior:

1. Use the "Deploy with Vercel" button to launch the template.

2. Follow the steps for setup as written in the template
3. Create a new post.
4. Commit to github to trigger Vercel redeploy or redeploy manually.
5. Build fails with error:

Expected behavior

Build should succeed when adding a sample post to the content collection per the template instructions.

Which versions of Sanity are you using?

Run sanity versions in the terminal and copy-paste the result here.

What operating system are you using?

@sanity/cli (global)  3.17.0 (latest: 3.35.0)
@sanity/astro          1.3.0 (latest: 3.0.0)
@sanity/image-url      1.0.2 (up to date)
@sanity/types         3.17.0 (latest: 3.35.0)
@sanity/vision        3.17.0 (latest: 3.35.0)
sanity                3.17.0 (latest: 3.35.0)

Which versions of Node.js / npm are you running?

10.2.4
v18.19.1

** Proposed Solution **

This issue resolved for me by updating the package.json to have a more current version of node in the engines section.

"engines": {
    "node": "18"
  }

Use Sanity as route page

Hey there 👋

I don't know where is the correct place to have this discussion so I'll open it here. If it should be somewhere else, please let me know.

I recently moved my blog from Next + Sanity (as an app route) to Astro + Sanity (as an app route). Now I'm seeing this template, and I'm wondering: is there any reason to have a template that decouples the sanity render from the main application (despite of personal preferences)?

I'm asking because it was a bit tricky to find out good docs on how to do that, and I only managed it because I learned how to do so using Remix, and I could port this knowledge to Astro.

node remove-typescript.mjs

Could easily be I'm doing it wrong but just in case...

README: Rename the variables in the .env file

I am not sure the above instructions align with vars set in the .env file after running npx sanity@latest init --env.

When I run this my .env ends up with...

PUBLIC_SANITY_PROJECT_ID="xxxxxxxx"
PUBLIC_SANITY_DATASET="production"

Question or issue is with the lack of _STUDIO_ as part of this variable. Might not be important, or might be something I've misunderstood, just seemed odd.

sanity@latest init --env omits "STUDIO" from variable name

From terminal logs:

Detected framework Astro, using prefix 'PUBLIC_'
Appended PUBLIC_SANITY_PROJECT_ID="xxxxxxxx"
Appended PUBLIC_SANITY_DATASET="production"

Should be PUBLIC_SANITY_STUDIO_PROJECT_ID and PUBLIC_SANITY_STUDIO_DATASET.

Works as expected once manually renamed.

[question] Why is published content not showing up?

If you find a security vulnerability, do NOT open an issue. Email [email protected] instead.

Describe the bug

I am using this template to build a website with Sanity + Astro + deploy with Vercel hybrid. When I publish content inside Sanity Studio, the template does not update with the newly published content.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://www.sanity.io/templates/astro-sanity-clean
2. Click on "Deploy with Vercel"
3. Visit vercel link and go to "/admin"
4. Publish content
5. Visit vercel link
6. See that the published content does not update. It seems to update when a new deploy happens, though

Expected behavior

Published content from embedded Sanity Studio should display automatically in the Vercel-hosted website

Screenshots
Here is a video of me explaining the issue. The workaround is to deploy to Vercel, and that seems to revalidate the Sanity's cache? Maybe I need to open up a ticket with them?

https://www.loom.com/share/5cb32e2508cc42d3bcd8b127ca978678?sid=29497577-c2f8-4187-9beb-2fb60315e518

Which versions of Sanity are you using?

Run sanity versions in the terminal and copy-paste the result here.

@sanity/cli (global)  3.17.0 (latest: 3.18.1)
@sanity/astro          1.3.0 (latest: 2.1.2)
@sanity/color-input    3.1.0 (up to date)
@sanity/image-url      1.0.2 (up to date)
@sanity/types         3.17.0 (latest: 3.18.1)
@sanity/vision        3.17.0 (latest: 3.18.1)
sanity                3.17.0 (latest: 3.18.1)

What operating system are you using?
MacOS Ventura 13.4.1

Which versions of Node.js / npm are you running?

Run npm -v && node -v in the terminal and copy-paste the result here.

Node: v20.7.0
NPM: 10.1.0

Security issue?

Any security issues should be submitted directly to [email protected]. In order to determine whether you are dealing with a security issue, ask yourself these two questions:

• Can I access something that's not mine, or something I shouldn't have access to?
• Can I disable something for other people? If the answer to either of those two questions are "yes", then you're probably dealing with a security issue. Note that even if you answer "no" to both questions, you may still be dealing with a security issue, so if you're unsure, just email us at [[email protected]](mailto:[email protected].

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (github>sanity-io/renovate-config:security). Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Sanity.io requires an empty directory

First, I followed your tutorial and am very grateful for it! I love Astro, and still on the fence about Sanity.io. I have been trying to find a better solution than WordPress for years now in the JS world for my clients that need performant marketing sites. It's closer than it's ever been but the complexities have always made it unbearable.

I created a site doing a similar set up to yours and wanted to create a template out of it. However, I ran into an issue that happens in your repo too. If I clone your repo here and get to step 2 and run npm create sanity@latest init --env — it asks for an empty directory. However, your directory is not empty.

This leads me to two thoughts. One, how does anyone create their own Sanity.io template with regards to schema, for instance, when you have to start with an empty directory?

I just noticed you worked on a few of these templates. They will all have the same issue with step 2. What have you found to be the best practice here, delete the contents of the /studio folder first?