How to install Laravel and Livewire

#laravel #webdev #beginners #codenewbie

What is Livewire and Why we use it?

Livewire is a full-stack framework for laravel which makes it simple to build modern, reactive, dynamic interfaces without leaving the comfort of laravel and its blade template.
Livewire component makes the AJAX call to the server with data and server re-rendered the component with new HTML without reloading the whole page and will intelligently mutates the DOM with updated data.
Livewire is great stack which provides the experience of SPA’s like VUE, REACT without including their complexity.
Livewire can be used when we want build a modern, dynamic and reactive application but don’t want to use Full Javascript frameworks like VUE and REACT.

What we will see in this blog.

Laravel Installation
Laravel Scaffolding
Livewire Installation
Livewire component creation

First we will start with Laravel Installation

 composer create-project laravel/laravel laravel-livewire-ex

Now to to newly created laravel project usin cd laravel-livewire-ex

After that we need to create a scaffolding using laravel breeze by using following command -

Step 1 - composer require laravel/breeze --dev
Step 2 - php artisan breeze:install
Step 3 - npm install
Step 4 - npm run dev

Now you have successfully created login and registration scaffolding.

Now create a database and put the database name in your .env file, after that you need to run migration

 php artisan migrate

Now its time to install Livewire in your Laravel project,
run following command to install livewire.

 composer require livewire/livewire

you have now successfully installed livewire, the next step is to include livewire's Javascript and Styles in your base file which we are going to use in overall project (In our example open a app.layout file and add livewire style, script to it) as given below.

 @livewireStyles
 </head>
 <body>
   .....
 @livewireScripts
 </body>
 </html>

Yeah We have now successfully installed laravel and livewire, now we will see how to create livewire file and use it in our larval component.

Run following command -

 php artisan make:livewire welcomeMsg

It will create two file - 1st is component and 2nd is view file .
CLASS: app/Http/Livewire/WelcomeMsg.php
VIEW: resources/views/livewire/welcome-msg.blade.php
In class file it will return a view/component.
Now, open our view file which is in resources/views/livewire/welcome-msg.blade.php and add "Welcome this is my First Laravel Livewire Project" message in it (or any message that you want to display on screen.
After that we will add this component where we need to use it.
Open a Dashboard blade file and add <livewire:welcome-msg /> component to it, now open your browser and register yourself first after login you will see the welcome msg on your dashboard.