Getting Started with TALL stack
Tags: laravel, alpinejs, livewire, tailwindcss
Published: 2022-09-16 11:07:01

---
title: Getting Started with TALL stack
published: true
date: 2022-09-13 09:11:50 UTC
tags: laravel,alpinejs,livewire,tailwindcss
canonical_url: https://devdojo.com/thinkverse/getting-started-with-tall-stack
---

[TALL stack](https://tallstack.dev/) 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](https://laravel.com/), it uses [Livewire](https://laravel-livewire.com) for dynamic interfaces, [Tailwind CSS](https://tailwindcss.com/) for smooth and rapid designing, and [Alpine.js](https://alpinejs.dev/) 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](https://laravel.com/docs/9.x/installation#your-first-laravel-project) in several ways, but the quickest way is using [Composer](https://getcomposer.org/), and we can do that with the following command.

```bash
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](https://laravel.com/docs/9.x/starter-kits#laravel-breeze-installation) we use Composer to require it, in the root of your newly created Laravel application, run the following command.

```bash
composer require laravel/breeze --dev
```

With this, we can now use Artisan to install Breeze's default stack ([Breeze & Blade](https://laravel.com/docs/9.x/starter-kits#breeze-and-blade)), which will scaffold authentication and install Tailwind CSS and Alpine.js for us.

```bash
php artisan breeze:install
```

To finish Breeze you will have to migrate your migrations using Artisan.

```bash
php artisan migrate
```

Your last step will be to [install Livewire](#installing-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](https://jetstream.laravel.com/2.x/installation.html#installing-jetstream) we first need to require it by using Composer.

```bash
composer require laravel/jetstream
```

Next, we have to install Jetstream using Artisan and let it scaffold our application and install the necessary dependencies.

```bash
php artisan jetstream:install livewire
```

And with that we are nearly complete with Jetstream, all that is left is to migrate our migrations.

```bash
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](https://laravel-livewire.com/docs/2.x/quickstart#install-livewire) using the same tool as before, Composer. Open your Laravel application in your terminal and use Composer to require Livewire.

```bash
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>`.

```php
@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.

```php
@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.

```js
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](https://tailwindcss.com/docs/guides/laravel) for it. A guide that we will follow by installing Tailwind CSS and its dependencies as described.

```bash
npm install -D tailwindcss postcss autoprefixer
```

Next, we need to generate our Tailwind CSS and PostCSS config file using `npx`.

```bash
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.

```js
/** @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`.

```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.

```php
@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.

```bash
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`.

```bash
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](https://alpinejs.dev/essentials/installation#as-a-module) using NPM just like Tailwind CSS and following the installation guide.

```bash
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.

```js
import Alpine from 'alpinejs'
```

Now, all we need do to is initialize Alpine using its start method.

```js
Alpine.start()
```

If you want more flexibility with Alpine, like accessing Alpine using the [Alpine.js devtools](https://github.com/alpine-collective/alpinejs-devtools), you can add Alpine to the window object, though it is not required for Alpine to work.

```js
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.

```php
@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](https://laravel-livewire.com/docs/2.x/making-components) and perhaps build an [Alpine.js dropdown](https://alpinejs.dev/start-here#building-a-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](https://github.com/thinkverse/tallstack-example) - if you are more comfortable reading commits and code. You can find the Breeze and Jetstream examples in their respective branches. 👍