Creating Your First Blog With TALL - Part One
Tags: laravel, alpinejs, livewire, tailwindcss
Published: 2021-03-03 15:32:00

Welcome to the first part of **Creating Your First Blog With TALL (Tailwind CSS, Alpinejs, Laravel, Livewire)** tutorial series. This tutorial takes you through introduction to the TALL stack, how it can help you ship products faster and setting up the TALL stack in your development environment.

After the end of this tutorial, you'll learn:

1.  What constitutes the TALL stack and what each is in developing web apps
2.  The benefits you gain when using the TALL stack to create web apps
3.  How to setup the TALL stack using [Laravel Jetstream](https://jetstream.laravel.com) on your development machine.
4.  How to add Jetstream authentication and configure it for our new Laravel app

In addition, you'll be prepared enough for the next part of this tutorial series.

Let's get going.

**Note:** This tutorial assumes you already have [Composer](https://getcomposer.org) installed on your system. If Composer isn't installed on your computer, follow the instructions on their [website](https://getcomposer.org) to install it. Prior knowledge in Laravel and entering terminal commands is also assumed.

## Introduction to the TALL stack

The TALL stack is a combination of both front-end and back-end libraries/frameworks that makes developing web apps a breeze. TALL is an acronym for [**Tailwind CSS**](https://tailwindcss.com), [**Alpine.js**](https://github.com/alpinejs/alpine), [**Laravel**](https://www.laravel.com) and [**Livewire**](https://laravel-livewire.com).

As you might have guessed, the back-end framework here is Laravel, while Alpine.js and Tailwind CSS are front-end libraries. Laravel Livewire is a bridge between the front-end and the Laravel back-end and brings dynamic data binding to Laravel so you can achieve reactivity and interactivity from the user facing parts of your website with Laravel, instead of using JavaScript.

### Tailwind CSS

[Tailwind CSS](https://tailwindcss.com) is a utility-based CSS framework that takes the hassles of using CSS out of your way. While using Tailwind CSS, you may decide not to write a single line of CSS code. This means you're not even required to have an extensive knowledge of CSS (apart from basic knowledge of CSS classes and other attributes) to use Tailwind CSS.

With Tailwind CSS, the possibilities of what you can design are unlimited. What you can do is only limited by your level of creativity and imagination!

### Alpinejs

[Alpinejs](https://github.com/alpinejs/alpine) is the Tailwind of JavaScript libraries. It's a very small JavaScript library you can use in place of larger ones such as [Vue.js](https://vuejs.org) and React to achieve interactivity and responsiveness for your web app.

Alpinejs takes the utility-first approach used by Tailwind CSS to make using JavaScript in your webpages easier. Instead of writing functions and class in a script tag or a .js file, you expressively write your JavaScript code in [HTML](https://en.wikipedia.org/wiki/HTML) tags as if they were [HTML attributes](https://en.wikipedia.org/wiki/HTML#Attributes).

### Laravel

The [Laravel](https://laravel.com) framework is a [PHP](https://www.php.net) framework that brings simplicity, robustness and productivity to developing modern websites. Laravel is a matured framework with a very large community of developers, extensive but simple to grasp documentation and several official packages that helps in your website development cycle.

Using Laravel means that it is easy to get answers to questions you may face when developing your websites. You also have access to a large ecosystem of free, opensource packages that make it faster to ship and deploy web apps to production. What's more, you get all the benefits PHP has on the web such as more hosting and deployment options, server affordability, support and many others.

### Laravel Livewire

Laravel [Livewire](https://www.laravel-livewire.com) lets you develop modern, dynamic, reactive user interfaces without having to learn new JavaScript frameworks such as [Vue.js](https://vuejs.org) and [React](https://reactjs.org). You write all your code in PHP/Laravel and Livewire handles the JavaScript part for you.

If you have worked with Vue.js before, you probably know how data binding helps make your work easier as developer. Livewire supports data binding (best known as model binding) to forms, adding form validations, hassle-free file uploads, beautiful pagination and a bunch of other features.

Livewire separates your code into components so you get a well-structured, modular code when using it. Similar to Laravel components, the idea of Livewire components is such that each component carries out a particular action, but you're free to use components as the only view for webpages and even perform different actions in a component.

## Benefits of the TALL stack

I believe you can already deduce the benefits of each of these tools from their explanations above. If you can't still figure out, here are some of the advantages of the TALL stack:

1.  Helps you ship web apps faster.
2.  Makes you more productive as a web developer
3.  Takes care of all parts of the web development cycle: front-end, back-end and [UX](https://en.wikipedia.org/wiki/User_experience).
4.  Takes care of securing your web applications.
5.  Takes interactivity and responsive web design to a new level
6.  And so many others

## Setting up Our Development Environment

Laravel [Jetstream](https://jetstream.laravel.com) is a Laravel scaffolding package providing authentication and API support out of the box for Laravel web applications. Jetstream comes bundled with either the [Inertia](https://inertiajs.com) stack or Livewire, plus Tailwind CSS and Alpine.js. We'll be using the Livewire stack for this tutorial series.

To install the Jetstream starter kit, we first have to download the Laravel installer:
```
composer global require laravel/installer
```

This downloads the Laravel executable into Composer's system-wide **_vendor_** directory. To make the executable available globally, we have to add the Composer **_vendor/bin_** directory to our **_$PATH_**. Depending on your development machine, the Composer **_vendor/bin_** directory is in one of the following:

1.  macOS: **_$HOME/.composer/vendor/bin_**
2.  Windows: **_%USERPROFILE%\AppData\Roaming\Composer\vendor\bin_**
3.  Linux: **_$HOME/.config/composer/vendor/bin or $HOME/.composer/vendor/bin_**

For adding this directory to your **$PATH**, please consult the documentation for your Operating System.

Once you have added Composer **_vendor/bin_** directory to your path, navigate to a folder you'd like your project to be hosted, such as **home/Projects** on Linux or **Documents/Projects** on Windows. Create a new Laravel project with the following command in a terminal/Command Prompt:

```
laravel new tall-blog
```

Wait for the required dependencies to be installed. When the installation is done, you should get something like this:
```
kamil@kamil-sc650:~/Projects/Web$ laravel new tall-blog
 _                              _
| |                            | |
| |    __ _ _ __ __ ___  _____| |
| |   / _` | '__/ _` \ \ / / _ \ |
| |___| (_| | | | (_| |\ V / __/ |
|______\__,_|_| \__,_| \_/ \___|_|

Creating a "laravel/laravel" project at "./tall-blog"
Installing laravel/laravel (v8.5.9)
 - Installing laravel/laravel (v8.5.9): Extracting archive
Created project in /home/kamil/Projects/Web/tall-blog
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
Loading composer repositories with package information
Updating dependencies
Lock file operations: 105 installs, 0 updates, 0 removals
 - Locking asm89/stack-cors (v2.0.2)
 - Locking brick/math (0.9.2)
 - Locking dnoegel/php-xdg-base-dir (v0.1.1)
 - Locking doctrine/inflector (2.0.3)
 - Locking doctrine/instantiator (1.4.0)
 - Locking doctrine/lexer (1.2.1)
 - Locking dragonmantank/cron-expression (v3.1.0)
 - Locking egulias/email-validator (2.1.25)
 - Locking facade/flare-client-php (1.3.7)
 ...
Writing lock file
Installing dependencies from lock file (including require-dev)                                                   
Package operations: 105 installs, 0 updates, 0 removals
 - Downloading symfony/var-dumper (v5.2.3)
 - Downloading symfony/string (v5.2.3)
 - Downloading symfony/console (v5.2.3)
 - Downloading symfony/css-selector (v5.2.3)
 - Downloading symfony/routing (v5.2.3)
 - Downloading symfony/process (v5.2.3)
 - Downloading symfony/mime (v5.2.3)
 - Downloading symfony/http-foundation
 ...
 - Installing doctrine/inflector (2.0.3): Extracting archive
 - Installing doctrine/lexer (1.2.1): Extracting archive
 - Installing symfony/polyfill-ctype (v1.22.0): Extracting archive
 - Installing webmozart/assert (1.9.1): Extracting archive
 - Installing dragonmantank/cron-expression (v3.1.0): Extracting archive
 - Installing symfony/polyfill-php80 (v1.22.0): Extracting archive
 - Installing symfony/polyfill-mbstring (v1.22.0): Extracting archive
 - Installing symfony/var-dumper (v5.2.3): Extracting archive
 - Installing symfony/polyfill-intl-normalizer (v1.22.0): Extracting archive
 - Installing symfony/polyfill-intl-grapheme (v1.22.0): Extracting archive
 - Installing symfony/string (v5.2.3): Extracting archive
 - Installing psr/container (1.0.0): Extracting archive
 - Installing symfony/service-contracts (v2.2.0): Extracting archive
 ...
63 package suggestions were added by new dependencies, use `composer suggest` to see details.                    
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fideloper/proxy
Discovered Package: fruitcake/laravel-cors
Discovered Package: laravel/sail
Discovered Package: laravel/tinker
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
74 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan key:generate --ansi
Application key set successfully.

Application ready! Build something amazing.
```

If you've got errors during the previous stage, make sure your system meets the system requirements specified [here](https://laravel.com/docs/8.x/deployment#server-requirements) on the Laravel website.

Spin up the built-in PHP server and let's see our starter website:

```
php artisan serve
```

Now open [http://127.0.0.1:8000](http://127.0.0.1:8000) to see our newly crafted Laravel site.

Our next task is to install Laravel Jetstream. While still in the root of our project, enter this in your terminal:

```
composer require laravel/jetstream
```

Again, if everything went smoothly, you get something like this:
```
kamil@kamil-sc650:~/Projects/Web$ cd tall-blog && composer require laravel/jetstream
Using version ^2.1 for laravel/jetstream
./composer.json has been updated
Running composer update laravel/jetstream
Loading composer repositories with package information
Updating dependencies
Lock file operations: 9 installs, 0 updates, 0 removals
 - Locking bacon/bacon-qr-code (2.0.3)
 - Locking dasprid/enum (1.0.3)
 - Locking jaybizzle/crawler-detect (v1.2.104)
 - Locking jenssegers/agent (v2.6.4)
 - Locking laravel/fortify (v1.7.5)
 - Locking laravel/jetstream (v2.1.3)
 - Locking mobiledetect/mobiledetectlib (2.8.35)
 - Locking paragonie/constant_time_encoding (v2.4.0)
 - Locking pragmarx/google2fa (8.0.0)
Writing lock file
Installing dependencies from lock file (including require-dev)                                                   
Package operations: 9 installs, 0 updates, 0 removals
 - Downloading laravel/jetstream (v2.1.3)
 - Installing dasprid/enum (1.0.3): Extracting archive
 - Installing bacon/bacon-qr-code (2.0.3): Extracting archive
 - Installing jaybizzle/crawler-detect (v1.2.104): Extracting archive
 - Installing paragonie/constant_time_encoding (v2.4.0): Extracting archive
 - Installing pragmarx/google2fa (8.0.0): Extracting archive
 - Installing laravel/fortify (v1.7.5): Extracting archive
 - Installing mobiledetect/mobiledetectlib (2.8.35): Extracting archive
 - Installing jenssegers/agent (v2.6.4): Extracting archive
 - Installing laravel/jetstream (v2.1.3): Extracting archive
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fideloper/proxy
Discovered Package: fruitcake/laravel-cors
Discovered Package: jenssegers/agent
Discovered Package: laravel/fortify
Discovered Package: laravel/jetstream
Discovered Package: laravel/sail
Discovered Package: laravel/tinker
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
75 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
```

Congratulations! The Jetstream package has been installed. Now we have to run the `jetstream:install` Artisan command with `livewire` as an option to use Jetstream with the Livewire stack:

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

You can append `--teams` to the above command if your blog needs a team support. After pressing <em>Enter/Return</em>, you should get an output such as this:

```
kamil@kamil-sc650:~/Projects/Web/tall-blog$ php artisan jetstream:install livewire
Migration created successfully!
./composer.json has been updated
Running composer update livewire/livewire laravel/sanctum
Loading composer repositories with package information
Updating dependencies
Lock file operations: 2 installs, 0 updates, 0 removals
 - Locking laravel/sanctum (v2.9.0)
 - Locking livewire/livewire (v2.3.16)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 2 installs, 0 updates, 0 removals
 - Downloading livewire/livewire (v2.3.16)
 0/1 [>---------------------------]  0%
 1/1 [============================] 100% - Installing laravel/sanctum (v2.9.0): Extracting archive
 - Installing livewire/livewire (v2.3.16): Extracting archive
 0/2 [>---------------------------]  0%
 2/2 [============================] 100%Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fideloper/proxy
Discovered Package: fruitcake/laravel-cors
Discovered Package: jenssegers/agent
Discovered Package: laravel/fortify
Discovered Package: laravel/jetstream
Discovered Package: laravel/sail
Discovered Package: laravel/sanctum
Discovered Package: laravel/tinker
Discovered Package: livewire/livewire
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
76 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
Copied Directory [/vendor/laravel/sanctum/database/migrations] To [/database/migrations]
Copied File [/vendor/laravel/sanctum/config/sanctum.php] To [/config/sanctum.php]
Publishing complete.

Livewire scaffolding installed successfully.
Please execute "npm install && npm run dev" to build your assets.
```

After this, we also need to install and build [NPM](https://npmjs.com) dependencies and migrate our database. Enter this into your terminal to do that:

```
npm install
npm run dev
php artisan migrate
```

When [NPM](https://npmjs.com) dependencies have been installed, built and migrations run, our blog scaffolding process is now done. Out of the box, we've got both traditional and two-factor authentication, session management and API support for our Laravel blog for free :).

If not running, start up the built-in PHP server using `php artisan serve` and point your browser to `http://127.0.0.1:8000` . You should be able to get something like this:

![Jetstream Homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cnj47ck8mew2rg7eaotu.png)

This means our blog scaffolding process has been successful. Click on **Register** link in the top right corner of the navigation bar to register for a new account:

![Registration page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7fdxdgxcbq0f7lk5iki.png)

Enter your details and click **Register** button to register and login.

If everything went on successful, you'll be redirected to the ready-made Jetstream dashboard:

![Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zorgb4nefv5mo7l49fz5.png)

Feel free to explore the features of your newly created Jetstream powered dashboard. In particular, you'd definitely want to go through the navigation bar menu links to see what they have to offer.

* * *

This completes the first episode of our **Creating your first blog with TALL** tutorial series. Our next episode will be configuring Jetstream and Fortify (used for authentication) in order to enable profile photos and email verification support, setup database and other configurations in the **.env** file, configure our routes, create a **symlink** to the **public** folder to make file uploads possible, change the default application logo, and create the necessary models and migrations for our blog.

Thank you for reading! See you for the next tutorial.