/modular-demo

Source code for the demo.ismodular.com app.

Primary LanguagePHPMIT LicenseMIT

Modular Demo App

A demo application to illustrate some concepts of a Modular App.

Modular Demo App

Vue v3.x Inertia.js v1.x Laravel v10.x Tailwind CSS v3.x Tests passing

The Demo App will provide you with examples of:

  • The ACL (Access Control List) System.
  • Some of the Custom Vue 3 Components, provided by Modular (Templates, Sidebar, Data Table, Form Components, Integrated Text Editor, Flash Messages, etc).
  • How Laravel, Vue and Inertia.js communicate with each other.
  • A possible way to organize the file structure of a Modular Project.
  • Smooth transitions between pages.
  • The GitHub repository for this demo app includes examples of workflows (GitHub Actions) to standardize the styles of the PHP files using Laravel Pint, and the Vue and JavaScript files using Prettier. There is also a workflow to handle tests. Feel free to check it out!

Visit the Demo App

You can visit the demo app at https://demo.ismodular.com.

Installation

Clone the repo locally:

git clone https://github.com/daniel-cintra/modular-demo.git modular-demo && cd modular-demo

Install PHP dependencies:

composer install

Setup configuration:

cp .env.example .env

Generate application key:

php artisan key:generate

Configure the database settings in your .env file according to your choice of database (MySQL, PostgreSQL, SQLite, etc.). If you want to use SQLite, create the database file:

touch database/database.sqlite

Run database migrations and seeder:

php artisan migrate:fresh --seed

Create a symlink to the storage:

php artisan storage:link

Copy the blog example images from resources/images/blog to storage/app/public/blog:

cp -r resources/images/blog storage/app/public/blog

Install NPM dependencies:

npm install

Build the assets:

npm run build

Run the dev server (the output will give the address):

php artisan serve

You're ready to go! Simply visit the URL in your browser; the login form will appear with the fields automatically filled in.

Hot Reloading

If you want to use hot reloading, to see the changes in the browser without having to refresh the page, run the following command (instead of npm run build):

npm run dev

And run the following command in a separate terminal window:

php artisan serve

Access the application (in your browser) at the address given by the php artisan serve command.

Tests

The tests provided by this Demo Application can be found in the {moduleName}/Tests directory. After installing the application, you can run the tests executing the following command from the project root directory in the terminal:

php artisan test

Modular Documentation

You can find the full Modular documentation at https://docs.ismodular.com.

License

The Modular Project is open-source software licensed under the MIT license.