Configuring a Site for Use with Modular

Originally designed with application development in mind, Modular is also adept at supporting the construction of websites that require a Custom CMS (Content Management System) or feature restricted areas for customers, etc. This versatility makes it a robust solution for a wide range of web development needs.

TIP

It's crucial to understand two main conceptual distinctions between a Modular application (the backoffice, CMS of the site) and the Modular public site:

1. The backoffice utilizes Inertia.js to serve Vue Pages, while the public site relies on traditional Laravel routing to deliver standard Blade views. You can easily integrate Vue Components into the public site as needed (Image Carousels, Modals, Animated Charts, Interactive Maps, etc).

2. For styling Vue Pages/Components, the backoffice employs Tailwind CSS. In contrast, the public site offers the flexibility to select any CSS strategy. Options include using plain CSS, continuing with Tailwind CSS, or opting for frameworks like Bootstrap.

3. For each module in your site, the public routes are specifically defined within the modules/{moduleName}/routes/site.php file. This organizational structure allows you to manage the routing for each module separately, promoting an organized and maintainable approach to route definitions. Similarly, the restricted routes for the Backoffice are defined within the modules/{moduleName}/routes/app.php file, ensuring a clear separation between public and administrative functionalities.

To set up a site environment with Modular, follow the steps outlined below.

Preparing for the Site Installation

Before proceeding with the site installation, ensure that you have completed the steps outlined in the Modular Getting Started Guide.

Step 1 - Run the Site Installer

Starting from the root directory of your project, run the following command in your terminal. This will initiate the site installation process:

php artisan modular:publish-site-files

Step 2 - Change the default route

By default, the root route / is mapped to the Login page. If you wish to alter this, for example, by mapping the default login page to /admin and assigning the root route / to the public site, you can achieve this by modifying the Modular configuration file.

The modular:publish-site-files command, as mentioned in Step 1, publishes the Modular configuration file to your project's config/modular.php directory.

To make this change:

1. Open the config/modular.php file.
2. Update the login-url key's value from / to your desired path for the default login route.

The updated configuration should look like this:

<?php

return [
    'login-url' => '/admin',
    'default-logged-route' => 'dashboard.index',
];

TIP

Remember, the Index Module, which is installed via the modular:publish-site-files command, already has a route path / configured. This path serves as the default route for the public site in the Index Module.

Step 3 - Add the Index Service Provider

To integrate the Index Module into your site/application, you need to add the IndexServiceProvider to your app. Follow these steps for the integration:

1. Open the bootstrap/providers.php file in your project.
2. Add the IndexServiceProvider to the providers array as shown below:

return [
  ...
  Modules\Index\IndexServiceProvider::class,
];

Step 4 - Configure Vite

To configure Vite for your site, follow these instructions:

1. Open the vite.config.js file in your project.
2. Add entries for your site's files as indicated in the example below:

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'

import Components from 'unplugin-vue-components/vite'
import AppComponentsResolver from './resources/js/Resolvers/AppComponentsResolver.js'

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/js/app.js',
        'resources-site/js/index-app.js',
        'resources-site/css/site.css'
      ],
      refresh: [
        'resources/**/*',
        'resources-site/**/*',
        'modules/**/views/**/*.blade.php'
      ],
      assets: ['resources-site/images/**']
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false
        }
      }
    }),
    Components({
      resolvers: [AppComponentsResolver]
    })
  ],
  resolve: {
    alias: {
      '@resources': '/resources',
      '@resourcesSite': '/resources-site'
    }
  }
})

Step 5 - Compile your CSS

Use npm run dev to compile your CSS and npm run build to compile and minify your CSS for production.

After running the npm run dev command, accessing your APP_URL in the browser, will display a Simple Page like this:

Your restrict Dashboard is still available at the /admin path, as configured in your ./config/modular.php file, under the login-url configuration key. The public site is available at the / (root) path, defined in the modules/Index/routes/site.php file.