How To Configure Vite In Bagisto Separate Package ?

Amit Kumar

1 August 2023

Introduction :-

Vite’s approach is particularly suited for modern web development, where projects often use many smaller modules instead of a single large bundle. By taking advantage of native ES modules and efficient tools, Vite can significantly speed up the development workflow, making it an attractive choice for web developers. There is a detailed explanation in the Why Vite section of the official docs.

Start Configuring Vite :-

Create a new package in bagisto for vite-configuration . If you don’t have idea how to create package in bagisto. Please check here .
After creating the package. Navigate to the package folder from terminal.
Initialize the NPM package by running npm init in the package folder.
Inside your package folder, install Vite as a development dependency using npm or yarn

npm install vite --save-dev

2	npm install vite --save-dev

Create a Vite configuration file (vite.config.js) in the root of your package directory. This file will contain the Vite settings and plugins you want to use. Exp:-

import laravel from "laravel-vite-plugin";
import path from "path";

export default defineConfig({
    plugins: [
        laravel({
            hotFile: "../../../public/admin-default-vite.hot",
            publicDirectory: "../../../public",
            buildDirectory: "themes/admin/default/build",
            input: [
                "src/Resources/assets/css/app.css",
                "src/Resources/assets/js/app.js",
            ],
            refresh: true,
        }),
    ],
});

import laravel from "laravel-vite-plugin";

import path from "path";

export default defineConfig({

plugins: [

laravel({

hotFile: "../../../public/admin-default-vite.hot",

publicDirectory: "../../../public",

buildDirectory: "themes/admin/default/build",

input: [

"src/Resources/assets/css/app.css",

"src/Resources/assets/js/app.js",

refresh: true,

}),

});

Inside your package folder, create the assets (JavaScript, CSS, images, etc.) that you want to process and bundle using Vite. These could be Vue.js components, JavaScript modules, or CSS files.
Your package.json file should look like this, add scripts for building and serving your Vite assets. Also add the needed dependencies for development.

{
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "axios": "^1.4.0",
    "laravel-vite-plugin": "^0.7.2",
    "postcss": "^8.4.23",
    "vite": "^4.0.0",
  },
}

{

"private": true,

"scripts": {

"dev": "vite",

"build": "vite build"

"devDependencies": {

"axios": "^1.4.0",

"laravel-vite-plugin": "^0.7.2",

"postcss": "^8.4.23",

"vite": "^4.0.0",

}

After completing all the steps now we need to include vite in our main layout file of the package.

 @vite(['src/Resources/assets/css/app.css', 'src/Resources/assets/js/app.js'])

1	@vite(['src/Resources/assets/css/app.css', 'src/Resources/assets/js/app.js'])

Now you can check whether your vite is working properly by running this command

npm run dev

1	npm run dev

When you’re ready to build your package for production, run the build script to generate the optimized production build.

npm run build

1	npm run build

With these steps, you have now set up Vite in a separate package within your Bagisto project. This approach allows you to keep your Vite-related code and assets separate from the core Bagisto codebase, making it easier to manage and maintain your customizations.

Thanks for reading this blog. Please comment below if you have any question. Also you can hire laravel developers for your custom laravel projects. kindly explore our extensions.