Build a URL Shortener with Volt and Folio
Playing
01. Introduction and demo

Episodes

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

Transcript

00:00
okay so in this course we're going to be building out a url shortener but we're going to be doing this with vault and folio now if you've not heard of vault or folio we're going to cover everything that you need to know to get started
00:13
if you have heard of them then this will hopefully give you a few tips just to clean things up and work with it a little bit more efficiently so let's take a look at a demo of this and then we'll talk a little bit about what vault and folio is okay so we've all seen a url
00:28
shortener before we all know what these look like we go ahead and enter a url in here which is actually going to end up being longer when we shorten this just because of the url here but if you do have a url that obviously is very short it's
00:45
going to look shorter so when we click on that there we go your short link is ready we can click to copy this to the clipboard which is really handy and of course if i create a new tab here and paste this in that redirects us over to the url and we can reset the
00:59
state as well so we can go ahead and shorten multiple urls in one session if we want to so let's talk about laravel folio first of all if i switch over to my editor you can see that we don't actually have any
01:13
routes defined in here so folio is a way that lets you map up your views that you've created so your blade files to pre-created routes so these will be created for you and this is incredibly handy because when you pair this up with something like volt it means that you really only
01:30
need to just create a file and start writing and you have everything ready to go now let's talk a little bit about laravel volt and this is basically livewire but with a functional api that's compiled down to a livewire class
01:45
what this allows you to do is basically write livewire inside the same blade file as your template and then this behind the scenes will be compiled to a class which will run as if you would have created a livewire class and a view
02:01
separately so basically it means you can write php code at the top of your blade files have your template at the bottom where your html goes and you're done so the beauty of working with volt and folio in conjunction is that you can
02:17
basically just create a file write your code write your template and you're done that will instantly be available in the browser to you and you can start building everything out so before we start it's a good idea to be comfortable with
02:30
livewire if you're not already this might be a little bit tricky but you can still follow it follow along and then go ahead and dive into livewire in more detail afterwards but this is what we're going to build let's jump into the next episode and get everything set up

Episode summary

Welcome to the course! In this first episode, we're introducing what we'll be working on: creating a URL shortener using Laravel Volt and Folio. If these tools are new to you, don't worry—I'll be covering everything you need to start from scratch. If you've used them before, you might pick up some useful tricks to streamline your workflow.

We'll start off by looking at a live demo of the finished URL shortener, showing features like inputting a URL, generating the shortened link, copying it to your clipboard, and how you can reset and shorten multiple URLs in one session. It's a simple, practical app that showcases how easy it can be to rapidly build interactive interfaces.

After the demo, I walk you through what Laravel Folio is—a way to quickly map your Blade templates to routes without having to set them up manually. When combined with Volt, which lets you write functional Livewire components directly inside your Blade files, this setup is super efficient. Essentially, you just create a file, write your PHP and Blade code together, and your route is ready to go without extra boilerplate.

At the end, there's a quick heads-up that if you're not comfortable with Livewire yet, you might have to do a bit of learning along the way. But you can still follow along and get a feel for how Volt and Folio work together.

Ready to dive in? Let's get set up in the next episode!

Episode discussion

No comments, yet. Be the first!