Create Scaffold with Laravel 5.7 — Authentication (Part 1)

Alfredo Barron

Follow

Sep 20, 2018 · 3 min read

We will create a scaffold with Laravel 5.7 to using like base for our future projects. The first step is learning to create a authentication system.

Table of Contents

• Install Laravel Application
• Install Laravel Authentication
• Install Vuejs Frontend

Install Laravel Application

First step open your terminal and typing the next command:

laravel new laravel-scaffold

Install Laravel Authentication

Enter to folder project an run the next command:

cd laravel-scaffold
php artisan make:auth

Create DB

Run the next commands:

mysql -u{user} -p{password}
mysql> create database laravel-scaffold;

Configure DB

Edit .env file

nano .env

Into .env file fill the data base vars

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel-scaffold
DB_USERNAME=user
DB_PASSWORD=password

Create tables

Run the next command:

php artisan migrate

Generate User Table Seed

Create UsersTableSeeder.php with the next command:

php artisan make:seeder UsersTableSeeder

Into UsersTableSeeder.php file write the next code:

<?php

use Illuminate\Database\Seeder;

class UsersTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        factory(App\User::class, 50)->create();
    }
}

Add UsersTableSeeder.php seeder to DatabaseSeeder.php

<?phpuse Illuminate\Database\Seeder;class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        $this->call(UsersTableSeeder::class);
    }
}

Run seed

php artisan db:seed

Install Vuejs Frontend

Run the next command:

npm install

Add Browsersync Reloading into webpack.mix.js file

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .browserSync('laravel-scaffold.test');

Finally Compiling Assets (Laravel Mix) with the next commans:

npm run dev
// or
npm run watch

Now we have the next screen when enter the http://localhost:3000 route in browser

http://localhost:3000/login

http://localhost:3000/register

http://localhost:3000/password/reset

Thanks for reading. If you like this… Give me your clapping and follow me!!

Whats Next

Part 1. Authentication
Part 2. Add Core UI Template
Part 3. Profile
 — 3.1 Edit Profile
 — 3.2 Change password
 — 3.3 Generate & Upload Avatar

If ($applaud ≥ 1000) {
Part 4. Users → Coming soon
Part 5. Roles → Coming soon
}

Repository

References