LARAVEL JETSTREAM - B2B PROJECT SETUP

Laravel professional course series Part

Laravel Jetstream B2B Project Setup

Basic Setup of Jetstream
Lecture 2: Laravel Installation
Lecture 3: Jetstream starter package installation
Lecture 4: Publish Jetstream Components & Change dashboard page
4.1 Publishing the Jetstream Frontend Views
4.2 Changing the dashboard frontend view
Lecture 5: Change Logo, Favicon and App Title
5.1 Change the large logo on the dashboard page (after Login)
5.2 Change the logo on login / register page
5.3 Change the logo on the dashboard page on the top left
5.4 Change the app's favicon
5.5 Change the app name
5.6. Usage of Tailwind CSS colors for Logo creation
Lecture 6: User seeder + Admin user / seeder + Theory on facades
6.1 Role field in Users table
6.2 Seeding Test Users
6.3 Create and include Admin Seeder
6.4 Excursion: Facades

Basic Setup of Jetstream

Lecture 2: Laravel Installation
STEP 1
We go with our terminal to the parent folder of the installation and install Laravel 8.6. with:
composer create-project laravel/laravel=8.6.x workshop

Then we go into the folder workshop and we control the Laravel version:
cd workshop
cat composer.json

COPYRIGHT: Martin Krebs Eberth, martin@laravel-php.com, All rights reserved

 LARAVEL JETSTREAM - B2B PROJECT SETUP
Laravel professional course series Part

There we see the Laravel version:

STEP 2
We create a MySQL database with the name workshop.

STEP 3
Then we edit the environtmen file .env to set the database settings:

I am using vim here for editing the file, but you can also do it in your editor.

STEP 4
Then we run php artisan migrate and after that we have our 5 standard Laravel tables:

We now can run php artisan serve to see our page in the frontend under:
http://127.0.0.1:8000

COPYRIGHT: Martin Krebs Eberth, martin@laravel-php.com, All rights reserved

 LARAVEL JETSTREAM - B2B PROJECT SETUP
Laravel professional course series Part

Lecture 3: Jetstream starter package installation

You find the documentation for Laravel's starter packages here:

https://laravel.com/docs/8.x/starter-kits

But there is also a dedicated web page only for Laravel Jetstream:
https://jetstream.laravel.com/2.x/installation.html

COPYRIGHT: Martin Krebs Eberth, martin@laravel-php.com, All rights reserved

 LARAVEL JETSTREAM - B2B PROJECT SETUP
Laravel professional course series Part

Now we follow the instructions on this webpage step by step:

composer require laravel/jetstream

php artisan jetstream:install livewire
npm install
npm run dev
Now when we reload the page we see an error:

This error means that Laravel Jetstream needs a session table to work.
We can fix this easily by opening a new terminal tab or window and the we run:
php artisan migrate

The output tells us, that there is a new sessions table, but also something was added to our
users table:

Actually those are the 2 columns that were added:

COPYRIGHT: Martin Krebs Eberth, martin@laravel-php.com, All rights reserved

 LARAVEL JETSTREAM - B2B PROJECT SETUP
Laravel professional course series Part

We will talk about the sessions table and about the Two Factor Authentication later in this
course series!
See also here: https://jetstream.laravel.com/2.x/features/two-factor-authentication.html

COPYRIGHT: Martin Krebs Eberth, martin@laravel-php.com, All rights reserved

 LARAVEL JETSTREAM - B2B PROJECT SETUP
Laravel professional course series Part

Lecture 4: Publish Jetstream Components & Change dashboard page

FIRST GIT COMMIT

Before we continue we should make a git commit:

git init
git add -A
git commit -m "Laravel and Jetstream installed"

We can then also open the project folder in the source tree application, go to the master
branch and there we see our commits on most recent changes in the project:

4.1 Publishing the Jetstream Frontend Views

We will now publish the Jetstream Frontend Components from the Vendor to our public
folder by executing:
php artisan vendor:publish --tag=jetstream-views
You can find information about this also here:
https://jetstream.laravel.com/2.x/installation.html#livewire

4.2 Changing the dashboard frontend view

We now can register a new user with the register-link on the top right:

Then we open the project in our editor and search for the file dashboard.blade.php
(in PhpStorm you can use double shift for the search)

COPYRIGHT: Martin Krebs Eberth, martin@laravel-php.com, All rights reserved

 LARAVEL JETSTREAM - B2B PROJECT SETUP
Laravel professional course series Part

In this file you can see that a layout file was used and also that our actual content "hides"
behind <x-jet-welcome>

This <x-jet-welcome> we can find by opening:

/resources/vendor/jetstream/components/welcome.blade.php

Here we delete the unnecessary content:

After we done the Deletions the Dashboard page should look like this:

COPYRIGHT: Martin Krebs Eberth, martin@laravel-php.com, All rights reserved

 LARAVEL JETSTREAM - B2B PROJECT SETUP
Laravel professional course series Part

Then we produce an output of the logged in user's name:

..and after reload we see the user's name in the frontend:

git add -A
git commit -m "Publish Jetstream Components & Change dashboard page"

Lecture 5: Change Logo, Favicon and App Title

In this lecture we will change the standard Jetstream Logos, we will install a favicon and we
will also change the App Title that is for example visible in your Browser Tab:

Please note that the new Logos and the new favicon is included in the download
section of your course lecture!

PREPARATION
1. Please create a subfolder img inside your public folder.
2. Then place the 2 attached images inside this new folder.

After you did this you might want to have a look on this page:

COPYRIGHT: Martin Krebs Eberth, martin@laravel-php.com, All rights reserved

 LARAVEL JETSTREAM - B2B PROJECT SETUP
Laravel professional course series Part

https://jetstream.laravel.com/2.x/installation.html#livewire

Here you see the 3 files where the current logos are located:

Please open these 3 files now in your editor.

5.1 Change the large logo on the dashboard page (after Login)
In application-logo.blade.php you delete the SVG that is there and simply replace it by the
new logo image file:
<img src="/img/RealEstate.png" alt="Application Logo">

Now the new Logo is visible on the dashboard page:

5.2 Change the logo on login / register page

1. In authentication-card-logo.blade.php inside the href(!) you replace the SVG with
the image file (flash.png).

2. To make sure that the new logo has the correct size, you use the classes w-16 h-16
that were already used in the SVG:
<a href="/">
<img class="w-16 h-16" src="/img/flash.png" alt="Flash Logo">
</a>

COPYRIGHT: Martin Krebs Eberth, martin@laravel-php.com, All rights reserved

 LARAVEL JETSTREAM - B2B PROJECT SETUP
Laravel professional course series Part

Now the new Logo is visible on the login and registration page and has the correct size:

5.3 Change the logo on the dashboard page on the top left
What we are doing here is not only to change the logo on the dashboard page, but actually
on ALL pages that use the main Layout for logged in users.

So in the file application-mark-blade.php we replace the SVG, again with same png:
<img class="w-auto h-9" src="/img/flash.png" alt="Flash Logo">

Please be aware that here we also used the 2 classes that the SVG had before
(w-auto and h-9)

Here is just a little difference to the other Logo in the last example. The classes were not
directly applied in the SVG, but they were passed to the Component in the SVG by the
including file (navigation-menu.blade.php)

Screenshot of the navigation-menu.blade.php

Therefore - in the course lecture - we had to find out those classes with the Google Chrome
Inspector.

After we replaced the Logo we see it on all pages for logged in users:

COPYRIGHT: Martin Krebs Eberth, martin@laravel-php.com, All rights reserved

 LARAVEL JETSTREAM - B2B PROJECT SETUP
Laravel professional course series Part

5.4 Change the app's favicon

For the favicon we use the same png that we used before for the logo.
All we have to do is to reference the favicon in our layout files.

There are 2 layout files that we have to consider. Both of these files are located in the folder
/resources/views/layouts:

1. app.blade.php > Layout file for logged in users

2. guest.blade.php > Layout file for users that are NOT logged in.

In both files we place the favicon in the head section like so:

Now the favicon is visible:

5.5 Change the app name

The best place to change the app name is directly in the .env file:

Please be aware that in Laravel we have this kind of "cascading system" for Definitions like
e.g. the App name.

For example in the file /config/app.php we have something like this:

That means that the configuration value for the app name checks if there is an app name
set in the .env file.

COPYRIGHT: Martin Krebs Eberth, martin@laravel-php.com, All rights reserved

 LARAVEL JETSTREAM - B2B PROJECT SETUP
Laravel professional course series Part

Only if APP_NAME is NOT set in the .env file then the default value (Laravel) is used!

Another example for this system you can find in the template file app.blade.php:

Here again - the value config('app.name') is used to determine the title for the document. But
in case this value is NOT set (in /config/app.php), then the default of "Laravel" is used.

5.6. Usage of Tailwind CSS colors for Logo creation

As Laravel Jetstream uses Tailwind CSS, I would highly recommend that you use some
colors from the Tailwind CSS color palette when creating your logos.

Here you find the basic color palette of tailwind css:

https://tailwindcss.com/docs/customizing-colors#overview

And here the extended color palette:

https://tailwindcss.com/docs/customizing-colors#color-palette-reference

Later in this course I will show you how to use the extended color palette!

COPYRIGHT: Martin Krebs Eberth, martin@laravel-php.com, All rights reserved

 LARAVEL JETSTREAM - B2B PROJECT SETUP
Laravel professional course series Part

Lecture 6: User seeder + Admin user / seeder + Theory on facades

6.1 Role field in Users table

Before we do anything - we open the migration for the users table and add the role field
pretty much at the beginning of the migration so it is easy to spot the contents later.

The new field should be nullable(), so we do not get an error, when the field for some users
is empty.
Then we run php artisan migrate:fresh and we have our new field in the DB table:

6.2 Seeding Test Users

Just as a reminder - this is how the main seeder (DatabaseSeeder) works together with
other seeders and how seeder work with factories:

As you can see, the DatabaseSeeder can call other seeders or directly a factory. Also the
other seeders can call factories.

COPYRIGHT: Martin Krebs Eberth, martin@laravel-php.com, All rights reserved

 LARAVEL JETSTREAM - B2B PROJECT SETUP
Laravel professional course series Part

Step 1: In the file DatabaseSeeder.php you just delete the comment in front of this line:

\App\Models\User::factory(10)->create();
The number in brackets is the number of Users that you want to seed.

Step 2: When we now run php artisan db:seed, then we have already 10 random users:

6.3 Create and include Admin Seeder

Step 1: Create Admin Seeder with: php artisan make:seeder AdminSeeder

Step 2: In this new file we have to import the user model and the Str facade:
use App\Models\User;
use Illuminate\Support\Str;

And in the run() - function we create our Admin User like this:
User::create([
'name' => 'Martin Krebs Eberth',
'email' => 'martin@laravel-php.com',
'role' => 'admin',
'email_verified_at' => now(),
'created_at' => now(),
'updated_at' => now(),
'password' => bcrypt('test'),
'remember_token' => Str::random(10),
]);
Of course you should use your own name and E-Mail here! ;-)

Step 4: Include the new AdminSeeder into the DatabaseSeeder like this:
$this->call([
AdminSeeder::class,
]);

\App\Models\User::factory(10)->create();

See also: https://laravel.com/docs/8.x/seeding#calling-additional-seeders

Important here is to place this call before the call of User::factory, so our Admin is always
at the beginning of our users table, so when we run php artisan migrate:fresh --seed, then it
looks something like this:

COPYRIGHT: Martin Krebs Eberth, martin@laravel-php.com, All rights reserved

 LARAVEL JETSTREAM - B2B PROJECT SETUP
Laravel professional course series Part

6.4 Excursion: Facades

Facades are Collections of very practical functions in Laravel.
Just import them in any file like e.g. : use Illuminate\Support\Str;

And then you can use the functions of this facade with the "::"-Syntax
(like calling a static method):
'remember_token' => Str::random(10),

An overview of all the available facades you can either find in the end of the file
/config/app.php

or you have a look at the overview given in the documentation:

(but here it is NOT complete)
https://laravel.com/docs/8.x/facades#facade-class-reference

COPYRIGHT: Martin Krebs Eberth, martin@laravel-php.com, All rights reserved