Propel rocketboost.rs

Setup and hot reload

Propel projects use Vite for assets and Tailwind for styles. Vite serves your files in development with hot reload, and builds hashed files for production.

What you configure

  • package.json lists Vite 8, Tailwind 4 and laravel-vite-plugin 3.
  • vite.config.js sets the entries, the aliases and the plugins.
  • resources/css/app.css imports Tailwind and defines your design tokens.

The assets guide has the full files, copied from this app.

Load the entries

The layout loads the stylesheet and the script:

@vite(['resources/css/app.css', 'resources/js/app.js'])

Hot reload

  • Views are compiled into the binary. A view edit rebuilds and restarts the app; bacon does this on save.
  • CSS and JavaScript update in place through Vite's hot module replacement.
  • Rust code needs a rebuild. bacon rebuilds and restarts the app on save.

While npm run dev runs, Propel reads the dev server URL from public/hot and points every asset at it. The file is removed when the dev server stops.

Phones and other devices

The dev server listens on your network, and its URL uses this machine's LAN address. A phone on the same Wi-Fi can open the site. If your address changes, restart npm run dev.

Tailwind classes

Tailwind reads your project, including the .propel views, and generates the classes you use. Define colours, fonts and sizes once in @theme, and they become utility classes.

Example: a design token

Define the token once in resources/css/app.css:

@theme {
    --color-accent: #3d50f5;
}

Then use the utility class in any view:

<a class="text-accent underline" href="/posts">All posts</a>

Template cache

In development, Propel keeps parsed templates in memory and checks each file's modification time and size. An edit is picked up on the next request. See the cache example.

Production

Run npm run build before you deploy. It writes public/build, which you serve at /build. Do not deploy public/hot.