Laravel css/js builds are not loading

dinithshenuka

FREEOP

a year ago

I’m hosting a Laravel 12 project and using the Railpack builder. I’ve encountered an issue where my production build is rendering incorrect asset URLs. The generated CSS/JS paths contain a literal ${APP_URL} in the URL, like this: https://example.up.railway.app/${APP%5FURL}/build/assets/app-BoLgPTYG.css

But the expected path should be: https://example.up.railway.app/build/assets/app-BoLgPTYG.css Right?

Anyway, the assets are not loading. There are no error logs, and everything is set to default. I haven’t changed anything in the project. I’ve also added the APP_URL to the .env file correctly.

Can y’all please advise if there’s something I need to adjust in the Railpack configuration to fix this? Or is there a known issue with environment variable interpolation during Vite builds on Railway? Or anything I need to change in my codebase?

Solved$10 Bounty

Pinned Solution

idiegea21

HOBBY

a year ago

Looking at your issue, the problem is that ${APP_URL} is appearing literally in your asset URLs instead of being interpolated with the actual environment variable value. This suggests an environment variable interpolation issue during the build process. Also, your currentvite.config.ts doesn't specify a base URL. Try updating it to explicitly handle the APP_URL:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
  ],
  build: {
    rollupOptions: {
      output: {
        manualChunks: undefined,
      },
    },
  },
  base: process.env.NODE_ENV === 'production' ? process.env.APP_URL + '/' : '/',
});

4 Replies

dinithshenuka

FREEOP

a year ago

This is how it looks

Attachments

Screenshot%...

dinithshenuka

This is how it looks

samgordon

PRO

a year ago

Can you please share vite.config.ts?

samgordon

Can you please share `vite.config.ts`?

dinithshenuka

FREEOP

a year ago

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({

plugins: [

laravel({

input: ['resources/css/app.css', 'resources/js/app.js'],

refresh: true,

 }),

 ],

});

idiegea21

HOBBY

a year ago

Looking at your issue, the problem is that ${APP_URL} is appearing literally in your asset URLs instead of being interpolated with the actual environment variable value. This suggests an environment variable interpolation issue during the build process. Also, your currentvite.config.ts doesn't specify a base URL. Try updating it to explicitly handle the APP_URL:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
  ],
  build: {
    rollupOptions: {
      output: {
        manualChunks: undefined,
      },
    },
  },
  base: process.env.NODE_ENV === 'production' ? process.env.APP_URL + '/' : '/',
});