getting started with the TALL stack cover image

getting started with the TALL stack

June 15, 2020

Lately, I've been having a lot of fun developing projects with a great new stack lovingly named the "TALL" stack (more information here if you're interested). The TALL stack is a full-stack solution built and maintained by members of the Laravel community. Much of its power comes from the fact that it champions monolithic development practices and their benefits while allowing for many of the benefits you would get from a distributed environment. For instance, you get the security benefits of session authentication and the robustness of server-side routing while also getting a reactive, smooth front-end without writing piles of extra Javascript.

TALL pieces

Before we dive into the TALL stack's simple setup, let's talk about the different pieces that make up this stack.

Tailwind CSS

Tailwind CSS blasted onto the scene in 2017 when the first alpha was released but made a massive name for itself in May of 2019 when the first 1.x stable build released to the public. Tailwind is often compared to CSS libraries like Bootstrap and Bulma, but in reality, it is more than a collection of specific CSS rules bundled into a package; Tailwind is a fantastic tool for quickly implementing front-end styling on a website.

That said, I think Tailwind's true power lies in the ability it gives designers and developers to develop a single, reusable design schema. Tailwind is controlled by a single config file where a developer can add as many utility styles as they want (and remove any defaults). Once those base utility styles are in place, any developer can onboard to the project and quickly see the styling tools they have to work with, which helps to give the overall styling of a project a more cohesive and unified look (especially across multiple pieces of software in a single brand).

Alpine JS

Alpine is to JavaScript what Tailwind is to CSS. Alpine specializes in writing lightweight, performant JavaScript directly in your HTML to create incredibly simple interactive components on a web page. Alpine was created by Caleb Porzio, the same developer who created Livewire, because of a need for interactivity on web pages that Livewire wasn't designed to handle. As such, Alpine and Livewire play together super well. As I've used more and more of Alpine, though, I've found myself reaching for it in situations where I'm not also using Livewire as a drop-in way to build quick web components without all of the hassles of something heavier like Vue or React.

Livewire

Livewire is the Laravel-specific framework that allows developers to build interactive experiences without having to reach for entirely separate JavaScript frameworks like Vue or React. Livewire is the magical piece of the puzzle that allows this stack to use the best of monolithic and SPA benefits, but check out my other post here for more information on why Livewire is so awesome!

Laravel

Laravel is the glue that holds this stack together, in more ways than one. Yes, it is the framework that serves as the base of the TALL stack, but it serves a much greater overall purpose, too. Like I mentioned earlier, and like the TALL stack website is quick to point out, the TALL stack pieces are all built and maintained by Laravel community members. So, even on just a personal level, I owe a lot of thanks to the Laravel community for creating something as fun and exciting to work with as this stack.

For anyone reading this who isn't familiar with Laravel, Laravel is a wonderfully easy-to-use PHP framework that holds a surprising amount of power under the hood. Of all of the languages and frameworks that I've worked with over the years, Laravel still holds the title for the best blend of pure power and developer happiness and productivity. If you haven't used Laravel before and are looking to build a web application, give it a try. You won't be disappointed!

installing the TALL stack.

This super short installation guide assumes that you have the following things set up on your development environment:

It also assumes that you're running in a macOS or Linux environment. Sorry Windows users, I haven't developed on a Windows machine in close to 7 years now, so I'm really out of the loop! If I stumble upon a good guide for installing the TALL stack in a Laravel install on a Windows machine, I'll link it here.

step 1: create a new Laravel install

First, in your terminal, navigate to the directory where you want the new Laravel project to live. For example, I like to keep my web apps in my Sites directory.

Once there, running laravel new {project name} will prompt your machine to pull the Laravel source code and begin setting up your project. Depending on whether the Composer packages that Laravel requires were recently put into your local cache, this can take anywhere from a few seconds up to a handful of minutes if your internet connection is poor.

step 2: add the TALL stack front-end preset to composer.json

Once Laravel is all set up, move into your Laravel install directory:

cd {project_name}

From there, we need to tell Composer that from now on, it needs to give us the package that will set up the TALL stack inside of this Laravel install. Since the TALL stack also requires Livewire to be present, we tell Composer to make sure and grab the Livewire package as well while it's at it with the following command:

composer require livewire/livewire laravel-frontend-presets/tall

step 3: pick your TALL flavor

If you try to run your Laravel app right now, you might be surprised to realize that it doesn't look any different than usual, nor is it running the TALL stack. Even though we've asked Composer nicely to fetch us the code for Livewire and the TALL stack front-end preset, nothing seems to be working!

Never fear! We just need to make one more important decision before going any further. At the moment, the code for the TALL stack preset is sitting in the vendor folder of your new Laravel project, just waiting to be used. To take that code and build it into our front-end, we need to tell artisan whether we want to include the authentication scaffolding along with the other code for this stack.

If you don't want to have this Laravel preset roll the authentication scaffolding for you, run

php artisan ui tall

If you DO want the authentication scaffolding (which is generally the option that I go with here), run

php artisan ui tall --auth

php artisan migrate

step 4: build the front-end

Once we have all of the code in place, there's only one more command to run before we can see the TALL stack in all of its glory:

npm install && npm run dev

step 5: $$$

And there we go. It's a thing of beauty, isn't it?

So now that you can install the TALL stack in only a handful of minutes, what are you going to do with it? Hit me up on Twitter and let me know what projects you want to build with the TALL stack!

The Links:

Join my mailing list!

No spam, just a weekly newsletter with thoughts, discoveries, and cool new things in the world of programming.

subscribe.