# Automation

# Vite

The configuration from the previous section is very basic and has several limitations
- A CDN link is not the best solution if you want to change the look and feel with Tailwind CSS.
  It's better to use a locally hosted, version of Tailwind CSS that will be compiled (automatically) with the build-in JIT compiler.
- Also, the CDN to Alpine is better hosted locally.
- We don't have our own JavaScript file yet, in which we group all the scripts that apply to every page. We can also combine this with the previous script file.
- You'll need to refresh your browser manually every time you make a change to the code.
All these limitations can be solved easily with Laravel Vite (opens new window)
Follow the instructions in Config -> Laravel Vite to incorporate Mix into your application (resulting in a better, automated workflow)
- Configure Laravel Vite

# Update the template

Open resources/views/layouts/vinylshop.blade.php
- Line 6 - 7: remove the CDN links to tailwindcss and alpinejs!
- Line 11: add the @vite() reference to the head to make all the files based on the template hot reloadable

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    
    <meta name="description" content="{{ $description ?? 'Welcome to the Vinyl Shop' }}">
    <x-layout.favicons />
    <title>The vinyl Shop: {{ $title ?? '' }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased">
<div class="flex flex-col space-y-4 min-h-screen text-gray-800 bg-gray-100">
    <header class="shadow bg-white/70 sticky inset-0 backdrop-blur-sm z-10">
        {{--  Navigation  --}}
        <x-layout.nav />
    </header>
    <main class="container mx-auto p-4 flex-1 px-4">
        {{-- Title --}}
        <h1 class="text-3xl mb-4">
            {{ $title ?? 'Title here...' }}
        </h1>
        {{-- Main content --}}
        {{ $slot }}
    </main>
    <x-layout.footer />
</div>
@stack('script')
</body>
</html>

 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# Tailwind: app.css

By default, Tailwind removes all style properties from all the tags. For example, all headings have the same font size and weight as a normal paragraph
If you’d like to add your own base styles, simply add them to your CSS within a @layer base directive
Open resources/views/home.blade.php and add some dummy headings and text with emmet:
(hr.my-4^h2>{heading 2}^p>lorem^h3>{heading 3}^p>lorem)

<x-vinylshop-layout>
    <x-slot name="description">New description</x-slot>
    <x-slot name="title">The Vinyl Shop</x-slot>

    <p>Welcome to the website of The Vinyl Shop, a large online store with lots of (classic) vinyl records.</p>

    <hr class="my-4">
    <h2>heading 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium blanditiis commodi dolorem eaque error esse
        eum impedit iusto necessitatibus optio, perferendis possimus quaerat, quod rem sapiente suscipit voluptates!
        Repudiandae, tempore?</p>
    <h3>heading 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A at dolor dolorum fugit ipsam iusto laborum
        perferendis reprehenderit sapiente tenetur. Ab architecto autem dolorem illo maiores minima natus repellat
        vitae.</p>

    @push('script')
        <script>
            console.log('The Vinyl Shop JavaScript works! 🙂')
        </script>
    @endpush
</x-vinylshop-layout>
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Open resources/css/app.css and add some default styling to the base layer for the h2 and h3 tags

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer base {
    h2 {
        @apply text-2xl my-2;
    }
    h3 {
        @apply text-xl italic my-2;
    }
}
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12

Remove the dummy text from de homepage

# Livewire

In the next chapter, we are going to introduce Livewire components
In order to use Livewire, you must also add a CSS and JavaScript reference in the layout component:
- Line 10: add @livewireStyles just before the closing head tag
- Line 29: add @livewireScripts just before the closing body tag

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{{ $description ?? 'Welcome to the Vinyl Shop' }}">
    <x-layout.favicons />
    <title>The vinyl Shop: {{ $title ?? '' }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
</head>
<body class="font-sans antialiased">
<div class="flex flex-col space-y-4 min-h-screen text-gray-800 bg-gray-100">
    <header class="shadow bg-white/70 sticky inset-0 backdrop-blur-sm z-10">
        {{--  Navigation  --}}
        <x-layout.nav />
    </header>
    <main class="container mx-auto p-4 flex-1 px-4">
        {{-- Title --}}
        <h1 class="text-3xl mb-4">
            {{ $title ?? 'Title here...' }}
        </h1>
        {{-- Main content --}}
        {{ $slot }}
    </main>
    <x-layout.footer />
</div>
@stack('script')
@livewireScripts
</body>
</html>

 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32