admin-lte@v3.0.0-beta.1 부트스트랩 4에 올려보자.

1. 프로젝트 생성

 

// verbose옵션 생략가능함.

> composer create-project laravel/laravel <project_name> --prefer-dist --verbose

 

 

2. adminlte를 인스톨하자.

 

// 버전은 https://github.com/ColorlibHQ/AdminLTE/releases 요기서 확인해보고 적당히 받아서 넣도록 하자.

> npm install admin-lte@v3.0.0-beta.1 --save

 

 

3. env파일 수정 - DB 데이터베이스 호스트, 이름, 패스워드 수정

 

4. 서버 시작 - php artisan serve

 

5. 인증 만듬 - php artisan make:auth

 

6. 데이터베이스 생성해줌 - CREATE DATABASE project_name;

 

7. php artisan migrate

 

8. app > providers > appServiceProviders.php

use Illuminate\support\facades\Shema;

 

public function boot() { 

    schema::defaultStringLength(191);

}

 

 

9. php artisan migrate:fresh

 

 

10. 아마 오류 뜰거임. 액세스 오류. passport안올려서 그럼. 대충 인증 만들고 passport하는게 순서인거 같음.

 

composer require laravel/passport

php artisan migrate

php artisan passport:install

 

app > user.php 

use Laravel\Passport\HasApiTokens;

user 클래스 안에 use HasApiTokens;

두개 추가.

 

app> Providers > AuthServiceProvider의 boot메소드에서 Passport:routes 호출.

use Laravel\Passport\Passport;

 

protected $policies = [
    'App\Model' => 'App\Policies\ModelPolicy', // 주석제거
];

public function boot()
{
    $this->registerPolicies();

    Passport::routes(); // 추가
}

 

config/auth.php

'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],

    'api' => [
        'driver' => 'passport',  // token값으로 되어있음. 변경 ㄱㄱ
        'provider' => 'users',
        'hash' => false,  // 디폴트값으로 있었음. 없으면 추가 안해도 됨.
    ],
],

 

11. 이제 샘플 페이지 띄워보자.

resource> view> layouts > master.blade.php파일을 생성 후,

adminlte3페이지에서 소스보기 한 다음 control+a, control+v 한 후, 저장.

윗부분 link모두 삭제 후, <link rel="stylesheet" href="/css/app.css" />입력.

제일 아래부분 스크립트 부분 모두 삭제 </div>과 </body>사이 모두 삭제후, <script src="/js/app.js" /> 입력.

 

resource> view> home.blade.php 첫 줄에

@extends('layouts.master')로 변경 // 원래는 @extends('layouts.app')으로 되어있음.

 

12. resource > js > bootstrap.js

14번째 라인 주변에

require('bootstrap');

required('admin-lte'); // 추가

 

13. resource > scss > app.scss

@import '~bootstrap/scss/bootstrap';

@import '~admin-lte/dist/css/adminlte.css'; //추가 package.json안에 내용 복사

 

14. 터미널에서 - 패키징 되는거 다보임.

npm install watch

 

----

 

15. 터미널에서 

npm install @fortawesome/fontawesome-free

 

하고나면 package.json에 fortawesome 추가 되어있는거 확인할 수 있음.

그리고 node_modules에서도 @fortawesome폴더가 생성 된 거 확인 할 수 있음.

 

16. resource > scss > app.scss

$fa-font-path: '../webfonts';

@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';

추가해줌.

 

성공하면 성공했다고 라라벨 믹스로 성공했다고 노티 띄워줌.