· laravel · 3 min read

Day 2: Building a SaaS with Laravel

Let's continue the adventure to build a SaaS with Laravel! Episode 2 ... are we going to code today?

Today, my goal is to write that newsletter with a Livewire component! Oh wow, what am I saying? With a Livewire Volt Class Component!

Issue 1: Laravel Idea can’t create a Volt Class Component

Or maybe I didn’t find where … but this is annoying. Whatever, let’s try the functional API way. I’m coming from the JavaScript world; I’m not afraid.

Everything didn’t go super well. First, I had the issue of going too fast, and so I didn’t catch the

Volt::route('/', 'homepage');

//instead of

Route::get('/', Homepage::class);

Then I had issue number 2, and I thought it was because of this … so I rolled back to using a normal component, but I’ll try again later!

Let’s do the newsletter

  • I’ve followed this article
    • I removed the “language” capability
    • Instead of “is_verified,” I used a nullable timestamp called “verified_at”

By following the article, I’ve used the Internationalization of Laravel, e.g.,

{{ __('template.newsletter-email-placeholder') }}

It’s great to have that by default!

Added a toggle for dark mode! A SaaS without dark mode is not a SaaS

I was very surprised that it wasn’t there by default when you install Breeze or Jetstream. You “opt-in” for dark mode, but you don’t have a toggle. No biggie; the internet is full of good articles, and I used this one to implement dark mode.

  1. In Tailwind.config.js
export default {
    ...
    darkMode: 'class',
    ...
}
  1. In your layout:
<html
  lang="{{ str_replace('_', '-', app()->getLocale()) }}"
  x-cloak
  x-data="{darkMode: localStorage.getItem('dark') === 'true'}"
  x-init="$watch('darkMode', val => localStorage.setItem('dark', val))"
  x-bind:class="{'dark': darkMode}"
>
  ...

  <body>
    ... somewhere in body or it's own component

    <div class=" mx-auto max-w-2xl text-center mt-10">
      <button x-cloak x-on:click="darkMode = !darkMode;">
        <x-heroicon-s-moon
          x-show="!darkMode"
          class="p-2 ml-3 w-8 h-8 text-gray-700 bg-gray-100 rounded-md transition cursor-pointer hover:bg-gray-200"
        />
        <x-heroicon-s-sun
          x-show="darkMode"
          class="p-2 ml-3 w-8 h-8 text-gray-100 bg-gray-700 rounded-md transition cursor-pointer dark:hover:bg-gray-600"
        />
      </button>
    </div>
  </body>
</html>

Issue 2: Nothing works frontend wise

I’m updating the code, but I have to refresh the page to see the change. I have to clear the view with:

php artisan config:cache &&  php artisan config:clear &&  composer dump-autoload -o

A command that I found on the web while searching for my issue without “visible” errors.

But in fact… I just restarted PHPStorm and at the same time terminated the process that runs Vite and forgot to launch it again.

It took me a few minutes to discover it was the issue -_- because no real issues in the log and I mean I have the setup with Herd installed, the website is running without Vite difficult to catch :)

The catch of the day:

Always check if Vite is running!

Related Post

Share:
Back to Blog