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

results matching ""

    No results matching ""