Vite is a modern frontend build tool that provides an extremely fast development environment and bundles your code for production. This is backend integration for CodeIgniter 4 to load your assets for development and production.
You can install it's as ThirdParty:
cd app/ThirdParty
git clone https://github.com/trianayulianto/vite-codeigniter-4.gitSet autoload in app/Config/Autoload.php
public $psr4 = [
// others
'Inertia' => APPPATH . 'ThirdParty/vite-codeigniter-4/src'
];First, you will need to install Vite using your npm package manager of choice:
npm install --save-dev viteYou may also need to install additional Vite plugins for your project, such as the Vue or React plugins:
npm install --save-dev @vitejs/plugin-vuenpm install --save-dev @vitejs/plugin-reactThanks to Laravel, configuring Vite has become easier with their plugin. See Laravel Vite Plugin.
npm install --save-dev laravel-vite-pluginUpdate environment variables
APP_URL="http://localhost:8000"
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
Create a vite.config.js file in the root of your project:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
// import react from '@vitejs/plugin-react';
// import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
// react(),
// vue({
// template: {
// transformAssetUrls: {
// base: null,
// includeAbsolute: false,
// },
// },
// }),
],
});If you are building an SPA, you will get a better developer experience by removing the CSS entry point above and importing your CSS from Javascript.
With your Vite entry points configured, you only need reference them in a vite() hepler that you add to the <head> of your application's root template:
...
<!-- ViteJs Helper -->
<?= vite('resources/js/app.js') ?>
...If needed, you may also specify the build path of your compiled assets when invoking the vite() hepler:
...
<!-- Given build path is relative to public path. -->
<?= vite('resources/js/app.js', 'vendor/dist') ?>
...If you are using React and hot-module replacement, you will need to include an additional helper before the vite() helper:
...
<!-- ViteJs Helper -->
<?= vite_react_refresh() ?>
<?= vite('resources/js/app.js') ?>
...composer test