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 initin the package folder. - Inside your package folder, install Vite as a development dependency using npm or yarn
|
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:-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "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.
|
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
|
1 |
npm run dev |
- When you’re ready to build your package for production, run the
buildscript to generate the optimized production 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.
Be the first to comment.