No hot reloading dev site when using Vite?

sage
,
1

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
2

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
4

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:

5

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
6

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
7

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
8

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
9

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.

10

: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?