Sage + Vite: APP_URL Undefined Issue with Valet

sage
,
1

Hello,

I’ve just started building a theme using the latest version of Sage in combination with Bedrock. Previously, the theme used Bud, but the newer version now utilizes Vite, which I’m not entirely familiar with.

I’ve modified the Vite configuration to reflect my custom theme by setting:

base: '/app/themes/xx/public/build/'

However, whenever I run npm run dev, I receive the error:

APP_URL: undefined

This is strange because I’ve already added APP_URL to my .env file.

Additional context:

  • I’m using a Mac and serving the website with Valet.
  • I’ve built multiple websites with Bud, so I’m relatively familiar with the Roots ecosystem.
  • My local development URL points to:
    http://localhost:5173/app/themes/xx/public/build/
    When I visit this, I see the placeholder page:
    “This is the Vite development server that provides Hot Module Replacement for your Laravel application.”
  • When I access my Valet URL (http://mywebsite.com.test/), I see the Sage theme running as expected.

Any insights into why APP_URL is coming up as undefined? Could this be a Valet or environment configuration issue?

.env

DB_NAME=xxxxxx
DB_USER=xxx
DB_PASSWORD=xxx

WP_ENV='http://mywebsite.com.test'
WP_HOME='http://mywebsite.com.test'
WP_SITEURL="${WP_HOME}/wp"

APP_URL='http://mywebsite.com.test'

# Specify optional debug.log path
# WP_DEBUG_LOG='/path/to/debug.log'

# Generate your keys here: https://roots.io/salts.html
AUTH_KEY='generateme'
SECURE_AUTH_KEY='generateme'
LOGGED_IN_KEY='generateme'
NONCE_KEY='generateme'
AUTH_SALT='generateme'
SECURE_AUTH_SALT='generateme'
LOGGED_IN_SALT='generateme'
NONCE_SALT='generateme'

Package.json

{
  "name": "sage",
  "private": true,
  "engines": {
    "node": ">=20.0.0"
  },
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "translate": "npm run translate:pot && npm run translate:update",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"theme.json,patterns,app,resources\"",
    "translate:update": "for file in ./resources/lang/*.po; do wp i18n update-po ./resources/lang/sage.pot $file; done",
    "translate:compile": "npm run translate:mo && npm run translate:js",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print",
    "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
  },
  "devDependencies": {
    "@roots/vite-plugin": "^1.0.2",
    "@tailwindcss/vite": "^4.0.9",
    "laravel-vite-plugin": "^1.2.0",
    "tailwindcss": "^4.0.9",
    "vite": "^6.2.0"
  }
}

Composer Bedrock:

"require": {
    "php": ">=8.1",
    "composer/installers": "^2.2",
    "vlucas/phpdotenv": "^5.5",
    "oscarotero/env": "^2.1",
    "roots/acorn": "^v5.0",
    "roots/bedrock-autoloader": "^1.0",
    "roots/bedrock-disallow-indexing": "^2.0",
    "roots/wordpress": "6.7.2",
    "roots/wp-config": "1.0.0",
    "roots/wp-password-bcrypt": "1.2.0"
  },
2

That’s coming from Laravel’s Vite plugin, but it’s not needed so we’re just ignoring it for now

When you have the Vite dev server running, just visit your main site and you’ll be good to go

3

Oh, that was silly of me. I thought something was wrong, but it turns out everything is working fine! Does this mean there’s no easy way to view the website on a mobile device? With Bud, this was relatively simple by serving it via my local IP.

4

Take a look at Server Options | Vite

5

Thanks for the quick response and your hel. I really appreciate it! I’ve added:

server: {
  host: 'xxx.xxx.x.x',
  port: 3000,
},

to my config, and now I can access the splash page on my mobile device, the one I mentioned earlier with the APP_URL error. Could this be happening because APP_URL isn’t set? Apologies if this is an obvious question—I’m still finding my way around Vite.