Skip to content
Laravel Modular Approach
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
bootstrap
config
database
modules
public
resources
routes
storage
tests
.env.example
.gitattributes
.gitignore
.phpstorm.meta.php
README.md
_ide_helper.php
artisan
composer.json
composer.lock
package-lock.json
package.json
phpunit.xml
server.php
webpack.mix.js

README.md

Modular Laravel with Laravel-Modules and Laravel-Multimix

An awesome way to have separate concerns on backend and frontend.
Instructions below pictures

See it in action here Live Demo, with Vue and React DevTools Enabled

ModularLaravelImg

The purpose is to have multi frontend scaffolding pipelines, one per module, all of it from project root

If you have been building apps with a considerate high ammount of "areas", concerns and/or using different frontend dependencies, you know what I'm talking about.

Folder_structure_1 Folder_structure_2

This implementation approach is combining nWidart/laravel-modules and fandogh/laravel-multimix

Implementation keypoints:

  • Multiple frontend asset pipelines (webpack.mix.js)

  • Multiple manifest.json files (one per module)

See it in action here Live Demo, with Vue and React DevTools Enabled

This will be as easy as

npm run mix dev <MODULE_NAME> 

Thank you to the developers of both great packages

Laravel-Modules nWidart/laravel-modules

Laravel-Multimix fandogh/laravel-multimix

Example, for a Product Module

npm run mix dev Product

## or

npm run mix watch Product

npm run mix production Product

Also, poll and hot are presets available, but haven't still tried it out.

Each module will have its own package.json with frontend dependencies, and its own webpack.mix.js

In this example, not only separating concerns, but also making:

  • Frontoffice Module with TailwindCSS + VueJs

  • Cart Module with VueJS + Bootstrap

  • Product Module with ReactJs + Bulma

Frontend assets will be on "public/modules/<MODULE_NAME>"

public/modules/Product/mix-manifest.json
public/modules/Product/js/*
public/modules/Product/css/*

(...)

public/modules/Cart/mix-manifest.json
public/modules/Cart/js/*
public/modules/Cart/css/*

(...)

Mix helper on Blade Files will receive the manifest.json path as 2nd argument

<link rel="stylesheet" href="{{ mix('css/product.css','modules/Product') }}">

Try it out

git clone https://github.com/ijpatricio/laravel-modules-multimix.git

cp .env.example .env

composer install

php artisan key:generate

valet open ## or open the app in browser

Key files to inspect

From analyzing these three files, you get the picture of how it's working

webpack.mix.js
modules/Cart/webpack.mix.js
Cart/Resources/views/layouts/master.blade.php

To compile assets for a module, remember you have to have its dependencies installed.


cd modules/<ModuleName>

npm install

You can’t perform that action at this time.