Skip to main content

Frontend Development

Imba​

By default Formidable uses Imba for its frontend development. You can build your frontend either as a single-page application or as a web application.

Web Application​

To build a web application, use the formidable new command with the following flags:

formidable new example-app --type "full-stack" --stack "imba" --scaffolding "blank"

This will create a new project with web related files.

See the Views documentation for more information.

Single-page Application​

To build a single-page application, you can use the formidable new command with the following flags:

formidable new example-app --type "full-stack" --stack "imba" --scaffolding "spa"

This will create a new project and install the @formidablejs/view package, then publish spa related files.

The frontend files will be published in the resources/imba folder. To get started, open the resources/imba/App.imba file.

See the Views documentation for more information.

Vue.js & React​

Formidable provides an Inertia Adapter through Laravel Mix.

Laravel Mix is a package developed by Laracasts creator Jeffrey Way. It provides a fluent API for defining webpack build steps for your Laravel and Formidable applications using several common CSS and JavaScript pre-processors.

In other words, Mix makes it a cinch to compile and minify your application's CSS and JavaScript files. Through simple method chaining, you can fluently define your asset pipeline. For example:

webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css');

Installation & Setup​

To get started with an application powered by Inertia, use the following commands:

React​

formidable new example-app --type "full-stack" --stack "react"

Vue​

formidable new example-app --type "full-stack" --stack "vue"

This will scaffold a Vuejs or React application for you.

Running Mix​

Mix is a configuration layer on top of webpack, so to run your Mix tasks you only need to execute one of the NPM scripts that are included in the default Formidable package.json file. When you run the dev or production scripts, all of your application's CSS and JavaScript assets will be compiled and placed in your application's public directory:

// Run all Mix tasks...
npm run mix:dev

// Run all Mix tasks and minify output...
npm run mix:prod

Watching Assets For Changes​

The npm run mix:watch command will continue running in your terminal and watch all relevant CSS and JavaScript files for changes. Webpack will automatically recompile your assets when it detects a change to one of these files:

npm run mix:watch

Inertia​

Creating responses​

In your controller, provide both the name of the JavaScript page component, as well as any props (data) for the page.

In this example we're passing a single prop, called post to the Post/Show page component:

app/Http/Controllers/PostController.imba
import { Inertia } from '@formidablejs/inertia'
import { Post } from '../../Models/Post'
import { Controller } from './Controller'

export class PostController

    @use(Post)
    def show post\Post
        const { attributes } = await post

        Inertia.render('Post/Show', {
            post: attributes
        })

Root template data​

The default inertia root view is defined in the config/inertia.imba config file:

config/inertia.imba
import { App } from '../resources/views/app'

export default {

    # --------------------------------------------------------------------------
    # Root View
    # --------------------------------------------------------------------------
    #
    # Sets the root template that's loaded on the first page visit.

    rootView: App

}

If you'd like to provide a custom root for for a specific component, you may do so by using setRootView:

Inertia.render('Welcome').setRootView(CustomFormidableView)

You can also pass data props to a root view by using withViewData:

Inertia.render('Welcome').withViewData({
    meta: meta
})

This section is incomplete. Join our discord if you have questions.

For more information on how to use Laravel Mix and Inertia, see the Laravel documentation and the Inertia documentation.