Laravel BS4 Vue CoreUI Boilerplate

This is a Bootstrap 4 starter kit site with lite blogging feature, user account registration/management and full Vue CoreUI Backend based on Laravel 5.5, inspired by the popular Laravel 5 Boilerplate. Unit & feature tests are not integrated yet, therefore this project isn't rock-solid for now.

Demo

• Frontend demo : https://laravel-boilerplate.pc-world.fr
• Backend demo : https://laravel-boilerplate.pc-world.fr/admincp ([email protected]/demo, read-only)

Features

Frontend

• Bootstrap 4 Frontend with basic home-about-contact and legal mentions pages,
• Slick carousel and Cookie Consent integrated,
• Blog section, including navigation by tags & authors,
• Intervention image for dynamic optimized images with cache plugin,
• Turbolinks included for fast navigation,
• Login throttle by recaptcha & password strength meter,
• Frontend user space and profile management. Email validation included. Registration can be disabled by environment parameter,
• Laravel Socialite included with all supported socialite providers (facebook/twitter/linkedin/github/bitbucket).

Backend

Underlying layer

• Based on Bootstrap 4 CoreUI theme with many useful plugins (SweetAlert2, Flatpickr, CKEditor 5, etc.),
• Entirely written with Vue components thanks to Bootstrap-Vue, absolutely no jQuery dependency,
• Vue-route for instant client-side navigation,
• Native Vue Datatable, with everywhere search input and batch actions features,
• All main CRUD actions are ajaxified,
• Native vue-select component for powerful select system (autocomplete, tags, etc.),
• Batch actions integrated within DataTables,
• Instant search engine (for posts) thanks to Laravel Scout & TNTSearch.

Features included

• User and permissions management (classic users <-> roles <-> permissions structure),
• Impersonation feature for quick user context testing,
• Frontend forms module, including settings (recipients and translatable message confirmation) & submissions management,
• Posts management for frontend blog, with granular publication permissions (classic draft-pending-published workflow). Posts include title, summary, html body, tags, featured image, metas. They can be published and/or unpublished at specific datetime and pinned if needed. Specific user can have limited access to his own posts only, according to his permissions,
• Wysiwyg drag & drop image upload.

Localization & SEO

• Multilingual ready thanks to Laravel Localization package. Each routes are prefixed by locale in URL for best SEO support. For this boilerplate, EN & FR locales are 100% supported, including translated routes,
• Model Field Translatable support with Laravel Translatable, used for contact form confirmed message, metatags and posts,
• Robots and Sitemap integrated, including multilingual alternates,
• Full Metatags manager interface with translatable title & description. Meta entity can be either linked to route or specific entity like post,
• 301/302 redirections manager interface, with CSV/XLSX import feature.

Developer Specific

• Usage of Laravel-Mediable package for orderable media model management, used for featured image on posts,
• Permissions configuration based on config file rather than database,
• Form types defined on config file for settings & submission support. This boilerplate include just one "contact form" type,
• Custom webpack integration rather than laravel mix, for better flexibility (cf bellow),

Install

1. composer create-project --prefer-dist --stability=dev adr1enbe4udou1n/laravel-boilerplate my-new-project
2. Set database and environment variables from .env.example
3. Set Web write permission if needed to bootstrap/cache and storage folders.
4. Launch follow commands :

For Production :

composer install --no-dev --optimize-autoloader
php artisan key:generate
php artisan storage:link
php artisan migrate --force

For Local/Development :

composer install
php artisan key:generate
php artisan storage:link
php artisan migrate [--seed]

Initialize search index for posts

php artisan scout:import "App\Models\Post"

Laravel Scout takes care of updating posts index on CUD operations.

Backend access

The first user to register will be automatically super admin with no restriction and will cannot be deletable. Both frontend and backend have dedicated login pages.

Development notes

Compiling assets with Webpack

1. Install dependencies with yarn
2. Launch yarn dev for compiling assets and start dev-server with HMR enabled (preferred way for fast admin building)

N1 : Use yarn watch if you prefer old school watcher
N2 : If assets modified, don't forget to launch yarn prod before deploy on each production environment.

Permissions definitions

Unlike other known project as ENTRUST or laravel-permission, which are very well suited for generic roles/permissions, i preferred a more lite and integrated custom solution.

The mainly difference is that instead of store all permissions into specific SQL table, there are directly defined in a specific config file permissions. SQL side, roles entities relies only to a list of permissions key names.

Indeed i feel this approach better for maintainability simply because permissions are hardly tied to the application with Laravel Authorization. This is anyway the standard way in CMS as Drupal where each module have specific config permission file. Permissions should be only owned by developers.

Note on Laravel Mix

You will observe that this boilerplate does not use Laravel Mix which is shipped in Laravel for all assets management.

Laravel Mix still stay awesome for newcomers thanks to his laravel-like webpack fluent API, but, even if Laravel Mix can be easily overridden, for this project i preferred use my custom framework-free webpack setup in order to have total control of assets workflow.

For instance, with this custom setup HMR work natively with configurable port (essential for easy vue admin developpement) and productions assets are bundled into specific "dist" directory.

Code styling

PHP-CS-Fixer & ESLint are used for strong style guidelines for both server and client side code.

PHP is pre-configured for official Laravel styling, just launch ./vendor/bin/php-cs-fixer fix for global project auto-formatting.

JS use JavaScript Standard Style & eslint-loader is used within webpack for dynamic code styling recommendations.
Moreover, Official ESLint plugin for Vue.js is included for heavy consistent code through all components vue files.

TODO

• Data seeds
• Batch actions
• Form & menu access helpers
• Metas management
• Permissions management
• Form submissions management
• Client validation with vee-validate
• 301 redirection management with CSV/XLS import
• Own account deletion
• Account language & timezone selection
• Account mail confirmation
• Account avatar
• Facebook/Twitter/Google Sign in with socialite package
• Blog system (posts, publication date, multilangue, HTML wysiwyg, tags, featured image, medias, public user profile)
• Dashboard
• Switch to full Bootstrap 4 for both Frontend & CoreUI Backend
• Migrate to 100% client-side Vue backend with vue-route
• Migrate to Bootstrap-Vue
• Webpack bundle size optimizations
• Get rid of jquery datatables
• Consistent VueJS components code styling
• Inclusion of unit/featured/browser tests (stand by for now)

License

This project is open-sourced software licensed under the MIT license.