Get help on Discord

Issue with embedding Sanity Studio into an Astro site, resolved with help from the community.

18 replies
Last updated: Nov 23, 2023
Hi there,I’m trying to embed the sanity studio into my new astro site.
I’ve followed along with this
documentation , but keep getting a 404 error.
I have the studio installed in a ‘admin’ folder in the root folder of my astro project.
Is there an issue with my astro config?



import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
import svelte from '@astrojs/svelte';
import sanity from 'astro-sanity';
import react from '@astrojs/react';

import netlify from "@astrojs/netlify/functions";

// <https://astro.build/config>
export default defineConfig({
  output: 'hybrid',
  integrations: [tailwind(), svelte(), sanity({
    projectId: '<actualProjectID>',
    dataset: 'production',
    useCdn: false,
    studioBasePath: '/admin'
  }), react()],
  adapter: netlify()
});
AI Update

I can see the issue! You're using the wrong npm package. The astro-sanity package you have in your config is an unofficial/older community package, but Sanity has an official integration called @sanity/astro that you should be using instead.

Here's what you need to do:

1. Uninstall the old package and install the official one:

npm uninstall astro-sanity
npm install @sanity/astro

2. Update your astro.config.mjs:

import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
import svelte from '@astrojs/svelte';
import sanity from '@sanity/astro';  // Changed this line
import react from '@astrojs/react';
import netlify from "@astrojs/netlify/functions";

export default defineConfig({
  output: 'hybrid',
  integrations: [
    tailwind(), 
    svelte(), 
    sanity({
      projectId: '<actualProjectID>',
      dataset: 'production',
      useCdn: false,
      studioBasePath: '/admin'
    }), 
    react()
  ],
  adapter: netlify()
});

3. Verify your Studio setup:

Make sure your admin folder contains a proper Sanity Studio setup with:

  • sanity.config.ts (or .js) file
  • Your schema types
  • Proper basePath configuration in the Studio config

The official Astro documentation shows the correct setup process. The @sanity/astro package is the maintained, official integration that properly handles embedding the Studio at a custom path like /admin.

The 404 error you're experiencing is likely because astro-sanity doesn't have the same Studio embedding capabilities as the official @sanity/astro package. After switching packages, your /admin route should work correctly!

Looks right to me. Did you also add the 
sanity.config.ts
file? Do you have the code on GitHub by any chance?
Yes, it’s sitting under /admin

import {defineConfig} from 'sanity'
import {deskTool} from 'sanity/desk'
import {visionTool} from '@sanity/vision'
import {schemaTypes} from './schemas'

export default defineConfig({
  name: '<actualProjectName>',
  title: '<actualProjectTitle>',

  projectId: '<actualProjectID>',
  dataset: 'production',

  plugins: [deskTool(), visionTool()],

  schema: {
    types: schemaTypes,
  },
})
No repo currently, but I can get one up if need be.
I should be able to run the studio at /admin while in dev as well right?
Or is the embed just for production when I have the site up on Netlify?
Ah – try to remove the 
admin
folder and put the 
sanity.config.ts
file in root (alongside 
astro.config.mjs
)
that’s not clear perhaps
Hmm, moved the file to the root (alongside 
astro.config.mjs
) and installed the file’s dependencies in the root as well.
Where should I be storing the studio specific files then?
Anywhere you want, except in the 
pages
folder 🙂
(I guess we could move the 
schema
into the 
src
folder, and so on)
Thank you for linking this.It’s a completely fresh project, so I just started over with this template and all is working now.
Thanks for your help!
Awesome! I’ll make sure to make the docs a bit clearer 🙇‍♂️
So I'm having similar issues with deployment now.The studio just 404s in production, even though I have enabled CORs for the origin.

My astro config:


import { defineConfig } from 'astro/config';

// Loading environment variables from .env files
// <https://docs.astro.build/en/guides/configuring-astro/#environment-variables>
import { loadEnv } from 'vite';
const { PUBLIC_SANITY_STUDIO_PROJECT_ID, PUBLIC_SANITY_STUDIO_DATASET } =
  loadEnv(import.meta.env.MODE, process.cwd(), '');

import sanity from '@sanity/astro';
import react from '@astrojs/react';
import netlify from '@astrojs/netlify/functions';
import tailwind from '@astrojs/tailwind';

// <https://astro.build/config>
export default defineConfig({
  output: 'hybrid',
  adapter: netlify(),
  integrations: [
    sanity({
      projectId: PUBLIC_SANITY_STUDIO_PROJECT_ID,
      dataset: PUBLIC_SANITY_STUDIO_DATASET,
      studioBasePath: '/admin',
      useCdn: false,
      // `false` if you want to ensure fresh data
      apiVersion: '2023-03-20',
    }),
    react(),
    tailwind(),
  ],
});
If it only happens in production, are you sure that your build has access to your environment variables?
The site itself is working, just not the studio.
The only variables I've configured are the project ID and dataset.
Hello! I just encountered the problem.
I found something interesting that might help you
user N
, it worked for me.
It should work if you go to yoururl/admin/desk.

I noticed in the dist/_redirects file that redirection for admin path was "/admin/*"
Let’s use greetings like “Hey Everyone,” “Hi, Y’all," or “Hello, Folks” to make sure everyone in the community is included. Please read the Sanity Community Code of Conduct to stay updated on expected communication &amp; behavior in our spaces: https://www.sanity.io/docs/community-code-of-conduct

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?