Theme

Once the Evolve default theme is installed, you can start customizing it to your needs. The theme is located in the theme directory. The frontend stack consists of:

• Laravel Blade
• Laravel Livewire 3
• Tailwind CSS
• Alpine.js

Starting the development server

To start the development server, run the following command in the theme directory:

yarn theme:dev

Building for production

To build the theme for production, run the following command in the theme directory:

yarn theme:build

Directory structure

Here's a list of the most important directories and files in the theme directory:

• dist: Contains the compiled CSS and JavaScript files generated by Vite, these files are then copied to the public directory of your Laravel application.

• src: Contains the TypeScript and CSS source files.

• tailwind: Contains our theme config and some utility functions for Tailwind.

  • theme.js: Contains the theme configuration for our design system tokens.

• views: Contains all views and layouts for the theme.

  • components: Contains Blade components.
  • errors: Contains error views.
  • livewire: Contains Livewire components.
  • mail: Contains mail views.
  • vendor: Contains view-overrides for vendor packages.

• tailwind.config.js: Contains the Tailwind configuration for the theme.

Scaffolding and typings

• php artisan evolve:blueprint {Name} creates a blueprint class and tells you where its block view goes.
• php artisan evolve:component {name} {fields?} scaffolds a component with fields.
• php artisan evolve:typings writes TypeScript typings for the blueprints; yarn theme:dev and yarn theme:build run it for you.
• php artisan theme:update refreshes the theme's core library (theme/.evolve) after a package update; theme:publish --force re-publishes the whole starter theme and overwrites local changes.