How to preview astro site on your mobile phone?

If you’re developing a astro site, chances are you would want to preview it on a mobile phone for various reasons. Let’s see how.

Option 1

Open package.json file on your text editor, under scripts, edit the dev command to be astro dev --host instead of just astro dev.

  "scripts": {
    "dev": "astro dev", 
    "dev": "astro dev --host", 
    // others
  }

Now when you start the dev server using npm run dev, a new URL will be shown beside the Network

| Local     http://localhost:4321
| Network   http://192.168.*.*:4321 # this URL

Run this new url on your mobile devices, and you will be able to see your astro site on your mobile phone.

Option 2

Open astro config file astro.config.mjs, and inside the curly braces of defineConfig({}) method, add the following lines:

server: {
  host: true;
}

If your dev server is already running, close it with ctrl+c and re-run npm run dev command, you will see a new URL beside the Network like we saw on option 1.

Now if you run this new URL on your mobile phone, you will be able to preview it on your mobile phone.