No hot reloading dev site when using Vite?

tay.lor.l · February 7, 2025, 3:51pm

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:

Setup new empty site: DevKinsta → Add Site → Custom Site → Empty Site: Which sets up http://sage-latest.local
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

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"

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;
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
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

csorrentino · February 7, 2025, 3:54pm

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

tay.lor.l · February 7, 2025, 4:11pm

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

csorrentino · February 7, 2025, 4:41pm

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',
    },
  },
})

Log1x · February 7, 2025, 4:57pm

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.

ben · February 7, 2025, 5:46pm

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.

csorrentino · February 7, 2025, 6:17pm

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.

dylanopafstand · April 17, 2025, 8:26am

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.

ben · April 17, 2025, 9:00pm

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

dylanopafstand · April 18, 2025, 7:39am

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.

ben · April 18, 2025, 12:12pm

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

dylanopafstand · April 18, 2025, 12:56pm

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

ben · April 18, 2025, 1:10pm

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.

druno · April 30, 2025, 8:41am

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

ben · April 30, 2025, 2:29pm

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

druno · May 5, 2025, 3:48pm

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.

ben · May 5, 2025, 5:23pm

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

Germaine_Wolf · May 12, 2025, 8:43pm

Hi, how can I connect with SSL Vite, and lando can’t make it.

    # Node.js service for frontend build tooling
  node:
    type: node:22
    ssl: true
    sslExpose: false
    overrides:
      ports:
        - '5173:5173'
    scanner: false
    run:
      - npm config set cache /app/.cache/npm
    command: tail -f /dev/null # Keep it running for faster command execution

This is my lando settings for the node container

Log1x · May 13, 2025, 1:09am

This looks nothing like Sage’s Vite config.