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.
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!
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.
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.
Top comments (5)
Thank you for the article!
@tolyandimov I'm happy that the article helped you ♥️
Is there an sql script to create the database ?
You have to create the database yourself. If you need a SQL command, then this may help:
CREATE DATABASE "tall-blog"
Ok thank you very much Alhassan.