README

Multiple scaffolding options for Laravel application.

Installing Vue, adding Vue Router/Inertia as your frontend router, adding Vuex as state manager. Replacing Webpack with Vite or installing Browser Sync plugin for Webpack. Also adds scaffolding for Docker with any of these presets mentioned.

Installation

You can install the package via composer:

composer require usanzadunje/scaffold-laravel

Usage

php artisan scaffold [preset]

Available presets :

vue
vue-router (if you have vue application set up)
vuex (if you have vue application set up)
vite (replaces webpack for vite)
docker
all (installs vue, vite and docker preset all together)

Vue

Will generate following files and directories inside your resources/js directory :

components directory
composables directory
views directory and Example.vue inside it
app.js files with minimal scaffolding for Vue application
app.blade.php file with #app container defined
Change / route to return app view instead of welcome

Additionally, it will ask if you would like router or state manager installed as well.

Vue Router

Will generate following files and directories inside your resources/js directory :

router directory and inside it basic scaffolding for routes with one example route defined
Welcome.vue file inside views which will be shown for example route defined
ExampleApp.vue which will serve as entrypoint to router (it has defined in it)
It will initialize itself inside app.js file

Additionally, it will ask if you would like basic middleware scaffolding for your routes. This will then create middlewarePipeline.js file which is responsible for calling all middlewares defined on certain route. And inside router/index,js file where routes are defined it will add beforeEach navigation gourd and call this pipeline.

Routes which require middleware(s) should have meta filed with middleware property defined on them which is an array of middlewares. You can define your middlewares in middlewares directory which will be created along with example middleware.

Vuex

Will generate following files and directories inside your resources/js directory :

store directory and inside it basic scaffolding for vuex in module fashion
Module.js file inside store which is example of single module state
It will initialize itself inside app.js file
Vuex scaffolding comes along with vue-persistedstate plugin which will persist data from state in Local Storage

Vite

Will remove all packages, scripts and files associated with Webpack. Additionally, it will create vite.config.js in root of project directory and setup basic configuration.

If you have Vue installed it will add Vite plugin for Vue and optimize configuration for it as well (same goes if Vue Router or Vuex are installed)

If you installed Vue using this package it will generate app.blade.php file and Vite scaffolding will remove assets(css/js) imported using Webpack and generate @vite blade directive which will generate imports for Vite assets(css/js). If you however do not have app.blade.php file it will not try and replace these, so you will need to add @vite directive yourself to your layout file. It will also import your css/app.css file inside app.js since this is how Vite handles css.

Docker

Will generate docker-compose.yml and docker-compose.prod.yml files with container details. Also it will generate docker-compose directory which contains configuration for: nginx, php, suppervisord and initialization scripts for development and production.

It will adopt itself depending on whether you use Webpack or Vite in order to work smoothly with them and change Webpack or Vite configuration accordingly

It will change your .env file and following contents of it:

DB_HOST and set it to db so docker can resolve it, since database will live inside container
DB_USERNAME only if it is set to root and will change it to laravel
DB_PASSWORD only if it is set to nothing(empty) and will change it to laravel
DB_PORT only if it is set to something other than 3306 since this is port used by container_name

Additional information:

Database port exposed on your local machine is set to 3310 if you want to connect to it from your host machine.

Application port if using with Webpack but without Browser Sync plugin setup will be exposed to 8000(served on localhost:8000).

If you are however using Webpack with Browser Sync port exposed will be 3000 (served on localhost:3000)

When using Vite port exposed will be 3000 (served on localhost:3000)

Scripts that are responsible for applications in production / development are inside docker-compose directory, and they are init.sh / initDev.sh files respectively. Feel free to change them as these are commands that will run on start of the container which hold application.

Disclaimer

This is my first package, and I made it primarily because I caught myself doing same things on almost every project(copy -> pasting) so I wanted to save myself some time and created this. I also tweaked it a little, so it could be used in multiple occasions so maybe other people can use it. But keep in mind it was made having my problems in mind.

If you have any suggestion that would help you or things to add I would be happy to do it. If it helps one person I would be glad :).

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

License

The MIT License (MIT). Please see License File for more information.

usanzadunje / scaffold-laravel

Maintainers

Details

README

Installation

Usage

Vue

Vue Router

Vuex

Vite

Docker

Disclaimer

Changelog

Contributing

Security Vulnerabilities

Credits

License