I had to revisit the install commands on my packages because of the recent change in frontend setup in Laravel (from Mix to Vite), so I thought it would be a cool idea to record a video showing y'all how they are currently working.
Here's the link to the video: https://youtu.be/Vq82cO_W8cA
You can find the script of the video below, with all the commands I'm executing.
See you! 👋
---
A-roll
Here's the link to the video: https://youtu.be/Vq82cO_W8cA
You can find the script of the video below, with all the commands I'm executing.
See you! 👋
---
A-roll
With the recent change in frontend setup in Laravel from Mix, which was an abstraction on top of webpack, to Vue's Vite some of the install command on my packages were no longer working and I thought it was time for a revisit there. I have already done the work and tagged the releases on all of them, but I thought it would be a cool idea to walk y'all through them and how to install them all.
We're going to start installing the Rich Text Laravel package.
B-roll
I've got a fresh Laravel 9 application using Jetstream here, which now uses Vite instead of Laravel Mix, so let's start the Vite dev server by running `npm run dev`. Let's try using the app in the browser. We're using Laravel Sail here, so we should be able to visit http://localhost and we should see the welcome page with the authentication links. We should be able to create an account and see if the app works.
Okay, now let's install the package:
B-roll
I've got a fresh Laravel 9 application using Jetstream here, which now uses Vite instead of Laravel Mix, so let's start the Vite dev server by running `npm run dev`. Let's try using the app in the browser. We're using Laravel Sail here, so we should be able to visit http://localhost and we should see the welcome page with the authentication links. We should be able to create an account and see if the app works.
Okay, now let's install the package:
composer require tonysm/rich-text-laravel php artisan richtext:install sail artisan migrate
That should be it. We can see the changes the install command did to our app by running `git diff resources/`. It changed our layouts a little bit to add the Trix core styles and added the Trix JS lib import.
Our dev server is complaining of the missing Trix dependency, so let's kill that process with `ctrl+C` and run `npm install && npm run dev`, as the install command told us to. Now, it should be fine.
The package publishes a default implementation of a Trix field Blade component, so we should be able to add a `<x-trix-field id="content" name="content" />` field to our dashboard view. It works!
A-roll
And that's all we need to install the package now. I hope you appreciate the amount of automation going on there. This install command should also work on the application using Laravel Mix, btw.
Let's now install the Turbo package.
B-roll
Let's commit what we have done so far:
Our dev server is complaining of the missing Trix dependency, so let's kill that process with `ctrl+C` and run `npm install && npm run dev`, as the install command told us to. Now, it should be fine.
The package publishes a default implementation of a Trix field Blade component, so we should be able to add a `<x-trix-field id="content" name="content" />` field to our dashboard view. It works!
A-roll
And that's all we need to install the package now. I hope you appreciate the amount of automation going on there. This install command should also work on the application using Laravel Mix, btw.
Let's now install the Turbo package.
B-roll
Let's commit what we have done so far:
git add . git commit -m "Install Rich Text Laravel"
Now, let's install the Turbo package:
composer require tonysm/turbo-laravel php artisan turbo:install --stimulus --jet
Again, we should be able to see what the package did by running `git diff resources/`. It, again, changed our layouts a bit to add the Livewire/Turbo bridge to them. It also included our Stimulus lib, as well as some Alpine fixes for Turbo's permanent elements.
Our Vite dev server is complaining again of missing dependencies. Let's stop it with `ctrl+C` and run `npm install && npm run dev` again.
Now, if we open the application in the browser and type `Turbo` in the console, we should see the object is there. And if we open the Network tab and navigate to another page, we should also see that it's making a fetch request instead of a full-page request.
A-roll
That's it! We have successfully installed Turbo on a fresh Laravel app that uses Vite. This process is way, way better than it was before, so I hope you enjoy it.
Let's finish it off by switching out frontend setup from using Vite to using Importmap Laravel and TailwindCSS Laravel.
B-roll
Let's commit what have:
git add . git commit -m "Install Turbo Laravel"
Now, we can install the Importmap Laravel package:
composer require tonysm/importmap-laravel=dev-main php artisan importmap:install
It should do a bunch of things in our app, such as:
- pulled our application dependencies from NPM to pinned Importmaps, not all dependencies were ported, though. Some of them are only ever needed for building our assets, so those were not ported. Also, your app might be more complicated than this, so pay attention to your imports: a) make sure you're not importing non-JS files in your JavaScript code; and b) make sure you're importing from the root, so no `./` or `../`. We have an example here in the `libs/stimulus.js` file and in the `controllers/index.js`. I want to tackle these examples in the install command, but for now, let's manually change it.
- swapped out the `@vite` line in our layout files for the `<x-importmap-tags />` component
- removed all the NPM-related files
We can now stop the Vite dev sever and say goodbye to it: `ctrl+C`. We won't need it anymore. Now, let's run the `storage:link` command, but before that make sure there's no `public/js` folder:
rm -rf public/js sail php artisan storage:link
A-roll
But before we're able to test this in the browser, we need to pull the TailwindCSS Laravel to handle our styles, otherwise, we would see a naked app. That's because previously Vite was managing both our JS and CSS builds.
B-roll
Let's require the package and install it:
composer require tonysm/tailwindcss-laravel php artisan tailwindcss:install
This should full the correct Tailwind CLI for our OS and CPU architecture, add the CSS link tag using the `tailwindcss()` function to our layout files, and even run the first build for us. Let's now open the app in the browser and confirm that our application is working the same as before.
It works!
Let's finish off by committing the changes we have done and call it a day.
git add . git commit -m "Install Importmap Laravel and TailwindCSS Laravel"
A-roll
All right, that's what I wanted to show y'all. I've tried to automate as much as I could from the installation process. As you can see, there's not many steps to do when installing the packages in a fresh Laravel app. Of course, in a real app, you'd probably have a couple more complicated scenarios, but I hope you're able to figure it out. And feel free to drop a message or create an issue if you found something not working for you.
Also, this process should work the same on a Laravel Breeze installation, the only difference would be in the Turbo install command, you would run it with the `--alpine` flag instead of `--jet`. The difference between those two is that the `--jet` flag also updates the layouts to add the Livewire/Turbo bridge, but you don't need that in a fresh Breeze install.
That's it. Let me know what you think and I'll see you when I see you. Bye!