npm run build assets linking to root folder instead of sub folder

Level 63

Where do you execute npm run build ?

Level 1

In local and upload the files into the server

1 like

Level 63

Have you configured an output folder for the manifest ?

Level 1

I have not.. I haven't done a subfolder yet so don't know what needs to be done. All other "parent" directory apps have been working fine this way. How/What do we need to configure in manifest?

My manifest.json looks something like this..

 "_InputError.vue_vue_type_script_setup_true_lang-BzZ7bi1s.js": {
"file": "assets/InputError.vue_vue_type_script_setup_true_lang-BzZ7bi1s.js",
"name": "InputError.vue_vue_type_script_setup_true_lang",
"imports": [
  "resources/js/app.ts"
]
},

Level 1

I just saw in app.php a class named AddLinkHeadersForPreLoadedAssets.php

public function handle($request, $next)
{
    return tap($next($request), function ($response) {
        if ($response instanceof Response && Vite::preloadedAssets() !== []) {
            $response->header('Link', (new Collection(Vite::preloadedAssets()))
                ->map(fn ($attributes, $url) => "<{$url}>; ".implode('; ', $attributes))
                ->join(', '), false);
        }
    });
}

Is there something here?

1 like

Level 63

@maharzan Where does this code come from ? I don't have it my Laravel applications.

Level 1

I am using laravel 12 with vue inertia starter kit. vendor/laravel/framework/src/Illuminate/Http/Middleware/AddLinkHeadersForPreloadedAssets.php

1 like

Level 63

@maharzan Can you show the vite.config.js file ?

Level 1

import vue from '@vitejs/plugin-vue';
import autoprefixer from 'autoprefixer';
import laravel from 'laravel-vite-plugin';
import path from 'path';
import tailwindcss from 'tailwindcss';
import { resolve } from 'node:path';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.ts'],
            ssr: 'resources/js/ssr.ts',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, '/resources/js'),
            'ziggy-js': resolve(__dirname, 'vendor/tightenco/ziggy'),
        },
    },
    css: {
        postcss: {
            plugins: [tailwindcss, autoprefixer],
        },
    },
});

1 like

Level 63

@maharzan Not sure, but you have perhaps something to do with these 2 lines.

base: null,
includeAbsolute: false,

Level 1

In package.json there is this

"build": "vite build",

I changed to

"build": "vite build --base /timesheet",

and the assets seems to be resolved but I could only load the login page. I couldn't make the other routes work. So, I have now opted to use the subdomain instead which seem to work without much thinking..

Thanks for your help everyone.

1 like