10

What I want to create is a web application with Laravel Lumen and VueJS, where Laravel Lumen is used for an API and VueJS for a SPA. In the application I want an admin section, a small forum and the website. I want to reuse this concept in future projects where I can easily decide if I want a forum or admin section in the website, or possibility to expand easily like adding a shop.

My concept idea of structure

My idea was to make three separate vue instances of the different sections inside the Lumen project. A example of the directory structure would look as follow:

(lumen project)
  ├── app
  ├── node_modules
  ├── public
  ├── resources
  │   ├── js
  │   │   ├── admin
  │   │   │   ├── components
  │   │   │   ├── router
  │   │   │   ├── store
  │   │   │   ├── views
  │   │   │   └── admin.js    // where I create a vue instance
  │   │   ├── forum
  │   │   │   ├── components
  │   │   │   ├── router
  │   │   │   ├── store
  │   │   │   ├── views
  │   │   │   └── forum.js    // where I create a vue instance
  │   │   └── site
  │   │       ├── components
  │   │       ├── router
  │   │       ├── store
  │   │       ├── views
  │   │       └── site.js     // where I create a vue instance
  │   ├── sass
  │   │   ├── admin
  │   │   ├── forum
  │   │   └── site
  │   └── views
  ├── routes
  ├── package.json
  ├── webpack.mix.js
  ...

With Laravel-mix the js/vue and sass files will be for each compiled to three separate files in the public folder:

const mix = require('laravel-mix');

require('laravel-mix-alias');

mix.js('resources/js/site/site.js', 'public/js')
   .js('resources/js/admin/admin.js', 'public/js')
   .js('resources/js/forum/forum.js', 'public/js')
   .sass('resources/sass/site/site.scss', 'public/css')
   .sass('resources/sass/admin/admin.scss', 'public/css')
   .sass('resources/sass/forum/forum.scss', 'public/css')
   .setPublicPath('public');

mix.alias({
    '@': '/resources/js/site',
    '@admin': '/resources/js/admin',
    '@forum': '/resources/js/forum',
    '~': '/resources/sass/site',
    '~admin': '/resources/sass/admin',
    '~forum': '/resources/sass/forum'
});

Then in the (laravel) Lumen Routes and controllers there will be decided which js, admin, site or forum, has to be included inside the Lumen View. So each section has there own Lumen View, like admin.blade.php, site.blade.php and forum.blade.php. From there on the view will be generated inside Vue and Lumen will be used as API.

My question

I wonder if I'm going a good direction before I go further, is this a good practice? What could be better, or what should be totally different? I think that an other option would be separating everything totally and create separate repositories instead of one, but I want everything as one product. I'm looking for an answer which explains what would be best practice for my situation.

William
  • 121
  • 7

2 Answers2

0

Tried three years ago something similar. I'll share my experience and hope it helps:

Even if it looks good at first, you will find along the development process that your SPA's do not share as much code as you initially presume. They will diverge and they will become harder and harder to maintain as a single codebase.

After repeated failures, I've reached my perfect setup: I've identified my admin SPA to be the one I need with every project. So that one is the single one included with my Lumen API and it is built and managed as a single codebase.

The Marketing/Presentation website is a totally different project, Vue-only, created with vue-cli. Other apps (like a forum) are also separate projects.

On the long run, this allows you to:

  • maintain the admin template together with the API (for example, I found the user management to be something I want for 80% or my API's, so my admin template now features the CRUD operations for users)
  • start from a modern template and not an obsolete one for new web apps: for example, you can have the website not as a SPA Vue app but a Nuxt website. Of course, you'll be connecting to the same Lumen API.
  • you won't be forced to use the same layouts and CSS frameworks for your new projects.
  • when you identify a repetitive code fragment between your projects, you can easily add it in your starter (template) repository. It's easier to delete that to write.

But, if you decide to go with the monolithic approach, I would suggest moving the sass files alongside your SPA's, something like /resources/admin/js/components and /resources/admin/sass/base.scss.

Alex
  • 810
  • 9
  • 16
0

there

My solution would look like kind of dirty or not "professional", but what i've been doing is creating something like "app-factory.js". This file what does is looking for the url on my app, for instance "/dashboard" then return all the vuejs stuff necessary for the vue application (store, vue, etc). I have another file called app.js, this file get files from app-factory.js then create the vue instance. On all my laravel view is getting this app.js (dashboard.blade.php, students.blade.php).

Miguel Angel Davila Paz
  • 1