Laravel creates an admin panel from scratch — Part 14
Laravel Vite
Laravel team announced that Vite is now the default frontend asset bundler. Also, the Laravel team launched the official vite-plugin
Taylor Otwell 🪐@taylorotwell
Today we're pumped to announce that new Laravel projects use Vite to bundle frontend assets. Breeze and Jetstream have been updated as well. 🔥
Experience lightning fast Hot Module Replacement when using the new Breeze / Vite stack with Inertia Vue or React. ⚡14:49 PM - 28 Jun 2022
Why Vite
Vite is a new breed of frontend build tool that provides an extremely fast development environment and bundles your code for production. The official why vite document has in-depth details.
Migrating from Laravel Mix to Vite
We going to migrate our Basic admin panel from Laravel Mix to Vite. The migration involved the below steps. The official Laravel Vite plugin includes an in-depth migration guide.
- 1. Install Vite and the Laravel Plugin
- 2. Configure Vite
- 3. Update NPM scripts
- 4. Replace require to import
- 5. Update environment variables
- 6. Replace mix() with @vite
- 7. Remove Laravel Mix
- 8. Configure Tailwind
- 9. Using Sail
1. Install Vite and the Laravel Plugin
First, you will need to install Vite and the Laravel Vite Plugin using your npm
npm install --save-dev vite laravel-vite-plugin
If you using Vue or react, additional Vite plugins need to install for your project
npm install --save-dev @vitejs/plugin-vue
npm install --save-dev @vitejs/plugin-react
2. Configure Vite
Create a vite.config.js file in the root of your project
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});
3. Update NPM scripts
Update your NPM scripts in package.json
"scripts": {
- "dev": "npm run development",
- "development": "mix",
- "watch": "mix watch",
- "watch-poll": "mix watch -- --watch-options-poll=1000",
- "hot": "mix watch --hot",
- "prod": "npm run production",
- "production": "mix --production"
+ "dev": "vite",
+ "build": "vite build"
}
4. Replace require to import
The Vite only supports ES modules, so if you are upgrading an existing application you will need to replace any require() statements with import. You may refer to this pull request for an example.
resources/js/app.js
-require('./bootstrap');
+import './bootstrap';
import Alpine from 'alpinejs';
resources/js/bootstrap.js
-window._ = require('lodash');
+import _ from 'lodash';
+window._ = _;
/**
* We'll load the axios HTTP library which allows us to easily issue requests
@@ -6,7 +7,8 @@ window._ = require('lodash');
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
-window.axios = require('axios');
+import axios from 'axios';
+window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
@@ -18,11 +20,15 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
// import Echo from 'laravel-echo';
-// window.Pusher = require('pusher-js');
+// import Pusher from 'pusher-js';
+// window.Pusher = Pusher;
5. Update environment variables
Open your .env files and in hosting environments such as Forge to use the VITE_ prefix instead of MIX_
- MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
- MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+ VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+ VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
You will also need to update these references in your JavaScript code to use the new variable name and Vite syntax:
resources/js/bootstrap.js
- key: process.env.MIX_PUSHER_APP_KEY,
- cluster: process.env.MIX_PUSHER_APP_CLUSTER,
+ key: import.meta.env.VITE_PUSHER_APP_KEY,
+ cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
6. Replace mix() with @vite
We need to use the @vite Blade directive instead of the mix() helper. This will automatically detect whether you are running in serve or build mode and include all of the required and for you
resources/views/layouts/app.blade.php
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
- <!-- Styles -->
- <link rel="stylesheet" href="{{ asset('css/app.css') }}">
-
<!-- Scripts -->
- <script src="{{ asset('js/app.js') }}" defer></script>
+ @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
All the entry points should match those used in your vite.config.js.
7. Remove Laravel Mix
The Laravel Mix package can now be uninstalled
npm remove laravel-mix
And you may remove your Mix configuration file
rm webpack.mix.js
8. Configure Tailwind
We are using Tailwind, so we need to create a postcss.config.js file. Tailwind can generate this for you automatically
npx tailwindcss init -p
Or, you can create it manually:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
If you are using other PostCSS plugins, such as postcss-import, you will need to include them in your configuration.
9. Using sail
We using Sail, so we need to set it up to forward the port you are using to the container. Update ourdocker-compose.yml to add 5137 port.
ports:
- '${APP_PORT:-80}:80'
- '5173:5173'
The development server will run inside the container. To install dependencies, use sail npm ci. Then sail run dev to start the server.
Also, configure Vite to listen to 0.0.0.0
If you are using Windows with WSL, hmr a host is required. Refer to the issue https://github.com/laravel/vite-plugin/issues/49
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
server: {
host: '0.0.0.0',
hmr: {
host: 'localhost',
},
},
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});
We have successfully migrated our Admin panel from Laravel Mix to Vite.
The Laravel admin panel is available on https://github.com/balajidharma/basic-laravel-admin-panel. Install the admin panel and share your feedback.
Thank you for reading.
Stay tuned for more!
Follow me at balajidharma.medium.com.
Previous part — Part 13: Implement Delete Confirmation in Laravel CRUD
Next part — Part 15: Coming soon
Top comments (0)