Skip to main content

Khởi tạo dự án Laravel, cài đặt Filament

Các bước đầy đủ để khởi tạo dự án Laravel, Filament, Livewire và custom theme cho filament

1. Clone & Setup Laravel Project.

Tại thư mục htdocs của host (xóa thư mục public trước khi thực hiện)

composer create-project laravel/laravel .

Cấu hình .env:

cp .env.example .env
php artisan key:generate

Cập nhật database connection trong .env:

APP_NAME="Tên của app"
APP_URL="Đường dẫn tên miền"

// Điều chỉnh ngôn ngữ và vùng (nếu cần)
APP_LOCALE=vi
APP_FALLBACK_LOCALE=vi
APP_FAKER_LOCALE=vi_VN
...
...
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE="Tên database"
DB_USERNAME="Tài khoản database"
DB_PASSWORD="Mật khẩu database"

Chạy migrate:

php artisan migrate

2. Setup Node.js và npm (qua NVM)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install --lts

Xác nhận:

node -v
npm -v

3. Cài Filament Admin Panel

composer require filament/filament:"^4.0"
php artisan filament:install --panels
php artisan make:filament-user

Tạo user admin:

php artisan make:filament-user

Làm theo hướng dẫn để tạo tên, tài khoản và mật khẩu đầu tiên đăng nhập panel

4. Cài Livewire

composer require livewire/livewire
php artisan vendor:publish --force --tag=livewire:assets

5. Tạo Custom Theme Cho Filament

php artisan make:filament-theme

Sửa vite.config.js

Thêm dòng sau vào input của plugin Laravel:

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

Đăng ký theme trong AdminPanelProvider

File: app/Providers/Filament/AdminPanelProvider.php

->viteTheme('resources/css/filament/admin/theme.css')

Build theme

npm install
npm run build

6. Tùy chỉnh giao diện panel

Trong app/Providers/Filament/AdminPanelProvider.php, thêm các cấu hình:

use Filament\Support\Enums\Width;

->path('') // Loại bỏ /admin trong đường dẫn (nếu cần)
->maxContentWidth(Width::Full) // Full width cho trang
->sidebarCollapsibleOnDesktop() // Cho phép thu gọn sidebar
->sidebarWidth('13rem') // Giảm kích thước sidebar

7. Xóa route mặc định của Laravel

Mở file routes/web.php và comment route mặc định (cần thiết nếu bước trên đã loại bỏ /admin ):

// Route::get('/', function () {
//     return view('welcome');
// });

8. Chạy project

Chạy server Laravel:

php artisan serve

Mở trình duyệt:

https://{Tên miền}/admin (nếu giữ lại /admin)
http://{Tên miền} (nếu đã bỏ /admin)

Đăng nhập bằng tài khoản Filament đã tạo.

Hoàn tất! Hệ thống Laravel + Filament + Livewire + custom theme hoạt động hoàn chỉnh.
Từ đây, có thể:
Thêm các Resource, Page, hoặc Widget qua Filament.
Tuỳ chỉnh giao diện trong resources/css/filament/admin/theme.css.
Xây dựng các thành phần Livewire tương tác động.

Gợi ý nâng cao
Dùng npm run dev trong quá trình phát triển để auto reload CSS/JS.
Nếu muốn dark mode, thêm class hỗ trợ trong theme.css theo hướng dẫn Filament official docs.
Cấu hình domain thực tế và SSL khi deploy:

php artisan optimize:clear
php artisan config:cache
npm run build

Back to top