Like Laravel, Braid is installed with the Composer package manager.

Use Composer to install Braid within your existing Laravel project:

1

composer require njpanderson/braid

Once the Braid package files are installed, run the following artisan command to install the core files:

1

php artisan braid:install

This will install:

  • The front-end assets into public/vendor/braid.
  • The BraidServiceProvider class.
  • A braid.php config file.

Setting up manually

If you don’t want to install Braid automatically, or have specific needs, that’s fine too.

They’re installed for you with Composer but otherwise, you’ll need to make sure the front end assets are available at minimum for Braid to work:

1

php artisan vendor:publish --tag="braid-assets"

Publishing the config file

To customise the configuration, you can use the following command to generate the braid.php config file:

1

php artisan vendor:publish --tag="braid-config"

Creating the pattern layout

Every time Braid loads a pattern, it does so through a consistent layout view. This is to ensure that the same page assets (such as CSS and JS) are used in pattern displays.

Braid ships with an example layout file just to make sure things load, but it won’t be very useful. You’ll likely want to replace it with something similar to your own layout file almost immediately.

Simply create or edit the file at ./resources/views/vendor/braid/layouts/pattern.blade.php to create a new layout. Here’s an example:

1
2
3
4
5

@extends('layouts.main')

@section('body')
    @yield('pattern')
@endsection

In the above example, the layout file extends an existing site layout, which contains all the <head> and script markup needed, as well as yielding a body section.

The only required part of a Braid pattern layout file is the following:

1

@yield('pattern')

This will dictate where braid places the pattern file when being viewed.

Tip: Your pattern layout file should ideally be as plain as possible, containing no visible markup except for the pattern itself. This will enable you to view patterns in a properly isolated manner and have them respond well to screen size changes.

Up next: Setting up database storage