HMR and manual refresh 404s admin page

[otaviomad]

Describe the bug

This is similar to #155 but not quite. When you open /admin, it suffixes the current page with /structure, so you are in /admin/structure. I presume this is using CSR because no such page exists. When you refresh the page, since /structure only exists "virtually" within the /admin page, it 404s. This happens very often if you're doing HMR.

To Reproduce

Steps to reproduce the behavior:

1. Setup studioBasePath and sanity.config.ts with structureTool
2. Navigate to /admin and refresh the page or change a file that would trigger hmr
3. See error

Expected behavior

/structure should also be a static route.

Logs

21:20:04 [WARN] [router] A `getStaticPaths()` route pattern was matched, but no matching static path was found for requested path `/admin/structure`.

Possible dynamic routes being matched: node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected]__rbvkym4ik5hm3p4hmcrnpgzx4i/node_modules/@sanity/astro/dist/studio/studio-route.astro.

Which versions of Sanity are you using?

@sanity/cli (global)    3.44.0 (up to date)
@sanity/astro            3.1.3 (up to date)
@sanity/visual-editing   2.1.3 (up to date)
sanity                  3.44.0 (up to date)

What operating system are you using?

Bluefin 40

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

pnpm -v && node -v
9.1.4
v20.14.0

[narration-sd]

It's probably useful here to note that this problem doesn't seem to occur on an SSR app -- only on a static/SSG app.

You can demonstrate this by setting an accessible projectId, dataset, and matching schemas, within the two example apps provided.

[otaviomad]

It's probably useful here to note that this problem doesn't seem to occur on an SSR app -- only on a static/SSG app.

You can demonstrate this by setting an accessible projectId, dataset, and matching schemas, within the two example apps provided.

I think you're quite right. On my Cloudflare Pages deployment, I can just setup a _redirects file that points all routes to that one (btw, Cloudflare Page's redirects are borked and this took some fidaddling to get to work properly) but I'd also like a way to have those routes set up on my local dev server. I wonder if there's a way I can override the Vite dev server to always serve the studio from those subroutes, while on SSG?

[samhenrigold]

Running into this, this is especially bad when developing locally. Would love for the Sanity team to deliver a fix

[dylanfisher]

So... is Sanity supposed to be able to run on a static site at /admin route, or does it need a server like Vercel to host it. I wanted to use GitHub Pages to host a static Astro site with Sanity backend. I thought this was the whole point of these tools. I'm confused why the admin area has these pathing issues when running astro dev locally in a brand new sanity-astro project.

[narration-sd]

Dylan @dylanfisher , it seems this is getting confused here on your post, and possibly one or more before it.

As I recall, the original bug did exist, but was rapidly fixed. Not sure why this issue trail still exists, in fact. You'll want to be sure you're running the most recent version of @sanity/astro.

But what you seem to be running into is a misunderstanding of the Astro and Sanity architecture.

• Running SSG, there's no opportunity to update the website except by a rebuild. Thus using the Studio (admin) in close participation with it has no reason, and the integration doesn't support that.

• When you run a site SSR, then refreshing the page can show updates, and here the integration gives full support, once you've set the configuration. It works very well, giving you the Studio on a second tab.

• You can run an SSR site overall, if it's light duty and can give the performance preferred.

• If not, then having your public site SSG, then using a second editing site SSR from the same codebase and dataset, with the embedded Studio configured, is a sensible and common way to proceed.

• in this case, you'd do a (re-)build of the SSG site, once editing is completed and verified via SSR.

[dylanfisher]

@narration-sd what about the astro dev command locally? I'm still having the same problem as described in this issue on a new install. I am following this guide https://www.sanity.io/plugins/sanity-astro. The /admin area loads initially, but on refresh I get the Astro 404 page.

{
  "name": "my-project",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/react": "^3.6.2",
    "@sanity/astro": "^3.1.4",
    "@sanity/client": "^6.21.3",
    "@sanity/visual-editing": "^2.1.9",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "astro": "^4.14.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "sanity": "^3.54.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.20",
    "bootstrap": "^5.3.3",
    "sass-embedded": "^1.77.8"
  }
}

// astro.config.mjs
import { defineConfig } from 'astro/config';

import sanity from '@sanity/astro';
import react from '@astrojs/react';

// https://astro.build/config
export default defineConfig({
  integrations: [
    sanity({
      projectId: '123456',
      dataset: 'dev',
      useCdn: false,
      studioBasePath: '/admin',
    }),
    react()
  ]
});

// sanity.config.js
import {defineConfig} from 'sanity'
import {structureTool} from 'sanity/structure'

export default defineConfig({
  name: 'myProject',
  title: 'My Project',
  projectId: '123456',
  dataset: 'dev',
  plugins: [structureTool()],
})

 astro  v4.14.2 ready in 55 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

22:39:56 watching for file changes...
22:40:01 [200] /admin 13ms
22:40:03 [WARN] [router] A `getStaticPaths()` route pattern was matched, but no matching static path was found for requested path `/admin/structure`.

Possible dynamic routes being matched: node_modules/@sanity/astro/dist/studio/studio-route.astro.

[narration-sd]

Ok, Dylan, actually you're right -- I just switched over a site to run static in dev, and it replicates the 404 on refresh problem for the Studio (on /admin). It was fine as I thought in SSR, leading to a suggestion as follows.

• I'd forgotten that you can operate static local dev, in recent versions, because they don't require hybrid mode on an adaptor.

• Also, it looks like the fix has not been done. I probably remembered the good response from the workaround I put above. But Sanity development hasn't actually fixed the problem yet, which explains that the issue is still here.

• Actually, there are other more significant problems not addressed over the European summer break

  • so, practically speaking, I'd suggest you just don't do refreshes on the Studio for now

  • or, you could run SSR as a workaround, which is easy to do:

    • install @astrojs/netlify
    • then towards the top of your astro.config file, add
      import netlify from '@astrojs/netlify';
    • add a comma after your integrations[] array closing bracket, then two more line below it, within the config object:

         output: 'hybrid',
         adapter: netlify() 
    

    • now when you run dev, you should be in SSR, and the problem on refreshes should go away

Hopefully the persons in Sanity development will be doing a review before long, and pick up the problems like this which are still hanging around -- I've got a PR coming for at least one of those outstanding, though not for this one.

[dylanfisher]

Giving up on the embedded approach and using Turborepo to manage Astro / Sanity within the same repo.

[narration-sd]

hmm - Dylan, that could work, unless you plan on using Presentation/Visual Editing. In that case, there's another bug. I haven't put up the PR for it, but could give you a patch.

What's the problem with using SSR etc. as proposed, I wonder. I'll send you an email so we can take this conversation off the GitHub trail, see if something easy can't be satisfactory for what you need, arrived at on a Friday.

Clive

[dylanfisher]

Not planning on doing presentation or visual editing at the moment. I want to try to do it without SSR using webhooks from Sanity into GitHub to save costs for small client projects.

[itsmatteomanf]

This happens to me even in SSR, the original hit at the basePath (which is /admin/ for me) isn't even kept in the browser history, but it keeps just the /admin/structure.

This seems to be because I have trailingSlash: "always" in the config. That causes the Sanity Studio and Astro to fail between them, not showing anything unless I add a trailing slash.