Laravel (5.7) Frontend Scaffolding

This tutorial discusses how to install Laravel Application and frontend scaffolding.

Install Laravel Application

First step open your terminal and type the next command:

laravel new laravel-scaffold

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

enerate 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

<?php
use 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

Previous: Laravel (5.7) Compiling Assets
Next: Laravel (5.7) Authentication