Segura Rio   |    Tecnologias Utilizadas   |    Como Instalar o Projeto   |    Como usar   |    Como subir cada build de seu micro front-end   |    Deploy da aplicação

Segura Rio

Desktop

Mobile

A Aplicação em questão se trata de uma seguradora onde informa os tipos de produtos que oferta para seu cliente, e caso o usuário se interesse pode preencher o formulário e enviar os dados para ela entrar em contato.

Para isso fiz crie um SPA, construído com micro front-end através da lib single-spa em React. Além disso, conectei minha aplicação ao Microsoft Clarity para fazer uma análise sobre os usuários que acessem minha aplicação, respeitando logicamente os padrões impostos pela LGPD, perguntando se os usuários estão de acordo com isso, caso contrario não envio as informações para o Clarity.

(de volta ao topo)

Tecnologias Utilizadas

Utilitários

(de volta ao topo)

Como Instalar o Projeto

Como a Arquitetura do Projeto consiste em cada micro front-end está separado por sua respectiva pasta, para isso será necessario navegar para dentro de cada pasta e rodar separadamente para cada uma um :

yarn 

Após baixar todas as Dependências do Projeto, navegue para a pasta container e , inicie o Servidor com o Comando:

 yarn start

Após isso você terá que ligar cada micro front-end separado, para isso navegue para cada pasta e rode o comando para cada porta conforme a cola abaixo:

insuranceCompany - porta 8500 coverageInsuranceCompany - porta 8501 formInsuranceCompany porta - 8502

 yarn start -- -- port Valor_da_porta

Como usar

Para Inicializar o Projeto Abrir http://localhost:9000 vizualizar no Navegador.

Como subir cada build de seu micro front-end

Para isso eu utilizei o Digital Ocean como meu bucket para guardar cada arquivo da minha pasta dist que é gerada após rodar cada comando separadamente dentro de sua pasta :

 yarn run build

Após subir tudo você terá algo parecido com essa arquitetura de pastas .

Lembrando que a Digital Ocean é gratuito por um breve periodo free trial depois se torna pago

Eu também deixei os dados que eu preciso para mapear todos os meus front-ends dinamicamente usando o mocky.io para simular uma API.

no seguinte modelo :

 {
  "applications": [
    {
      "name": "@hmontarroyos/insuranceCompany",
      "package": "@hmontarroyos/insuranceCompany",
      "activeWhen": "/",
      "exact": true,
      "order": 1
    },
    {
      "name": "@hmontarroyos/coverageInsuranceCompany",
      "package": "@hmontarroyos/coverageInsuranceCompany",
      "activeWhen": "/",
      "exact": true,
      "order": 2
    },
    {
      "name": "@hmontarroyos/formInsuranceCompany",
      "package": "@hmontarroyos/formInsuranceCompany",
      "activeWhen": "/",
      "exact": true,
      "order": 3
    }
  ]
}

Deploy da aplicação

🚀 Let's code! 🚀