[Dúvida] Como fazer um projeto usando o Vite + TS?

Oi, Joyce! Como vai?

Passos para criar um microfrontend com Vite e TypeScript:

1. Configuração Inicial do Projeto:

   • Como você já tentou criar microfrontends com Vite + React + TS, deve ter notado que o create-single-spa não oferece uma opção direta para Vite. Você pode iniciar um projeto React com TypeScript usando Vite e, em seguida, adaptar a configuração para torná-lo um microfrontend Single SPA.

npm create vite@latest meu-microfrontend --template react-ts
cd meu-microfrontend
npm install

1. Instalação das Dependências do Single SPA:

   • Instale as dependências necessárias para Single SPA:

npm install single-spa single-spa-react

1. Modificações no Código:

   • Adapte o arquivo principal (geralmente src/main.tsx ou src/index.tsx) para usar singleSpaReact:

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Root from './Root'; // Seu componente raiz

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Root,
  errorBoundary(err, info, props) {
    // Logica de tratamento de erro
    return null;
  },
});

export const { bootstrap, mount, unmount } = lifecycles;

1. Configuração do Vite:

   • Configure o vite.config.ts para expor o microfrontend como uma biblioteca:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: 'src/main.tsx', // ou o arquivo principal
      name: 'MeuMicrofrontend', // Nome da sua biblioteca
      fileName: 'meu-microfrontend', // Nome do arquivo de saida
      formats: ['system'], // Formato SystemJS
    },
    rollupOptions: {
      external: ['react', 'react-dom'], // Dependencias externas
    },
  },
});

1. Configuração do Import Map:

   • No seu orquestrador Single SPA, configure o import map para apontar para o seu microfrontend:

{
  "imports": {
    "@home-hub/meu-microfrontend": "http://localhost:5173/meu-microfrontend.js"
  }
}

Pontos importantes:

• Formato SystemJS: Configure o Vite para gerar módulos no formato SystemJS, que é compatível com Single SPA.
• CORS: Configure os cabeçalhos CORS corretamente no servidor Vite para evitar problemas de carregamento entre diferentes origens.
• Public Path: Ajuste o publicPath no Vite para garantir que os assets sejam carregados corretamente.
• Erros de Conexão: Os erros de conexão entre os fronts podem estar ligados a configurações incorretas de CORS, import maps ou public paths.

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!