Laravel Frontend

Laravel 5.3 uses Elixir, a build system abstraction built on top of Gulp, to compile CSS and Javascript.

It comes pre-loaded with...

Bootstrap Sass 3.0
Vue.js

Laravel 5.4 introduces Mix, which is a replacement for Elixir built on top of Webpack.

Basic Setup

composer install
touch database/database.sqlite
Change your .env file to accomodate sqlite:

DB_CONNECTION=sqlite
DB_DATABASE=/absolute/path/to/database.sqlite

php artisan migrate
npm install

First Build w/Bootstrap

Uncomment the line referencing Bootstrap in app.scss
gulp
php artisan serve

You should be able to navigate to localhost:8000 and see a basic welcome page.

Create Your First Static View

Create a Route

Create a Controller

Create a View

Basic View Structure

You'll want to use Blade's handy @include syntax to create sub-templates and otherwise organize your templates. For example, my boilerplate structure looks like this:

<html>
@include('head')
@include('navbar')
<body>
@yield('content')
</body>
</html>

The "head" file has basic meta tags and other content in the <head> section, and then the basic layout of the page is included as necessary.

Adding Metadata

Laravel doesn't come with a page setup for you out-of-the-box; that means basic elements like <head> aren't present and don't have all the handy metadata you might desire.

Fortunately there's some good projects to help you handle these needs.

laravel-meta allows you to set defaults for SEO-friendly meta data and set controller-specific settings as well.

Resources

Laravel Boiler Plate: Interesting boilerplate project; helpful if looking for inspiration on how to organize your Laravel projects.
Laravel Bootstrap Admin Theme: Example of a Bootstrap implementation in Laravel.

Laravel Frontend Coding