No hot reloading dev site when using Vite?

Hey there, I’m excited to see vite, tailwind v4, and all the other updates to the project being actively worked on.

I spun up a new project to checkout the progress so far, but can’t seem to figure out why hot reloading does not work.

Setup

I’m using DevKinsta locally, so I follow these steps:

  1. Setup new empty site: DevKinsta → Add Site → Custom Site → Empty Site: Which sets up http://sage-latest.local

  2. Install bedrock: composer create-project roots/bedrock .

I delete the index.html and screenshot preview file DevKinsta creates on init, and install bedrock in the root directory

  1. I set my .env file. Setting the APP_URL here does not seem to do anything (not sure it is supposed to be here)
DB_NAME='sage_latest'
DB_USER='root'
DB_PASSWORD='xxxxxx'
DB_HOST='devkinsta_db'

APP_URL='http://sage-latest.local/' # ???

WP_ENV='development'
WP_HOME='http://sage-latest.local/'
WP_SITEURL="${WP_HOME}/wp"
  1. I change the nginx config web root to just /web because I don’t install it under /bedrock root /www/kinsta/public/sage-latest/web;

  2. Install Sage theme: Navigate into the themes dir cd /web/app/themes/ and install dev-main: composer create-project roots/sage sage-dev-main dev-main

  3. cd sage-dev-main && npm install && npm run build and enable new theme.

My Issue

Run npm run dev and in the output I see APP_URL: undefined but it is running correctly at http://sage-latest.local/. What port is hot reloading on?

> dev
> vite


  VITE v6.0.11  ready in 249 ms

  ➜  Local:   http://localhost:5173/app/themes/sage/public/build/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

  LARAVEL   plugin v1.2.0

  ➜  APP_URL: undefined

When I add this change to the app.css file if I manually reload, the site it does reflect the css change, but hot reloading does not work.

body * {
	@apply text-red-500;
}

System:
Linux (Pop!_OS 22.04 LTS)
node: v20.18.2
npm: 10.8.2
Edge/Chrome/FF latest

1 Like

Here’s what worked for me:

Add a .env at the root directory of the theme and set the local dev url as the app path:
APP_URL=https://example.test

1 Like

Thanks for the quick reply.

haha well that did it. Adding a separate .env to the theme folder made it work!

APP_URL='http://sage-latest.local'

Is this documented anywhere or what’s the best way to stay up to date with the latest sage 11?

I’d love to contribute even, if possible :beers:

There may be a better way to handle this for bedrock setups, but this vite config seems to work if you want to define your APP_URL in your bedrock .env:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite';
import laravel from 'laravel-vite-plugin'
import {
  wordpressPlugin,
  wordpressRollupPlugin,
  wordpressThemeJson,
} from './resources/js/build/wordpress'
import { resolve } from 'path'

export default defineConfig({
  base: '/app/themes/sage/public/build/',
  envDir: resolve(__dirname, '../../../../'),
  plugins: [
    tailwindcss(),
    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.js',
        'resources/css/editor.css',
        'resources/js/editor.js',
      ],
      refresh: true,
      url: process.env.APP_URL,
    }),

    wordpressPlugin(),
    wordpressRollupPlugin(),

    wordpressThemeJson({
      disableTailwindColors: false,
      disableTailwindFonts: false,
      disableTailwindFontSizes: false,
    }),
  ],
  resolve: {
    alias: {
      '@scripts': '/resources/js',
      '@styles': '/resources/css',
      '@fonts': '/resources/fonts',
      '@images': '/resources/images',
    },
  },
})
1 Like

I didn’t notice APP_URL was undefined but I get that too. In my case, it doesn’t seem to matter though. If I go to my test site at http://sage.test hot reloading works as expected without any extra configuration.

1 Like

There’s no docs just yet, but a proper Sage 11 pre-release is high on our list of priorities right now.

Thank you for such a detailed topic. Using the dev version and reporting issues/providing feedback like this is very helpful for everyone.

Like @Log1x, I don’t need to define APP_URL for HMR to work, but both you and @csorrentino at a minimum are needing it for whatever reason. I’ve made a note to mention it in the docs, but maybe we can figure out a better solution.

1 Like

Apologies for adding to the confusion. It looks like I also don’t need to have it defined for hot reloading to work with my dev setup (Valet). I guess I immediately tried to resolve the console message without realizing it’s a non-issue for me. :upside_down_face:

2 Likes

This helped my installation, fixed resolving fonts and fixing hot reload. Thanks! I think this should be added to the docs, to prevent APP_URL to be undefined.

:thinking: What’s your local dev environment like? If using Docker, are you running the build from a Docker container or from your host machine?

I did not take my local env in consideration of being an issue, because when I develop one of my Laravel application (which also uses Vite), there is now extra configuration needed. But I run my local env with DDEV, so basically Docker.

Again, are you running the build from your host machine or not?

Yes, I’m running the build from my host machine.

Looks like Laravel’s Vite plugin configures CORS settings if APP_URL is set

I’ve only tested a Docker (Lando) setup so far with running the build from a container, but if setting the APP_URL allows the build to work on your host machine then that’s helpful to know — thank you.

3 Likes

I’m using Lando on a container too, but I had to set the APP_URL to make it work.

1 Like

Thanks for posting. Makes sense — this is the Vite server config I’m using for Lando without setting APP_URL:

server: {
  host: "0.0.0.0",
  port: 5173,
  strictPort: true,
  cors: {
    origin: "https://example.lndo.site",
    credentials: true,
  },
  hmr: {
    host: "localhost",
    protocol: "ws",
  },
},

Setting the APP_URL is a bit easier :+1:

1 Like

This works, thanks!
Anyway is there a solution to make it also work on the network?
It’s telling me this is the url to connect in local network
http://10.0.0.15:5173
but it’s not working.

Someone on our Discord server shared their steps for network access on a Lando install