Alhassan Kamil

Posted on Mar 3, 2021 • Edited on Jul 27, 2022 • Originally published at nayiwrites.com

Creating Your First Blog With TALL - Part One

#laravel #alpinejs #livewire #tailwindcss

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:

What constitutes the TALL stack and what each is in developing web apps
The benefits you gain when using the TALL stack to create web apps
How to setup the TALL stack using Laravel Jetstream on your development machine.
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 installed on your system. If Composer isn't installed on your computer, follow the instructions on their website 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, Alpine.js, Laravel and Livewire.

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 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 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 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 tags as if they were HTML attributes.

Laravel

The Laravel framework is a PHP 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 lets you develop modern, dynamic, reactive user interfaces without having to learn new JavaScript frameworks such as Vue.js and React. 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:

Helps you ship web apps faster.
Makes you more productive as a web developer
Takes care of all parts of the web development cycle: front-end, back-end and UX.
Takes care of securing your web applications.
Takes interactivity and responsive web design to a new level
And so many others

Setting up Our Development Environment

Laravel Jetstream 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 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:

macOS: $HOME/.composer/vendor/bin
Windows: %USERPROFILE%\AppData\Roaming\Composer\vendor\bin
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 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 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 Enter/Return, 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 dependencies and migrate our database. Enter this into your terminal to do that:

npm install
npm run dev
php artisan migrate

When NPM 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:

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:

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:

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.