TALL stack is a full-stack development solution used for building powerful, modern, and reactive Laravel applications. This stack can be used to build a multitude of applications, in fact, you're reading this on a platform built with the TALL stack.
Built with a foundation in Laravel, it uses Livewire for dynamic interfaces, Tailwind CSS for smooth and rapid designing, and Alpine.js for composing client-side interactions. Hence the name - TALL stack.
There are several ways to create a TALL stack app, but all begin with installing Laravel, so that's what we're going to start with.
Installing Laravel
To start using the stack, we first need to install our foundation, which is Laravel. We can install Laravel in several ways, but the quickest way is using Composer, and we can do that with the following command.
composer create-project laravel/laravel tallstack
This command will create a new folder wherever you ran the command using the project name as the directory name. In this example, the directory will be tallstack.
Now that we have installed a Laravel application, we can start adding the rest of our stack. We can install the rest of our stack using different ways, the easiest would be to use a Laravel starter as our base.
Installing via starter kit
Laravel makes available two different starter kits, Breeze and Jetstream. If you've used Laravel UI before you'll be right at home with Breeze. If you want something heftier with profile management, two-factor authentication, browser sessions, and more you want to choose Jetstream.
Using Laravel Breeze
To install Breeze we use Composer to require it, in the root of your newly created Laravel application, run the following command.
composer require laravel/breeze --dev
With this, we can now use Artisan to install Breeze's default stack (Breeze & Blade), which will scaffold authentication and install Tailwind CSS and Alpine.js for us.
php artisan breeze:install
To finish Breeze you will have to migrate your migrations using Artisan.
php artisan migrate
Your last step will be to install Livewire, which we go over further down in the manual section. The installation steps are the same the only difference is you add Livewire's JavaScript and CSS directives in your app.blade.php and guest.blade.php layout files.
Using Laravel Jetstream
To use install Jetstream we first need to require it by using Composer.
composer require laravel/jetstream
Next, we have to install Jetstream using Artisan and let it scaffold our application and install the necessary dependencies.
php artisan jetstream:install livewire
And with that we are nearly complete with Jetstream, all that is left is to migrate our migrations.
php artisan migrate
With that you have a newly created TALL stack application, you don't have to read anymore and can go create your next big project.
Installing each dependency
If you choose not to use a starter kit and want to install the rest of the stack manually, you can do that by following the steps down below.
Installing Livewire
Livewire will be the next part of our stack and we can install Livewire using the same tool as before, Composer. Open your Laravel application in your terminal and use Composer to require Livewire.
composer require livewire/livewire
With Livewire installed as a dependency, we can add the necessary JavaScript and CSS files to our view or layout file.
Note that if you have a layout file, add the following to the <head> of your layout file instead of each individual view. In this example we don't have a layout, so we're adding it directly to the bottom of our welcome.blade.php view <head>.
@livewireStyles
To finish up Livewire we have one more line to add to the end of our <body>. The same applies here, if you have a layout file, add it to the layout file. We only want to load Livewire's JavaScript and CSS files once.
@livewireScripts
To make sure our assets rebuild when we're developing locally, we have to update your vite.config.js file to include Livewire in its refresh paths. We do that by deconstructing the default paths and adding Livewire's paths into the new list.
import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: [
...refreshPaths,
'app/Http/Livewire/**',
],
}),
],
});
And with that, we are up and running with Livewire. If you did this step after using Breeze you are now finished and have a fully-fledged TALL stack application. If you're doing this manually then Tailwind CSS is up next.
Installing Tailwind
Setting up Tailwind CSS in a Laravel application is a breeze, the team at Tailwind CSS even has a guide for it. A guide that we will follow by installing Tailwind CSS and its dependencies as described.
npm install -D tailwindcss postcss autoprefixer
Next, we need to generate our Tailwind CSS and PostCSS config file using npx.
npx tailwindcss init -p
With those steps finised we can configure our Tailwind CSS template paths by adding to the content array in our tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
],
theme: {
extend: {},
},
plugins: [],
}
I am omitting Vue files here since we are not using Vue, so Blade and JavaScript files are enough here.
Now we can add the Tailwind directives to our app.css file, located in ./resources/css/app.css.
@tailwind base;
@tailwind components;
@tailwind utilities;
With this, we can update our view or layout file to use Laravel's Vite directive. Add the following line in your <head> by replacing an existing <style> as we have in our welcome.blade.php, or by adding it above our Livewire CSS directive.
@vite('resources/css/app.css')
Visiting our site now should result in the following error - Vite manifest not found at: /tallstack/public/build/manifest.json. We can fix this by starting a Vite development server using the following command.
npm run dev
This is great when working locally, our assets update when we make changes in our views, but it does come with a caveat. When we stop our development server the error will be back. We can solve that by starting the server again or building for production by using build instead of dev.
npm run build
Now we can use both Livewire and Tailwind CSS, our last step in Alpine.js
Installing Alpine.js
Our final dependency to install is Apline.js. And we will install Alpine.js as a module using NPM just like Tailwind CSS and following the installation guide.
npm install alpinejs
We can now import Alpine in our boostrap.js file, located in ./resources/js/bootstrap.js. Let's import Alpine at the bottom of our bootstrap file.
import Alpine from 'alpinejs'
Now, all we need do to is initialize Alpine using its start method.
Alpine.start()
If you want more flexibility with Alpine, like accessing Alpine using the Alpine.js devtools, you can add Alpine to the window object, though it is not required for Alpine to work.
window.Alpine = Alpine
Our last step is to update our Vite directive to include our app.js file. We do that by placing our existing string argument inside an array and adding our app.js path as an array item.
@vite(['resources/css/app.css', 'resources/js/app.js'])
And as with Tailwind CSS, you can either start a Vite development server or build for production to generate new asset files.
Conclusion
And with that, you now have a TALL stack application. Your next step will be to create a Livewire component and perhaps build an Alpine.js dropdown.
What you will build is up to you and your imagination, so go out and create your next big project. 🤘
Source code for this article is available on my GitHub - thinkverse/tallstack-example - if you are more comfortable reading commits and code. You can find the Breeze and Jetstream examples in their respective branches. 👍
Top comments (0)