Splitting frontend and backend styles & scripts [AdonisJS 6]

Hey there, drummersi-3! This is something we have planned within the last module of our Let's Learn AdonisJS 6 series. That module will be specific to create an admin section.

However, to get you going before then here's some steps on how to approach this. Typically, you'd have a layout that loads in assets required for your pages. In this case, you'd have two layouts one for you base application and one for your admin section.

Your application layout, we'll call this our index layout, can use the default JavaScript and CSS files provided when creating a new AdonisJS 6 web app.

/resources/js/app.js
/resources/css/app.css

We can duplicate these and alter them as needed for our admin assets

/resources/js/admin.js
/resources/css/admin.css

We'll need to inform Vite about the new JavaScript entrypoint so that it bundles it within our vite.config.js file

export default defineConfig({
  plugins: [
    adonisjs({
      /**
       * Entrypoints of your application. Each entrypoint will
       * result in a separate bundle.
       */
      entrypoints: [
        'resources/js/app.js', 
++        'resources/js/admin.js',
      ],

      /**
       * Paths to watch and reload the browser on file change
       */
      reload: ['resources/views/**/*.edge'],
    }),
  ],
  // ...
})
  
    
      Copied!

For our application pages, we can then use our index layout which will use our app.js and app.css assets.



<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title> {{ title || "App Layout" }} </title>

  @if ($slots.meta)
    {{{ await $slots.meta() }}}
  @endif

  {{-- here is our asset for our index layout --}}
  @vite(['resources/js/app.js'])
</head>
<body>
  <div class="max-w-3xl mx-auto mt-6">
    @include('partials/nav')

    {{{ await $slots.main() }}}
  </div>
</body>
  
    
      Copied!
      
        
      
    
  
  
resources
views
components
layouts
index.edge

Then, we can duplicate this, changing it as needed, and update our Vite asset from app.js to admin.js



<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title> {{ title || "Admin Layout" }} </title>

  @if ($slots.meta)
    {{{ await $slots.meta() }}}
  @endif

  {{-- here is our asset for our admin layout --}}
  @vite(['resources/js/admin.js'])
</head>
<body>
  <div class="max-w-3xl mx-auto mt-6">
    @include('partials/nav')

    {{{ await $slots.main() }}}
  </div>
</body>
  
    
      Copied!
      
        
      
    
  
  
resources
views
components
layouts
admin.edge

On our application pages, we can use our app layout, like so



@layout()
  @slot('meta')
    <meta name="description" content="Our application home page" />
  @endslot

  <h1> App page </h1>
@end
  
    
      Copied!
      
        
      
    
  
  
resources
views
pages
home.edge

Then, for our admin pages, we can use the admin layout like so



@layout.admin()
  @slot('meta')
    <meta name="description" content="Our admin home page" />
  @endslot

  <h1> Admin page </h1>
@end
  
    
      Copied!
      
        
      
    
  
  
resources
views
pages
admin
index.edge

Hope this helps!

Splitting frontend and backend styles & scripts [AdonisJS 6]

drummersi-3

Join The Discussion! (1 Replies)

tomgobich