Learning Laravel

Assets and Authentication

Aug 23, 2022

Learning Laravel Series

You probably already know that, at Tighten, we love working with Laravel, a framework that helps make web application development fast, fun and easy.

In this “Learning Laravel” series, we’ll explore various features of the Laravel framework in fun, easily consumable projects. The content for this series is ideally suited for people who have already had a basic introduction to the Laravel framework, and are interested in diving deeper. If you, instead, are looking to build your very first Laravel project, check out Laravel Basics at Onramp.

We’ll mirror the code for the entire series in Tighten’s public GitHub repo, and will include instructions for how to keep your own project up to date with ours. For fun, we’ve decided to create these projects around the theme of Carmen Sandiego, an international thief who’s appeared in video games and television shows since 1985.

Intro

Carmen—remember, our friend the international thief—needs a web application to assist in her life of crime. The application will need to authenticate users and its style needs to fit with her current brand.

Real World Application

Almost every web application needs the ability for users to authenticate, and some form of custom styling. We’ll take a look at Laravel’s starter kits and create a custom theme with Tailwind CSS.

Getting Started

First, make sure you have a local environment set up to run a Laravel application. You can do so by following Laravel’s guide “Your First Laravel Project” in the documentation.

Next, fork the learning-laravel repository and check out the assets-and-authentication__start branch locally.

# Assuming you forked this repo to a user named USERNAMEHERE:
cd Sites
git clone git@github.com:USERNAMEHERE/learning-laravel.git
cd learning-laravel
git checkout assets-and-authentication__start

Then, follow the installation instructions in the README to get the app’s dependencies installed. Once you’re ready to stop serving the web site, you can hit CTRL-C to stop the php artisan serve process.

This branch includes:

A new Laravel project
A client logo

Laravel Breeze

❗Requires Local Database

This step will require you to have a database set up in your local development environment. For more information, check out Laravel’s installation documentation on databases and migrations. Make sure to create a database with the same name as your DB_DATABASE entry in .env (it defaults to learning_laravel).

Laravel provides two starter kits for authentication: Breeze (a simple setup) and Jetstream (a more powerful, and more complex, tool).

For this introductory project, we’ll use Breeze. When installing Breeze, you’re given the option to choose whether you’ll use Blade (simple HTML/PHP templates) or React/Vue (JavaScript templates). We’ll use Breeze & Blade this time, which comes with Tailwind CSS baked in out of the box.

If you use a different authentication method and need to install Tailwind CSS on its own, follow the setup guide for installing Tailwind CSS with Laravel.

You can install the laravel/breeze composer package as a “dev” dependency by running the following:

composer require laravel/breeze --dev

Why is this a “dev” dependency?

The laravel/breeze package scaffolds your application with the necessary configuration and other files to support authentication. After these files are created locally and tracked through Git, it won’t be necessary to create them again in production.

Once the package is installed, we can complete the setup for our project by running the included artisan command:

php artisan breeze:install

After this script finishes running, we’ll need to build the assets using npm:

npm install && npm run dev

When we run npm run dev, it starts a server called Vite for serving your assets; leave that running and open up a new tab in your terminal for the remaining steps.

The last step is to run the database migrations Breeze created for us:

php artisan migrate

With the Vite server running in your first tab, you can now start the Laravel server (or, if you’re using something like Laravel Valet or Homestead or Sail, visit the site using those tools).

php artisan serve

Once you’ve got your site being served, try visiting the /login and /register routes. If you used php artisan serve, they should be at http://localhost:8000/login and http://localhost:8000/register.

Blade Templates

At this point, we have a Laravel application with Breeze for authentication and Tailwind for styling.

Now, it’s time to update the default Laravel styles with styles and images that match our client’s brand.

Laravel utilizes a templating language called Blade to render web pages with PHP. Blade will help us to write modular and reusable code using templates and components. Since we want our base CSS and JavaScript files to be included on every page, let’s create a new template file in resources/views/layouts called base.blade.php. We’ll start out by copying over the contents of the app.blade.php template file into base.blade.php.

Why are we creating a new template instead of modifying this one?

By default the app.blade.php template file is used for all pages that are accessed by authenticated users. The guest.blade.php template file is used for all pages that are accessed by non-authenticated users or “guests”. If you look at both of them, you will see duplicate code that we are going to abstract into a “base” template that these two existing templates will extend.

Inside the <head> tag you should see an import for a Google font named “Nunito”. Carmen’s brand guidelines are to use “Oswald” for headings and “Lato” for body text, so we will replace the current import with the following:

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">

Then, update the <body> tag with a Blade parameter that will accept content supplied to the template utilizing template inheritance.

 <!-- resources/views/layouts/base.blade.php -->
  
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="csrf-token" content="{{ csrf_token() }}">
  
     <title>{{ config('app.name', 'Learning Laravel') }}</title>
  
     <!-- Fonts -->
-     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
+     <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
+     <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
  
     <!-- Scripts -->
     @vite(['resources/css/app.css', 'resources/js/app.js'])
 </head>
 <body class="font-sans antialiased">
+     @yield('body')
 </body>
 </html>

We will then update the app.blade.php and guest.blade.php template files to extend the new base.blade.php template.

 <!-- resources/views/layouts/app.blade.php && resources/views/layouts/guest.blade.php -->
  
+  @extends('layouts.base')
+ 
+  @section('body')
     <!-- Place the contents of the <body> tag from each template file here. -->
+  @endsection

Welcome Page

The default welcome.blade.php page doesn’t utilize the base template by default and instead loads its own custom styles. Let’s change that by extending the base layout just like we did in the app and guest layout files. After that, we will change the body content to display a page heading and links to the authentication routes.

 <!-- resources/views/welcome.blade.php -->
  
+  @extends('layouts.base')
+ 
+  @section('body')
+      <div class="container mx-auto">
+          <div class="h-screen flex justify-center items-center">
+              <div>
+                  <h1 class="text-7xl text-center">Ready Player?</h1>
+                  <div class="my-5 grid grid-cols-1 md:grid-cols-2 gap-4 p-4">
+                      <a href="/login" class="text-center">Log In</a>
+                      <a href="/register" class="text-center">Sign Up</a>
+                  </div>
+              </div>
+          </div>
+      </div>
+  @endsection

Tailwind Theme

All pages on the site are now extending our base layout and loading the fonts for our client’s brand. However, if you load the site using php artisan serve, you’ll notice the fonts are not being used anywhere.

To start working with these fonts, we will need to modify the Tailwind theme. Tailwind has default theme settings for fonts that we can extend to apply our loaded fonts correctly. In order to apply the font “Oswald” to heading tags, we extend the font setting named “display”. To apply the font “Lato” to all body content, we extend the setting “sans”.

 // tailwind.config.js
  
 module.exports = {
     content: [
         './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
         './storage/framework/views/*.php',
         './resources/views/**/*.blade.php',
     ],
  
     theme: {
         extend: {
             fontFamily: {
-                 sans: ['Nunito', ...defaultTheme.fontFamily.sans],
+                 sans: ['Lato', 'sans-serif'],
+                 display: ['Oswald', 'sans-serif'],
             },
         },
     },
     plugins: [require('@tailwindcss/forms')],
 };

The layouts/base.blade.php file already applies the font-sans class to the body tag, but we need to update our app.css file to apply the font-display class to all heading tags.

 /* app.css */
  
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
  
+  h1, h2, h3, h4, h5, h6 {
+     @apply font-display;
+  }

We can also modify tailwind.config.js to accept custom colors, and to generate classes we can apply to our pages without needing to write extra CSS code.

Carmen provided us with her logo, and it’s already in your project at public/img/carmen_logo.png. We know from Carmen (and could verify by using a color picker on that image) that her brand color is #bf201d.

Most professional web applications need more than just one brand color. Thankfully, we’re not the only developers who often face this problem! There are tools out there to solve this problem for us.

One such tool is Colormind.io, which can generate a complementary color palette for our brand color. We’ll take the colors that were generated from Colormind and put them in our Tailwind config file.

// tailwind.config.js
 
module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],
    theme: {
        colors: {
            brand: '#bf201d',
            brandHover: '#991B1B',
            light: '#f4f2f1',
            lightAccent: '#d67621',
            lightAccentHover: '#b5631b',
            dark: '#34283e',
            darkAccent: '#b58b7f',
            darkAccentHover: '#d6a496',
            primary: '#bf201d',
            info: '#33283e',
            success: '#6f8441',
            warning: '#ec7409',
            danger: '#f44336',
            disabled: '#d2d2d2',
        },
        extend: {
            fontFamily: {
                display: ['Oswald', 'sans-serif'],
                sans: ['Lato', 'sans-serif'],
            },
        },
    },
    plugins: [require('@tailwindcss/forms')],
};

After adding the color values to the Tailwind theme, don’t forget to recompile the assets by running:

npm run dev

Tailwind CSS will automatically generate classes for colors we added. Let’s use the new classes to set a background color and text color that we want all pages to inherit by modifying the base layout file.

 <!-- resources/layouts/base.blade.php -->
  
-  <body class="font-sans antialiased">
+  <body class="font-sans antialiased bg-light text-dark">

With the Vite server running, take a look at the welcome or login page. You should see new background and text colors loading on every page.

Blade Components

Laravel Breeze installed Blade components for use on the authentication pages; you can find these components at resources/views/components. Right now, all the authentication pages are including a component named application-logo to load a default logo. Let’s modify this so our client’s logo is loaded instead of the default logo.

 <!-- resources/views/components/application-logo.blade.php -->
  
-  <svg viewBox="0 0 316 316" xmlns="http://www.w3.org/2000/svg" {{ $attributes }}>
-     <path d="M305.8 81.125C305.77 80.995 305.69 80.885 305.65 80.755C305.56 80.525 305.49 80.285 305.37 80.075C305.29 79.935 305.17 79.815 305.07 79.685C304.94 79.515 304.83 79.325 304.68 79.175C304.55 79.045 304.39 78.955 304.25 78.845C304.09 78.715 303.95 78.575 303.77 78.475L251.32 48.275C249.97 47.495 248.31 47.495 246.96 48.275L194.51 78.475C194.33 78.575 194.19 78.725 194.03 78.845C193.89 78.955 193.73 79.045 193.6 79.175C193.45 79.325 193.34 79.515 193.21 79.685C193.11 79.815 192.99 79.935 192.91 80.075C192.79 80.285 192.71 80.525 192.63 80.755C192.58 80.875 192.51 80.995 192.48 81.125C192.38 81.495 192.33 81.875 192.33 82.265V139.625L148.62 164.795V52.575C148.62 52.185 148.57 51.805 148.47 51.435C148.44 51.305 148.36 51.195 148.32 51.065C148.23 50.835 148.16 50.595 148.04 50.385C147.96 50.245 147.84 50.125 147.74 49.995C147.61 49.825 147.5 49.635 147.35 49.485C147.22 49.355 147.06 49.265 146.92 49.155C146.76 49.025 146.62 48.885 146.44 48.785L93.99 18.585C92.64 17.805 90.98 17.805 89.63 18.585L37.18 48.785C37 48.885 36.86 49.035 36.7 49.155C36.56 49.265 36.4 49.355 36.27 49.485C36.12 49.635 36.01 49.825 35.88 49.995C35.78 50.125 35.66 50.245 35.58 50.385C35.46 50.595 35.38 50.835 35.3 51.065C35.25 51.185 35.18 51.305 35.15 51.435C35.05 51.805 35 52.185 35 52.575V232.235C35 233.795 35.84 235.245 37.19 236.025L142.1 296.425C142.33 296.555 142.58 296.635 142.82 296.725C142.93 296.765 143.04 296.835 143.16 296.865C143.53 296.965 143.9 297.015 144.28 297.015C144.66 297.015 145.03 296.965 145.4 296.865C145.5 296.835 145.59 296.775 145.69 296.745C145.95 296.655 146.21 296.565 146.45 296.435L251.36 236.035C252.72 235.255 253.55 233.815 253.55 232.245V174.885L303.81 145.945C305.17 145.165 306 143.725 306 142.155V82.265C305.95 81.875 305.89 81.495 305.8 81.125ZM144.2 227.205L100.57 202.515L146.39 176.135L196.66 147.195L240.33 172.335L208.29 190.625L144.2 227.205ZM244.75 114.995V164.795L226.39 154.225L201.03 139.625V89.825L219.39 100.395L244.75 114.995ZM249.12 57.105L292.81 82.265L249.12 107.425L205.43 82.265L249.12 57.105ZM114.49 184.425L96.13 194.995V85.305L121.49 70.705L139.85 60.135V169.815L114.49 184.425ZM91.76 27.425L135.45 52.585L91.76 77.745L48.07 52.585L91.76 27.425ZM43.67 60.135L62.03 70.705L87.39 85.305V202.545V202.555V202.565C87.39 202.735 87.44 202.895 87.46 203.055C87.49 203.265 87.49 203.485 87.55 203.695V203.705C87.6 203.875 87.69 204.035 87.76 204.195C87.84 204.375 87.89 204.575 87.99 204.745C87.99 204.745 87.99 204.755 88 204.755C88.09 204.905 88.22 205.035 88.33 205.175C88.45 205.335 88.55 205.495 88.69 205.635L88.7 205.645C88.82 205.765 88.98 205.855 89.12 205.965C89.28 206.085 89.42 206.225 89.59 206.325C89.6 206.325 89.6 206.325 89.61 206.335C89.62 206.335 89.62 206.345 89.63 206.345L139.87 234.775V285.065L43.67 229.705V60.135ZM244.75 229.705L148.58 285.075V234.775L219.8 194.115L244.75 179.875V229.705ZM297.2 139.625L253.49 164.795V114.995L278.85 100.395L297.21 89.825V139.625H297.2Z"/>
-  </svg>
+  <img alt="Logo" src="{{ asset('img/carmen_logo.png') }}"  {{ $attributes }} />

Navigate to the /login route in your browser and you will now see Carmen’s logo instead of the default Laravel logo.

Keep Going

We’ve worked through the process of setting up a new Laravel application with authentication and brand assets.

Now’s the time for you to edit the existing views and components or create new ones; really make this site your own! For example, you might want to create Blade components for the links on the welcome page, change the background colors of the authentication views, or use a different color palette to achieve a look that matches your personal aesthetic.

The finished version of this project with additional customizations can be found at assets-and-authentication__end.

You can compare your finished project with this branch if you encounter any errors while building the project or if you’re looking for examples of how to customize the project.

Stay tuned for Carmen’s next assignment.