With a better Webpack build process using Laravel Mix and Browser-Sync
-
Install a new Laravel project like normal
laravel new <project_name>
-
Download this repo, then copy and replace the existing
/resources
directory andwebpack.mix.js
file, with the ones found in this repo. -
Update the
proxy
andhost
to use your local domain in thewebpack.mix.js
file within the.browserSync()
method. -
Install dependencies:
npm install browser-sync uikit --dev
-
Run
npm run dev
to compile files. -
Run
npm run watch
to compile and watch files. -
Append
:3000
to URL for live reloading via Browser-Sync.
-
/resources
-
/js/app.js
imported UIkit & UIkit icons. -
/scss
/global
contains a ready to go_nav.scss
&_footer.scss
/uikit/_globals.scss
for overriding UIkit global variables./uikit/_components.scss
prepped with all component variables AND hook mixins!!! Well organized and even wrapped with code folding elements for VS Code & IntelliJ editors.app.scss
one import file to rule them all.
-
/views
/global
contains a simplenav.blade
&footer.blade
/layouts
has a boilerplateapp.blade
layout wrapping all views.welcome.blade
as the current home view to match Laravel's default route.
-
-
/webpack.mix.js
- Disables the compilers annoying constant notifications
- Added source maps
- Added Browser-Sync
- Added cache-busting