Incorrect redirection to IP address 127.0.0.1 in Keystatic

[DaviLhlapak]

When I access my project in dev mode at http://localhost:3000/keystatic, I always get redirected to http://127.0.0.1:3000/keystatic and receive an ERR_CONNECTION_REFUSED error from my browser. I think this is because I'm using Windows WSL2, and the IP address 127.0.0.1 doesn't work by default.

I tested this by adding it to an existing Next.js 13 project and a new template project from Keystatic CLI, and both encountered this error.

Why is Keystatic redirecting to this IP? Did I miss some configuration?

Config File (Same as in the docs):

// keystatic.config.ts
import { config, fields, singleton } from '@keystatic/core'

export default config({
    storage: {
        kind: 'local'
    },
    singletons: {
        homepage: singleton({
            label: 'Homepage',
            path: 'src/content/_homepage',
            schema: {
                headline: fields.text({ label: 'Headline' })
            }
        })
    }
})

[fezproof]

I am also having this issue on mac in an Astro project, so it must be some redirect in the js loaded on the page.

[fezproof]

Looks like the origin is this line: https://github.com/Thinkmill/keystatic/blob/0e84ccaa94723edb2b50729d9b97e7e4e2d7a5aa/packages/keystatic/src/app/ui.tsx#L274 A useEffect ensuring that the page is on 127.0.0.1. Is this a specific thing for nextjs? I feel it can likely just be removed.

[MrMacStripe]

I am also having this issue on mac in an Astro project, so it must be some redirect in the js loaded on the page.

With Astro it helps to add the -- --host flag, then it works for some reason. I had no time yet to look into it but it provides a quick and easy fix.

[schmt5]

I got the same error with a NextJS project when using WSL. However I do not get the error when the same project is created outside of WSL.

[stefanprobst]

i have been running into this issue as well, on linux (so it doesn't seem to be WSL-related).

@emmatown could you clarify the reason for https://github.com/Thinkmill/keystatic/blob/main/packages/keystatic/src/app/ui.tsx#L268-L278 -- thanks!

[iam-rohid]

I am also having this issue on mac in an Astro project, so it must be some redirect in the js loaded on the page.

With Astro it helps to add the -- --host flag, then it works for some reason. I had no time yet to look into it but it provides a quick and easy fix.

By Using npm run dev -- --host it's working fine. Thank you

[aanomm]

• also having this issue on an M1 Mac
• thanks for the quick-fix everyone (running npm run dev -- --host fixes the problem for me)
• and thanks for the sending me the fix via Xtwitter @simonswiss 🙏🏾🤗

[typefasterjoel]

Hello 👋🏻 Just wanted to post here in case someone else needs help. I was having this issue as well and for some weird reason the npm run dev -- --host was also not working. After tinkering a little bit here and there, I found down for NextJS I can pass the host and port in the script itself, so I changed my package.json like this:

"scripts": {
    "dev": "next dev -H localhost -p 5173",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

My system is currently running under WSL2.

[grunklejp]

Also running into this issue using Remix + Vite setup. starting the app like this npm run dev -- --host works but i'm not sure why?