Directory Structure
Introduction
Config/
├── config.php
Database/
├── Migrations/
├── Seeds/
├── DatabaseTableSeeder.php
├── SampleDataTableSeeder.php
Helpers/
Http/
├── Controllers/
├── Backend/
├── BackendController.php
├── ExtendController.php
├── SetupController.php
├── Frontend/
├── FrontendController.php
├── Middleware/
├── Requests/
Libraries/
Models/
Providers/
Resources/
├── assets/
├── css/
├── js/
├── sass/
├── lang/
├── views/
├── backend/
├── pages/
├── app.blade.php
├── index.blade.php
Routes/
├── api.php
├── backend.php
├── frontend.php
Vue/
├── components/
├── Aside.vue
├── Copyright.vue
├── Footer.vue
├── layouts/
├── App.vue
├── Default.vue
├── node_modules
├── pages/
├── dashboard/
├── Dashboard.vue
├── routes/
├── router.js
├── routes.js
├── vue-routes-dashboard.js
├── stores/
├── root.js
├── vaahvue/
├── pinia
├── vaah.js
├── vue-three
├── primeflex/
├── VhField.vue/
├── VhFieldVertical.vue/
├── VhViewRow.vue/
├── index.html
├── jsconfig.json
├── main.js
├── package.json
├── package-lock.json
├── README.md
├── vite.config.js
├── .gitignore
├── composer.json
├── README.md
Seeds
Seeds are used to generate necessary data or sample data for the module. At VaahCms/Modules/<module-name>/Database/Seeds folder you will find two files:
DatabaseTableSeeder.php: This seeder file will be called whenever you will activate the module from the backend of the VaahCMS.SampleDataTableSeeder.php: This seeder file will be called whenever you will click on "Import Sample Data" button of the module.
Assets
In the simplest form, assets means JavaScript, CSS, and images which lie directly under the public directory and are publicly accessible using a URL.
Laravel provides a helper function, asset(), which generates a URL for your assets. You can use this in blade syntax, e.g.
<script type='text/javascript' src='{ { asset('js/jquery.js') } }'></script>
Compiling Assets
A mix is a configuration layer on top of Webpack, so to run the Mix tasks you only need to execute one of the NPM scripts that are included with the default Laravel package.json file.
// Run all Mix tasks...
npm run dev
OR
npm run watch
It will compile our CSS and JS files and put the build inside a public folder.
// Run all Mix tasks and minify output...
npm run production
If you run npm run production it will actually minify everything and not create a source map for the files. However since it's modified the files are smaller and harder to read.
In VaahCms, Publish path for assets is different from npm run dev & npm run watch. Assets are stored in VaahCms/Modules/<module-name>/Resources/assets directory and when you reactivate module, assets will add to public folder.
We then include this CSS and JS files inside our master blade file. You can see the code inside the file webpack.mix.js file. The webpack.mix.js file resides in the Modules and Themes folder.
const mix = require('laravel-mix');
var fs = require('fs');
const fs_extra = require('fs-extra');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
let publish_folder;
let output_folder;
let source_vue_folder;
source_vue_folder = __dirname+'/Vue';
if (mix.inProduction()) {
/*
|--------------------------------------------------------------------------
| Only in Production
|--------------------------------------------------------------------------
*/
console.log('---------------------');
console.log('IN PRODUCTION MODE');
console.log('---------------------');
publish_folder = './Resources/assets/';
output_folder = "./";
mix.setPublicPath(publish_folder);
mix.js(source_vue_folder+"/app.js", output_folder+'/build/app.js').vue();
} else {
publish_folder = './../../../public/vaahcms/modules/';
output_folder = "./articles/assets/";
mix.setPublicPath(publish_folder);
mix.js(source_vue_folder+"/app.js", output_folder+'/build/app.js').vue();
}
mix.webpackConfig({
watchOptions: {
aggregateTimeout: 2000,
poll: 20,
ignored: [
'/Config/',
'/Database/',
'/Entities/',
'/Helpers/',
'/Http/',
'/Providers/',
'/Resources/',
'/Routes/',
'/node_modules/',
'/vendor/',
]
}
});