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

Configuração

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.

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

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

Configuração

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

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

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

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 em ASP.NET Core 3.1 — IdentityServer4 — Identity-UI (Parte 6).

Originally published at http://alextochetto.com on March 13, 2020.