Guidance on Integrating Templates in Laravel Using NPM and Webpack

@gych, thanks for the reply. I'm aiming to integrate the Bootstrap AdminLTE template or another suitable backend template. For the frontend, I'd like to incorporate a different template using Bootstrap and jQuery with separate CSS and JS files, including only admin.css and admin.js in my layout.

Additionally, I'm interested in integrating DataTable, Select2, and other Twubowg features. Could you provide step-by-step guidance or point me in the right direction for this comprehensive process?

Thank you.

@pratikbhujel

• Import your js files directly to bootstrap.js, by default bootstrap.js should already be imported in app.js You can also import the files directly to app.js, but I prefer to import those files in bootstrap.js for a cleaner setup

• If you look in the vite config you'll see that app.js is already added to the build input

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

For css you can import your css files in app.css because as you can see in the above example by default app.css is also already added to the input.

If you want you can also add files directly to the input instead of adding them via bootstrap.js/app.js or app.css files. As you can see in the example below, I added admin.css.

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

But personally I rarely do that, I mostly add files to app.css and bootstrap.js/app.js