Build a URL Shortener with Volt and Folio
Playing
02. Setting up Volt and Folio

Episodes

0%
Your progress
  • Total: 53m
  • Played: 0m
  • Remaining: 53m
Join or sign in to track your progress

Transcript

00:00
Okay, so we're going to take this episode just to get everything set up. Here is what we're going to do. Now, I've got a fresh Laravel project installed.
00:07
I've just used the Laravel installer on the command line. No starter kit whatsoever, and I haven't touched this at all. So we're starting truly from scratch here. Now, the first thing that we'll do is go ahead and pull Tailwind in,
00:21
just so we have something nice to style this with. You don't have to use Tailwind if you don't want to. Then we're going to go ahead and put in Laravel folio, take a look at how this works, and actually create a root.
00:31
And then we're going to go ahead and install Livewire. And finally, install Vault. And we're going to create a really simple Vault component, just so we can see that this works.
00:40
Now, before I do anything, I'm going to head over to my web routes, and I'm just going to get rid of all of the routes in here. We're not going to need routes, as we saw from the introduction, because folio is going to handle all of them for us.
00:54
So let's start out by creating out a main kind of app wrapper when we get folio installed. So we're going to go ahead and make out a component here. We're going to call this app layout,
01:07
but we're going to pass in the view option here. So we just get a single component, which we can wrap any of our pages in. So think of this as like your base layout for your app. So how do we do this?
01:19
Well, let's go ahead and actually get folio installed first of all, because we need somewhere to put this content. Installing this is very simple. We just need to go ahead and pull it in with Composer.
01:31
And then we need to go ahead and just run the folio install command once that's done. Now, what that's going to do is it's going to create a service provider, which it needs for it to run. And it's going to go ahead and create a separate directory
01:47
inside of your views called pages. This is where all of your folio blade files are going to go and be registered automatically. So we're going to go ahead and delete the welcome view, which we see by default. And we're going to go and create an index.blade.php file inside of pages.
02:05
And we're just going to write home in there. Now, we have folio installed. So that means when we head over to our app and give this a refresh, without any routes in there at all,
02:14
we can see that being rendered on the page, which is great. OK, so we've gone ahead and installed folio. And let's go ahead and pull Tailwind in if you want to use this. So we can style this up nicely.
02:25
So we've already got our project created. So let's pull in the Tailwind dependencies. And once that's done, we'll go ahead and initiate a Tailwind config creation. That's done.
02:36
And what we can do now is we're just working with blade files. So we can go ahead and go to the Tailwind config file, which is in the root of your project now, and just paste this in. So that's going to look for any Tailwind styles inside of any blade files.
02:50
And it will go ahead and compile that CSS together for you. Next up, we just need to go ahead and add these to app.css. So let's head over to app.css and pop that in there. And then let's go ahead and when we build up our sort of main root template,
03:08
we can add in our byte stuff in there. But we can go ahead and run npm install and npm run dev just to get that working. Great. So inside of our index file, this is where we want to use that
03:21
main app layout that we've just created. We want to wrap everything inside of there. So that's not going to have any kind of effect at the moment because our app layout just has nothing in there.
03:32
So we're going to go ahead and create out a overall wrapper for our document. We can go ahead and pull in the config app name from that, which will be whatever you have inside of here. And then in here, we can add in a slot where our content will be rendered into.
03:49
So if we head over here now, it doesn't look much different. But if we go ahead and view the page source, that is now wrapped inside of our main app layout. Great.
03:59
Okay. So Tailwind is still not on the page. That's just because we need to use our byte directive here and reference resources CSS and app.css.
04:10
And while we're here, we might as well go ahead and pull in our app.js file because that's going to need to live in there as well. Okay. So now that we've done that, still no change because we don't have a byte manifest.
04:21
That is just because we need to run npm run dev and we should be good. So we should see this change now in terms of the base styling that Tailwind has applied. Okay. So Tailwind is pulled in and let's go ahead and pull Livewire into our project.
04:37
So we'll go ahead and just do a normal install on that. We don't need to do anything else here unless we want to configure Livewire specifically. But we can just close this off now and we can focus on working on Vault. So to install this, pretty straightforward.
04:50
We're going to go ahead and do a composer require on Laravel Vault. And then we're going to go and just run the Vault install command. And that is pretty much it. We are done.
05:01
So we're going to go ahead and create out our first Vault component inside of here. How do we do this? Well, we're going to come up to the top of the page. And we're going to go ahead and add a opening and closing PHP tag.
05:14
Now all of our functional code for Livewire now goes inside of here. And then anything we want to show obviously goes inside of our blade template just at the bottom. So what this means is we can start to write our code up here and then reference stuff down here like we normally would.
05:31
So as an example, let's go ahead and start to work with state. So we're going to go ahead and say use function. We're going to pull in a function. Remember, this is functional from Livewire Vault.
05:42
And then we're going to pull in the state function. So the state function allows us to store, you guessed it, state inside of here. Let's go and create out a counter state and set this to 0. And for our example component, we'll just be incrementing this counter.
06:00
Now down here within our app layout, we need to specify that the code that we're writing down here is a Livewire component using Vault. So we're going to go ahead and use the starting Vault and ending Vault directives. Now let's just hop over and just see what this looks like.
06:16
So let's just give this a refresh. And you'll notice a kind of standard error that we would get with Livewire usually. This is just because the content inside of here doesn't have a root tag. When we create Livewire components normally and we have our blade views,
06:31
we always have to have a root tag to this. And it's no different with what you put inside of Vault just here. We don't need Vault around our app layout because this is the content that we would usually put in a Livewire template.
06:43
So if we head over, sure enough, you can see it works. Now with our state up here counter, we can just go ahead and output this like a PHP variable inside of blade that we normally would. So if we go ahead and give that a refresh, sure enough, we get 0.
06:56
Great. OK. I'm going to go ahead and create a really simple button inside of here. And this is going to increment that number.
07:04
So how do we do this? Well, we just do it like we normally would. Wire, click, and then we call a function. So in this case, I'm just going to call this increment.
07:12
And up here, I'm going to go ahead and create out a function which increments this. So remember, this is functional. So we're going to go ahead and assign this to a variable. And that function is going to deal with incrementing that state.
07:25
So I'm going to say this counter plus plus. That is it. So if we just go ahead and fix that up, go over and click increment, you can see this is working as you would normally find in a Livewire component.
07:38
So we know now that all of this is working. This might feel a little bit weird at first, but run with it. And you'll see how easy it is to create stuff in these single file components with this Livewire functional API style.

Episode summary

In this episode, we kick things off by setting up a fresh Laravel project with no starter kit—so it's truly from scratch. First, we install Tailwind CSS to give our app some simple styling (it's optional, but it's nice to have!).

From there, we bring in Laravel Folio, which lets us handle routing without needing to mess with the traditional web routes—super handy for page-based setups. We create an app layout component to use as our main wrapper, and start building out our folder structure with Folio's pages directory. Once Folio is good to go, we set up Tailwind's config and hook up our CSS so we can start styling our pages right away.

Next up, we bring in Livewire. With that in place, we install Volt—the star of the show for this series. We keep things simple by building a basic Volt component: a counter that you can increment by clicking a button (classic demo, but effective!). We walk through the slightly different, function-first syntax that Volt brings to Livewire, and show how to tie the state and rendering together all in a single file.

By the end of this episode, you’ve got a solid Laravel setup with Tailwind, Folio, Livewire, and Volt all playing nicely together, and a working demo component to prove it! This sets us up perfectly for building out more advanced features in upcoming episodes.

Episode discussion

No comments, yet. Be the first!