Single SPA: avançando em autenticação de micro-frontends

Criando um módulo utilitário com um framework - Apresentação

Olá, estudante da Alura! Esperamos que você esteja bem. Boas-vindas a mais um curso front-end com o Pedro Mello.

Audiodescrição: Pedro Mello é um homem de pele branca, tem cabelos curtos e escuros, barba escura que veste uma roupa preta. Ao fundo, temos uma estante com objetos diversos de decoração e instrumentos musicais. O cenário está iluminado por uma luz azulada.

Este é um curso essencial para quem deseja se destacar no mercado de trabalho e adicionar novas ferramentas ao seu conjunto de habilidades como pessoa desenvolvedora. Neste curso, vamos abordar a autenticação em projetos utilizando micro front-ends (interfaces de usuário).

O que vamos aprender

Vamos utilizar o framework single-spa para criar um módulo utilitário que usará o React. Isso significa que teremos um módulo utilitário baseado em um framework front-end para refatorar um módulo já existente, um micro front-end que atualmente utiliza Vanilla JavaScript (JavaScript puro).

Além disso, vamos transformar a autenticação implementada com local storage em uma autenticação baseada em cookies de sessão. Para isso, utilizaremos duas bibliotecas muito conhecidas no desenvolvimento web: Universal Cookies e React Cookie, integrando-as aos micro front-ends do projeto.

Também vamos refatorar a navegação do dashboard do Home Hub, um projeto de automação residencial. A navegação atual será transformada com o uso do React Router, adicionando um toque especial às telas já existentes.

Pré-requisitos do curso

Este curso oferece muitos conteúdos interessantes e temos certeza de que será muito enriquecedor para vocês. É recomendável que tenham conhecimento prévio de micro front-ends, mas não se preocupem, pois há uma barra de cursos recomendados na plataforma para assistirem antes de começarem este curso.

Vamos seguir passo a passo, desde a implementação e criação até a última aula. Vamos juntos até o final deste curso. Esperamos vocês na sequência deste vídeo para iniciar o projeto Home Hub.

Criando um módulo utilitário com um framework - Criando o módulo utilitário

Antes de começarmos a explorar tópicos avançados de autenticação em microfront-ends, iniciaremos criando um módulo utilitário baseado em um framework.

Para este novo módulo utilitário, utilizaremos o React. A escolha do React se deve à futura utilização da biblioteca React Cookie, que facilitará o gerenciamento de cookies de sessão e autenticação.

Atualmente, no Visual Studio Code, com o terminal aberto, estamos na raiz do projeto Home Hub, uma dashboard de automação residencial. Vamos digitar alguns comandos no terminal.

Para criar o módulo utilitário baseado no React, continuaremos utilizando o Single SPA, framework que gerencia a orquestração de micro front-ends no projeto Home Hub. No terminal, digitaremos:

npx create-single-spa

Após a inicialização, será solicitado o diretório do novo microfront-end ("Directory for new project"). Digite react-utils.

Em seguida, ele pergunta o tipo do micro front-end que desejamos criar ("Select type to generate"). A primeira opção cria uma aplicação ou um parcel, a segunda cria um módulo utilitário e a última, um orquestrador.

Selecionaremos a opção para criar um módulo utilitário ("in-browser utility module"). O próximo passo é escolher o framework ("Which framework do you want to use?"). As opções incluem "none", que usa apenas o Vanilla JavaScript, React, Vue, Angular, Svelte e outros. Selecionaremos React.

Escolhemos o npm como gerenciador de pacotes ("Which package manager do you want to use?"), mantendo a coerência com o restante dos micro front-ends e orquestrador do projeto Home Hub. Fique à vontade para escolher a opção que você preferir.

Ativaremos o TypeScript digitando "Y" para a pergunta "Will this project use Typescript?" e inseriremos o nome da organização ("Organization name").

Para verificar o nome da organização, acesse a pasta "root" no Visual Studio Code, dentro de "src > home-hub-root.config.ts". Em registerApplication, ao registrar a Navbar, o nome da organização é @home-hub/react-navbar, portanto, utilizaremos "home-hub". Nomearemos o projeto ("Project name") como react-utils, para padronizar com o nome do diretório.

No terminal do Visual Studio Code, a instalação e configuração do projeto react-utils estão em andamento. Após a finalização, verificaremos o conteúdo da pasta "react-utils".

No diretório "react-utils", encontramos pastas como "node_modules" para conter as dependências do projeto. Dentro de "src", temos arquivos como "declaration.d.ts", que serve para fazer a declaração dos arquivos que podemos usar, e "home-hub-react-utils.tsx", que atualmente exporta uma função chamada publicApiFunction. Há também "root-component-test.tsx" e "root-component.tsx", que exibe o conteúdo do componente em tela.

Começaremos eliminando arquivos desnecessários, como "root-component-test" e "root.component.tsx", pois este módulo utilitário não exportará JSX ou componentes.

Também removeremos o arquivo "eslintrc" devido a conflitos em outros micro front-ends. Por exemplo, no diretório "react-login", o "eslintrc" também foi removido.

Outras configurações no webpack serão necessárias, mas abordaremos isso posteriormente. Na sequência, implementaremos uma função para testar o módulo utilitário, após realizar algumas configurações adicionais. Nos vemos na próxima etapa da aula.

Criando um módulo utilitário com um framework - Configurações do módulo utilitário

Chegou a hora de finalizarmos a configuração do React Utils, um microfront-end que é um módulo utilitário.

Configurando o React Utils

Primeiro, precisamos ter o Visual Studio Code aberto no diretório "home-hub". Em seguida, no Explorador de arquivos, à esquerda, acessaremos "react-utils > webpack.config.js".

Precisamos externalizar essa biblioteca. Por estarmos rodando um microfront-end utilitário, não o configuramos de forma convencional, no orquestrador. Se fosse um microfront-end do tipo application ou parcial, faríamos a configuração no import map, tratando como uma aplicação. No entanto, como é um módulo utilitário, precisamos exportá-lo e o alocar em um servidor separado.

Para isso, com o webpack.config.js aberto, dentro das chaves do return merge(deaultConfig,{}) codaremos externals: ['@home-hub/react-utils'].

Arquivo webpack.config.js

//código omitido

return merge(deaultConfig,{
    externals: ['@home-hub/react-utils'],
});

Salvamos o arquivo e continuaremos as configurações para utilizá-lo. Agora acessaremos react-utils/package.json. Nesse arquivo estão todos os comandos e scripts necessários para utilizarmos e construirmos o microfront-end utilitário.

Na linha 7, na lista scripts, temos o build:webpack, criamos uma build de produção do módulo utilitário para podermos utilizar e expor via servidor HTTP, ou seja, externamente. Antes disso, abriremos o "react-utils > src > home-hub-react-utils.tsx".

Nesse arquivo, temos a export function publicApiFunction(){}. Para entendermos como ela está sendo chamada, mudaremos essa função para o conhecido helloWorld(). Dentro das chaves, escreveremos o console.log('Hello, World!').

Arquivo `hoem-hub-reac-utils.tsx

export function helloWorld(){
    console.log('Hello,World!);
}

Após salvarmos o arquivo, executaremos o cd react-utils. Dentro dele, rodaremos o npm run build:webpack.

cd react-utils
npm run build:webpack

Com esse comando, geramos um arquivo .js e um .js.map, que podemos utilizar para gerar um servidor. Tanto que, ao terminar de rodar o build:webpack, criou-se uma pasta chamada "dist", contendo dois arquivos:

• home-hub-react-utils.js
• home-hub-react-utils.js.map

Rodando o módulo no servidor

Executaremos o arquivo utils.js em um servidor HTTP. Para isso, precisaremos rodar o comando http-server . --cors no Terminal. Esse comando expõe o diretório para o qual o HTTP Server aponta, de forma que conseguimos acessar pelo IP Local. Caso você não tenha esse comando instalado, precisa executar primeiro o comando:

npm i -g http-server

Usamos o -g para instalar essa biblioteca globalmente. Ao executarmos, ele instala o http-server e o disponibilizando nesse Terminal. Se após a instalação o comando ainda não funcionar, basta reiniciar o Terminal se necessário.

Com o servidor http-server disponível para uso, começaremos acessando a pasta "dist", depois rodamos o comando http-server . --cors.

cd dist
http-server . --cors

(retorno omitido)

Available on:

http://127.0.0.1:8080

http://192.168.1.46:8080

http://192.168.1.34:8080

Quando executamos, ao final dos dados temos alguns links HTTP. Percebemos que ele roda na porta 8080, atravé do nosso IP, e conseguimos acessar o IP local. Então temos um servidor local expondo os arquivos homehub-react-utils.js e homehub-react-utils.js.map.

Configurando a biblioteca do orquestrador

Agora, precisamos configurar no orquestrador para a biblioteca ficar visível. No Explorador de arquivos, acessaremos "root > src > index.ejs".

No arquivo index.ejs, precisamos encontrar o script type="sistemjs-importmap", onde estão todos os imports referentes a bibliotecas.

Atenção: Lembrando que temos um script do importmap com as bibliotecas, como o react e o react-dom, e um script de importmap com os imports do tipo aplicação, como o react-navbar e o react-dashboard. Faremos a alteração no de bibliotecas.

Para fazermos essa importação, copiaremos o import do root-config, dentro do importmap de aplicação, e colaremos no importmap de bibliotecas, abaixo do "react-dom".

<script type="systemjs-importmap">
    {
        "imports": {
            "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
            "react": "https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js",
            "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js",
            "@home-hub/root-config": "//localhost:9000/home-hub-root-config.js"
        }
    }
</script>
<link rel="preload" href="https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js" as="script">

Precisamos fazer algumas alterações nesse link:

1. Substituímos o /root-config por react-utils;
2. Mudaremos a porta de 9000 para 8080;
3. Mudaremos o fina do link para home-hub-react-utils.

O servidor com o arquivo que precisamos mapear está na porta 8080, por isso localhost:8080, e passamos o mesmo nome do arquivo na pasta "dist": home-hub-react-utils.

<script type="systemjs-importmap">
    {
        "imports": {
            "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
            "react": "https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js",
            "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js",
            "@home-hub/react-utils": "//localhost:8080/home-hub-react-utils.js"
        }
    }
</script>
<link rel="preload" href="https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js" as="script">

Assim, o React Utils está configurado no orquestrador. Falta exportarmos, no webpack, os outros microfront-ends que utilizarão este utilitário. Faremos isso a seguir.

Sobre o curso Single SPA: avançando em autenticação de micro-frontends

O curso Single SPA: avançando em autenticação de micro-frontends possui 116 minutos de vídeos, em um total de 45 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Criando um módulo utilitário com um framework
• Adicionando o controle de sessão por cookie
• Refatorando o módulo utilitário existente
• Refatorando a dashboard e navbar
• Visualização de dispositivos