ASP.NET Core 3.1 - IdentityServer4 - Identity-UI (Parte 6)

Na Parte 5 eu falei sobre como utilizar o scaffold para criar as telas do Identity, com isso algumas alterações são realizadas no projeto e se você executar o projeto e acessar a Home vai perceber que a interface não está bonita, falta os arquivos do JQuery e Bootstrap e vamos aproveitar esta situação para falarmos sobre algumas funcionalidades que o "Node.js" proporciona nos projetos facilitando o gerenciamento de pacotes NPM.

Você vai perceber que na pasta Views > Shared o arquivo _Layout.cshtml já possui a referência do JQuery e Bootstrap mas os arquivos não estão na pasta wwwroot > lib e o Node.js e o Grunt vão ajudar bastante.

Node.js

Através do "Node.js" podemos configurar os pacotes que farão a distribuição minificada (compactada) dos arquivos para cada um dos ambientes (dev, staging, release, production).
Realize o download da versão LTS, recomendada para a maioria dos usuários, para isso você precisa realizar o Download e instalar.

Configuração

Crie o arquivo package.json na raiz do projeto, pode fazer manualmente ou então com o botão direito sobre o projeto do Identity Add > New Item, procure pelo arquivo do tipo "npm Configuration file", esta opção já vai criar o json na estrutura e com as propriedades que precisamos. Caso você faça manual, pode já copiar o conteúdo do arquivo conforme a seguir.

Depois de realizar a configuração e já com o "Node.js" instalado, execute o comando conforme imagem a seguir para que os pacotes sejam instalados/baixados.

NPM Package Install

A grande vantagem do NPM é que podemos trocar a versão de um pacote muito facilmente, voltando ou atualizando para uma nova versão, sem a necessidade de baixar os arquivos, copiar, colar para dentro das pastas e se não der certo desfazer tudo.

Grunt

Vamos utilizar o Grunt como gerenciador de pacotes e automação de execução de tarefas.
Para isso foi criado no projeto o arquivo Gruntfile.js, dentro dele estão as tarefas que são executadas.

Através do link você tem mais informações ou então na página oficial do Grunt.

Configuração

Você já criou o arquivo, abaixo está o exemplo da configuração que eu usei.

Execute os comandos do NPM a seguir para instalar alguns pacotes que o Gruntfile.js precisa para executas as tasks.

npm install -g grunt

npm install -g grunt-cli

npm install

Grunt Cli Install

Nesta imagem também temos o comando grunt all que deve ser executado na pasta onde está o Gruntfile.js e o "all" é o nome de uma task configurada para ser executada. Esta task limpa o conteúdo da pasta wwwroot > lib e realiza a cópia dos arquivos necessários.

Visual Studio - Task Runner Explorer

No Visual Studio, habilite através do menu View > Other Windows > Task Runner Explorer para visualizar as tasks.

Você vai ver uma tela conforme a imagem a seguir.

VS Task Runner Explorer

Na imagem eu cliquei com o botão direito sobre a task "all" e defini que ela deveria ser executada sempre Before Build, antes de iniciar a build em uma compilação. Eu poderia configurar um Binding para a task "clean" ou para a "copy". É importante que você explore a configuração do arquivo, entenda como ele funciona, com ele é possível configurar diversas tasks e o Grunt possui muitas funcionalidades.

Execute o projeto e você já vai notar que não fizemos nenhuma alteração nos arquivos, só configuramos os artifícios para colocar o JQuery e o Bootstrap nas pastas pré-determinadas pelo _Layout.cshtml.

Todo o código está no Github

Continua na parte 7.