Skip to main content

Khởi tạo dự án

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