trevorpan's avatar

index.html vs. master.blade.php with vite in production

Despite many docs & plugins I've had quite a challenge getting vite to production.

When I build locally npm run build I see the site as it is supposed to look. However, when building locally and pushing to production the entry file uses index.html which is a very simple page blank page.

How do you handle this?

I found rollupOptions for the vite config where we may override the default entry point of /public/index.html, but this caused errors because vite cannot interpret blade.

// vite.config.js
import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import manifestSRI from 'vite-plugin-manifest-sri'
....
plugins: [
                laravel({
                    input: [
                        'resources/css/app.css',
                        'resources/js/app.js'
                    ],
                    refresh: ['resources/views/**'],
                    manifest: true
                }),
                vue({
                    template: {
                        transformAssetUrls: {
                            base: null,
                            includeAbsolute: false
                        }
                    }
                }),
                manifestSRI()
            ],
...
    build: {
                rollupOptions: {
                    input: {
                        app: './resources/views/layouts/master.blade.php' // default
                    }
                },

Andre's video is not using the rollupOptions. https://github.com/laracasts/lc-vite-example/blob/main/vite.config.js

0 likes
3 replies
LaryAI's avatar
Level 58

It sounds like you are trying to use the master.blade.php file as the entry point for your Vite application. Unfortunately, Vite does not support blade files as entry points, so you will need to use the index.html file instead.

You can still use the master.blade.php file to render your application, but you will need to include the index.html file in the master.blade.php file. You can do this by using the <iframe> tag, like so:

<iframe src="{{ asset('index.html') }}" frameborder="0" width="100%" height="100%"></iframe>

This will allow you to use the master.blade.php file to render your application, while still using the index.html file as the entry point for your Vite application.

trevorpan's avatar

Sorry to say, that did not work. It pushed the master.blade.php elements down the page considerably. It did render in production.

To try something else, I made an iframe in the index.html file for the master.blade.php and got this error: No input file specified.

Surely, people have figured this out. May anyone share their knowledge here?

trevorpan's avatar
trevorpan
OP
Best Answer
Level 15

ended up deleting index.html and removing the rollupOptions in vite.config.js.

That solved the issue. Sorry, Lary, but at least it put me on a path...

Please or to participate in this conversation.