Welcome to the second part of Creating Your First Blog With TALL (Tailwind CSS, Alpine.js, Laravel, Livewire) tutorial series. In the previous episode, you learnt what each individual component in the TALL stack is, the benefits of using this awesome stack and how to setup your development environment for developing websites with the TALL stack using Laravel Jetstream. This part takes you through configuring your installation to suit the needs of our blog. It includes configuring Jetstream/Fortify and routes, changing the default app logo and changing the default Jetstream logo to our own. So, at the end of this tutorial, you'll learn: How to setup database and other critical configurations in the .env file. How to configure Jetstream and Fortify to enable user profile photo upload and email verification respectively in a fresh Laravel Jetstream application. How to create a symlink from our public folder to the storage folder for media uploads. How to add routes to a Laravel application, and How to change the default app logo Today it seems we're in for a rough ride so tighten your seat belt and let the journey begin :] Configuring The .env File The Laravel framework provides a definitive way of configuring your web application in the form of a .env file (also called a dot env, or an environment file). This file holds critical configurations and secret environment variables your application may need to access some services such as database connections, API secrets, and other app-level configurations. The .env file is located in your project root and may not be visible unless you enable showing of hidden files in your computer. Open the .env file and change the block of text containing your database connection details to the following: DB_CONNECTION=mysql DB_HOST= DB_PORT=3306 DB_DATABASE=tall_blog DB_USERNAME=root DB_PASSWORD=rootpass123 You can identify the database details by looking at the text with prefix DB_. What we have done here is that we're using MySQL as our database connection and connecting through localhost on port 3306, which is the default MySQL connection port. Our database name is tall_blog with username and password as root and rootpass123 respectively. Make sure to save the file before closing. If you haven't done so, create the tall_blog database from either your MySQL command line client or through a GUI such as phpMyAdmin. You may have to visit the MySQL installation page if you don't have MySQL installed or use a ready-made stack such as WAMP or LAMPP. In either case, you'll need your MySQL database server running for the rest of the tutorial series. Though optional, it may be in your interest to set the APP_NAME, APP_URL and APP_KEY in the first block of the .env file to your app's name, url and the app secret key respectively. During the installation, Laravel might have already filled the APP_KEY for you and you can leave that out if that's the case. The default name Laravel gives to your website is Laravel and app url is likely localhost/project-name.test. You may need to change these when deploying your blog. For now, you can leave the default values. Configuring Laravel Jetstream and Fortify The next thing we're going to do is to configure Jetstream to enable profile photo upload by users. For this, while at the root of your project, navigate to the config folder. Open the jetstream.php config file and un-comment Features::profilePhotos() in the $features array. After doing that, the $features array should look something like this: |-------------------------------------------------------------------------- | | Some of Jetstream's features are optional. You may disable the features | by removing them from this array. You're free to only remove some of | these features or you can even remove all of these if you need to. | */ 'features' => [ // Features::termsAndPrivacyPolicy(), Features::profilePhotos(), // Features::api(), // Features::teams(['invitations' => true]), Features::accountDeletion(), ], Save and close the file. In the same config folder, open the fortify.php config file and make sure you un-comment the Features::emailVerification() line in the $features array. For the avoidance of doubt, the features array should look somehow like below, depending on the features you opted in to use: /* |-------------------------------------------------------------------------- | Features |-------------------------------------------------------------------------- | | Some of the Fortify features are optional. You may disable the features | by removing them from this array. You're free to only remove some of | these features or you can even remove all of these if you need to. | */ 'features' => [ Features::registration(), Features::resetPasswords(), Features::emailVerification(), Features::updateProfileInformation(), Features::updatePasswords(), Features::twoFactorAuthentication([ 'confirmPassword' => true, ]), ], Save the file. We're now done configuring Laravel Jetstream and Fortify and our blog should be able to send verification emails when users register for an account. To check whether you can now upload profile photos, start up the built-in PHP server and check your profile section from the Dashboard page ( php artisan serve You will notice that a new Photo (SELECT A NEW PHOTO) section has been added to the fields if you navigate to New Profile Section New Profile Section Creating Symlinks Symlinks, otherwise known as symbolic links point one directory or file to another file or directory. This means when you symlink a file to another, working on this file indirectly means you're working on the original file. The symbolic file is a ghost of the original file and clicking the symlinked file should send you to the original file. To keep your website's media from the public and other security reasons, Laravel by default, serves your media from the public folder. Although uploads are put in the storage folder, Laravel makes these uploads available in the public folder through symlinking. Because symlinking is an important feature to make your web application function, Laravel provides a command for creating symlinks from the storage folder to your project's public folder. To create a link to your public folder, enter the following into your terminal while in the root of your project: php artisan storage:link Your output should look something like this if the link was successfully created: kamil@kamil-sc650:~/Projects/Web/tall-blog$ php artisan storage:link The [/home/kamil/Projects/Web/tall-blog/public/storage] link has been connected to [/home/kamil/Projects/Web/tall-blog/storage/app/public]. The links have been created. Now if you go to the public folder you should see a new storage folder pointing to the main storage folder.