If you haven't already, make sure you have your local environment setup.
We have an NPM package that handles the entire setup process
cd ~/projects/
mkdir project-name && cd project-name
npm i mwi-laravel-setup
For instructions on the setup script visit MWI Laravel Setup
python setup.py -n -p
For ease of use we'll add some composer scripts to our composer.json
file.
"sniff": "phpcs -p ./app",
"sniff:fix": "phpcbf -p ./app",
"test": "phpunit",
"sniff:test": "composer sniff && phpunit"
The first just sniffs, second fixes the sniff errors it can, third runs phpunit tests and four sniffs and tests together.
These are additional packages that will help in the development of the project.
This package is setup by default
MWI Laravel CRUD Documentation
Super handy components for form creation
composer require mwi/laravel-forms
MWI Laravel Forms Documentation
This package is set up by default
Spatie Permissions Documentation
Always be sure to run the following command during a projects set up
npm install
We utilize laravel mix to handle the building of assets. Visit the MIX Documentation for more information.
Structure your assets by core
, theme
and application
as necessary in the webpack.mix.js
file.
// Theme Styles
mix.styles('resources/assets/css/theme.css', 'public/css/theme.css')
// Application Styles
.sass('resources/assets/sass/app.scss', 'public/css');
// Core Scripts for Every Page
.scripts([
// -- Your Core Scripts/Dependencies
"resources/assets/lib/jquery/jquery.min.js",
"resources/assets/js/main.js"
], 'public/js/core.js')
// Scripts for the Theme
.scripts([
// -- Your Theme Scripts/Dependencies
"node_modules/select2/dist/select2.js"
"resources/assets/js/theme.js",
], 'public/js/theme.js')
// Application JavaScript
.js('resources/assets/js/app.js', 'public/js/app.js')
.sourceMaps();
These packages are on an as need basis. If a theme was incorporated they may not be necessary.
For masking inputs
npm install inputmask
For form validation
npm install parsleyjs
For select dropdowns/multiselects
npm install select2
For card based layouts
npm install masonry-layout
Note Some of these guides are still a work in progress.
For more information on how to utilize various features of this kit visit the following: