Laravel Breeze with Inertia - kanban project kick-off
Constantin Druc ยท 04 Apr, 2022
To kick-off any Laravel Breeze with InertiaJS project, I usually follow these steps:
- Navigate to projects directory and create a new larvel application using the laravel installer:
laravel new kanban
- Move inside the project directory and require laravel breeze using composer:
composer require laravel/breeze --dev
- Scaffold the breeze application using the inertia vue stack
php artisan breeze:install vue
- Install npm packages and run the dev script
npm install && npm run dev
- Create a mysql database, open the project in phpstorm and update the .env database connection.
- Open the
.editorconfig
and make it so thejs, css, vue, blade.php
extensions are indented using 2 spaces:[*.{yml,yaml,css,js,vue,blade.php}] indent_size = 2
- Enable the phpstorm editorconfig when prompted or by going to
Preferences>Code style
. - Make sure you can run tests using phpstorm by opening the
Preferences>PHP
panel and select the appropiate php version and CLI interpreter. Then go toPreferences>Testing Frameworks
and make sure phpstorm picks up the correct phpunit version. - Open the
webpack.mix.js
file and disable the mix notifications:mix.disableNotifications();
- Initialize git, add remote, push to master.
-
Laravel Breeze with Inertia - kanban project kick-off03:19
-
2TailwindCSS - Trello Kanban17:18
-
3Adding HeadlessUI dropdown menus - Trello Kanban04:21
-
4Extracting the authenticated layout - trello kanban08:31
-
5Creating the board list - Trello Kanban12:20
-
6Popover form using HeadlessUI, TailwindCSS and InertiaJS - Trello Kanban11:04
-
7Inline editable board name form14:19
-
8Inline editable board name form [B] - Trello Kanban02:31
-
9Creating board lists - Trello Kanban11:32
-
10Displaying cards from the database - Trello Kanban09:57
-
11Creating cards - Trello Kanban07:31
-
12Editing cards - Trello Kanban06:05
-
13Hide forms via cross-component communication - Trello Kanban03:31
-
14Moving and saving cards position using Vuedraggable - Trello Kanban19:09
-
15Edit card in HeadlessUI and InertiaJS modal - Trello Kanban12:27
-
Laravel Breeze with Inertia - kanban project kick-off03:19
-
2TailwindCSS - Trello Kanban17:18
-
3Adding HeadlessUI dropdown menus - Trello Kanban04:21
-
4Extracting the authenticated layout - trello kanban08:31
-
5Creating the board list - Trello Kanban12:20
-
6Popover form using HeadlessUI, TailwindCSS and InertiaJS - Trello Kanban11:04
-
7Inline editable board name form14:19
-
8Inline editable board name form [B] - Trello Kanban02:31
-
9Creating board lists - Trello Kanban11:32
-
10Displaying cards from the database - Trello Kanban09:57
-
11Creating cards - Trello Kanban07:31
-
12Editing cards - Trello Kanban06:05
-
13Hide forms via cross-component communication - Trello Kanban03:31
-
14Moving and saving cards position using Vuedraggable - Trello Kanban19:09
-
15Edit card in HeadlessUI and InertiaJS modal - Trello Kanban12:27