Build Pipeline and Assets (Vite and Sass)

One Vite configuration at the project root builds the admin and Echo themes and the bundled modules. A distributed site ships with public/build already built, so an installed plugin must bring its assets with it rather than rely on a rebuild.

Commands

Command	Does
`npm install`	Install the build tools and front-end libraries
`npm run build`	Production build into `public/build` with `manifest.json`, and copy theme and module images into `public/themes` and `public/modules`
`npm run dev`	Dev server with hot reload; writes `public/hot` while it runs
`npm run templates:kit`	Compile the `ui-*` section kit to `resources/themes/echo/page-templates/kit.css`; reseed the template library to store it
`composer format:html`	Prettier on template-library HTML (Echo and module `page-templates`)

What gets built

Every entry is listed in the input array of vite.config.js. Nothing is discovered automatically.

Group	Entries
Echo	`assets/sass/app.scss`, `assets/sass/app-editor.scss`, `assets/js/app.js`
Admin	`assets/sass/app.scss`, translation UI styles, GrapesJS styles, `assets/js/app.js`, `assets/js/page-builder.js`
Template library	`page-templates/scripts/motion.js`, `widgets.js` (loaded only by pages whose sections need them)
Booking, TruCommerce, TruPayments	Their admin and front Sass and JavaScript under `Modules/{Name}/resources`

Static images are copied by vite-plugin-static-copy: theme images to public/themes/{admin,echo,default}, module images to public/modules/booking and public/modules/tru-commerce, and the CKEditor build to public/themes/default/js. The JavaScript alias @ points to resources/themes/default/assets/js.

After a build

Regenerate the theme CSSThe public site serves a compiled copy of Echo's stylesheet with the site's colours. Rebuilding does not refresh it: use Appearance → Theme options → Advanced → Regenerate Theme CSS. See How options become CSS.
Clear caches if views changedphp artisan optimize:clear on a site whose views are compiled by dotartisan:optimize.
Hard-refresh the browserBuilt files are fingerprinted, but the compiled theme CSS keeps its name.

If a page fails with Unable to locate file in Vite manifest, the entry it asks for was never built: add it to input and run npm run build, or stop npm run dev if public/hot points to a server that is no longer running.

Assets in your plugin

Choose by how the plugin is distributed:

Approach	How	Use when
Pre-built static files	Build your CSS and JS yourself, put the output in `resources/assets`, run `php artisan module:publish Testimonials` on install, and link with `asset('modules/testimonials/app.css')`	Plugins installed from a ZIP. This works on any site without Node
Shortcode assets	Declare them on the definition: `->assets(['styles' => [...], 'scripts' => [...]])`; they load only on pages that contain the block	Page-builder blocks
Inline in Blade	`@push('page_header')` for small styles, `@push('page_scripts')` for small scripts	A few lines
Vite entry	Add your files to `input` in the root `vite.config.js`, build, then `@vite('Modules/Testimonials/resources/js/app.js')`	Plugins developed inside a site's repository, where you control the build

Writing CSS that fits Echo

Use Bootstrap utilities and Echo's existing components before adding CSS.
Read colours from variables (var(--bs-primary), var(--bs-body-color), color-mix(in srgb, var(--bs-primary) 12%, transparent)). Hard-coded colours break custom and dark palettes.
Scope your rules under your own class prefix (.testimonials-…).
Use logical properties (margin-inline-start) so right-to-left languages work.

Admin assets

Admin pages push their assets into the admin layout:

<x-admin-layout>
    @push('page_header')
        <link rel="stylesheet" href="{{ asset('modules/testimonials/admin.css') }}">
    @endpush

    {{-- page content --}}

    @push('page_scripts')
        <script src="{{ asset('modules/testimonials/admin.js') }}" defer></script>
    @endpush
</x-admin-layout>

Files you do not edit by hand

public/build/* and public/hot — build output.
storage/app/public/css/themes/*/app.css — compiled theme CSS.
resources/themes/echo/page-templates/kit.css — generated by npm run templates:kit.
public/themes/*, public/modules/* — copied from resources by the build or by module:publish.