Agora vamos ver como ativar o gerenciador de pacotes Javascript NPM, realizar a instalação do template AdminLTE3 e Font Awesome.

Instalar o gerenciador de pacotes NPM

Primeiro devemos baixar o Node.js => https://nodejs.org/en/

Recomendo sempre a versão LTS por ser mais estável.

Feito o download, basta executar a instalação padrão.

Abra o terminal do nosso projeto no Visual Studio Code (caso o VSC esteja aberto pode ser que o terminal não reconheça o comando, feche o programa e abra novamente se for o caso).

Digite o comando:

npm install

Aguarde o download e a instalação terminar. Todos os pacotes de instalação ficam dentro da pasta node_modules.

Com a instalação finalizada, podemos baixar os pacotes com o comando NPM, primeiro vamos instalar o template AdminLTE3:

Verifique o site https://libraries.io/npm/admin-lte para saber qual a versão atual

Como a versão 3 atual é a alpha.2 vamos executar a instalação dela:

npm install admin-lte@v3.0.0-alpha.2 --save

Vamos instalar também o Font Awesome:

https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css

npm install @fortawesome/fontawesome-free --save

Sempre use o --save para incluir os pacotes dentro das dependências do package.json.

Pronto, o template já está pronto para ser usado em nossa aplicação. Confira o site https://adminlte.io/themes/dev/AdminLTE/index.html sempre que quiser usar algum componente do AdminLTE3 e o site https://fontawesome.com/icons?d=gallery com os ícones do Font Awesome e a documentação.

Agora vamos importar os arquivos JS e CSS do AdminLTE / Font Awesome, primero no arquivo:

resourcers/assets/js/bootstrap.js

Colocando a linha:

require('admin-lte');

E o CSS:

resourcers/assets/sass/app.scss

Colocando as linhas:

@import '~admin-lte/dist/css/adminlte.css';
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';

Por último o arquivo

resources/assets/sass/_variables.scss

as linhas:

//Font Awesome
$fa-font-path: "../webfonts";

Tudo instalado, agora bastar criarmos o arquivo padrão do nosso template.

Entre na pasta:

resources/views/layouts

E crie o arquivo:

master.blade.php

Com o código disponível em:

https://github.com/Meirimbr/curso_laravel/blob/master/6/master.blade.php

Agora acesse o arquivo:

resources/views/home.blade.php

e substitua a linha @extends('layouts.app') por:

@extends('layouts.master')

Execute o comando:

npm run watch

Para estar compilando os arquivos em tempo real.

Vamos entrar em nosso projeto e testar. Se tudo ocorreu bem vamos ter uma tela igual a essa:

Finalizando, vou demonstrar como mudar as cores dos ícones do Font Awesome de maneira simples.

Acesse o arquivo:

resources/assests/sass/_variable.scss

E adicione as classes das cores:

.color-blue{
 color: $blue;
}
.color-indigo{
 color: $indigo;
}
.color-purple{
 color: $purple;
}
.color-pink{
 color: $pink;
}
.color-red{
 color: $red;
}
.color-orange{
 color: $orange;
}
.color-yellow{
 color: $yellow;
}
.color-green{
 color: $green;
}
.color-teal{
 color: $teal;
}
.color-cyan{
 color: $cyan;
}

E depois vamos mudar a cor do ícone de SAIR, colocando a classe .color-red no arquivo master.blade.php

<i class="nav-icon fa fa-power-off color-red"></i>

Atualize a página e veja se mudou a cor do ícone.

Pronto! Já temos o AdminLTE3 + Font Awesome configurado.

[ ]'s