Frontend

• Introduction
• Using PHP
  • PHP and Blade
• Using Vue / React
• Bundling Assets

Introduction

Maravelith is a backend framework that provides all the features you need to build modern web applications, such as routing, validation, caching, queues, file storage, and more. However, we believe it’s important to offer developers a beautiful full-stack experience, including powerful approaches for building your application’s frontend.

There are two primary ways to tackle frontend development when building an application with Maravelith, and which approach you choose is determined by whether you would like to build your frontend by leveraging PHP or by using JavaScript frameworks such as Vue and React. We’ll discuss both of these options below so that you can make an informed decision regarding the best approach to frontend development for your application.

Using PHP

PHP and Blade

In the past, most PHP applications rendered HTML to the browser using simple HTML templates interspersed with PHP echo statements which render data that was retrieved from a database during the request:

<div>
    <?php foreach ($users as $user): ?>
        Hello, <?php echo $user->name; ?> <br />
    <?php endforeach; ?>
</div>

In Maravelith, this approach to rendering HTML can still be achieved using views and Blade. Blade is an extremely light-weight templating language that provides convenient, short syntax for displaying data, iterating over data, and more:

<div>
    @foreach ($users as $user)
        Hello, {{ $user->name }} <br />
    @endforeach
</div>

When building applications in this fashion, form submissions and other page interactions typically receive an entirely new HTML document from the server and the entire page is re-rendered by the browser. Even today, many applications may be perfectly suited to having their frontends constructed in this way using simple Blade templates.

Using Vue / React

Although it’s perfectly viable to build frontends using Maravelith and Blade, many developers prefer to leverage the power of a JavaScript framework like Vue or React. This allows developers to take advantage of the rich ecosystem of JavaScript packages and tools available via NPM.

When pairing Maravelith with Vue or React, Maravelith typically acts as a headless API backend. In this architecture, your JavaScript application will make HTTP requests to your Maravelith application to fetch data and authenticate users.

To handle authentication for your Vue or React single-page application (SPA), you may leverage Sanctum, which provides a robust, secure method of authenticating your JavaScript frontends without the overhead of OAuth.

Bundling Assets

Regardless of how you choose to develop your frontend, you will likely need to build your application’s CSS into production ready assets. Of course, if you choose to build your application’s frontend with JavaScript frameworks, you will also need to bundle your components into browser ready JavaScript assets.

By default, Maravelith utilizes Vite to build your assets. Vite provides lightning-fast build times and near instantaneous Hot Module Replacement (HMR) during local development. In all new applications, you will find a vite.config.js file that loads our light-weight Vite plugin that makes Vite a joy to use with Maravelith applications.

[!NOTE]
For more detailed documentation on utilizing Vite, please see our dedicated documentation on bundling and compiling your assets.