Skip to main content

Creating a Workspace Feature

Neste tutorial, construiremos uma feature vertical pequena em todo o workspace hub. Começaremos definindo a lógica principal, expondo-a por meio da API e, finalmente, consumindo-a no frontend web.

Isso nos ensinará como as diferentes camadas (Core, API, Web) interagem em nossos contextos delimitados.

Passo 1: Defina a Lógica Principal​

Começaremos na camada Core, que contém nossos modelos de domínio e funções puras.

Navegue até workspaces/hub/packages/core/src/ e crie um novo arquivo chamado greeter.ts.

Adicione o seguinte código:

export function getGreeting(name: string): string {
  return `Hello, ${name}! Welcome to the hub.`;
}

Agora, vamos exportá-lo para que outros pacotes possam usá-lo. Abra workspaces/hub/packages/core/src/index.ts e adicione:

export * from './greeter';

Passo 2: Exponha a Lógica na API​

Em seguida, passaremos para a camada API para criar um endpoint que utilize nossa nova função core.

Navegue até workspaces/hub/apps/api/src/routes/ e crie um novo arquivo chamado greet.ts.

Adicione a seguinte rota do Fastify:

import { FastifyInstance } from 'fastify';
import { getGreeting } from '@repo/hub/core';

export default async function (fastify: FastifyInstance) {
  fastify.get('/greet', async (request, reply) => {
    const { name = 'Developer' } = request.query as { name?: string };
    const message = getGreeting(name);
    return { message };
  });
}

Passo 3: Consuma a API no Web Frontend​

Por fim, exibiremos esta saudação em nosso frontend React.

Navegue até workspaces/hub/apps/web/src/components/ e crie GreetingPanel.tsx.

Adicione o seguinte componente React:

import React, { useEffect, useState } from 'react';

export function GreetingPanel() {
  const [message, setMessage] = useState('Loading...');

  useEffect(() => {
    fetch('/api/greet?name=Explorer')
      .then((res) => res.json())
      .then((data) => setMessage(data.message))
      .catch(() => setMessage('Failed to load greeting.'));
  }, []);

  return (
    <div className="greeting-panel">
      <h2>{message}</h2>
    </div>
  );
}

Passo 4: Verifique a Feature​

Agora, execute o servidor de desenvolvimento para ver nossa feature em ação.

pnpm dev --filter=@repo/hub/*

Abra seu navegador em http://localhost:3000. Você deverá ver seu novo componente renderizando o texto:

Hello, Explorer! Welcome to the hub.

Conclusão​

Ótimo trabalho! Implementamos com sucesso uma feature vertical criando lógica pura no Core, disponibilizando-a por meio da API e renderizando-a na camada Web. Este padrão é a base para todo o desenvolvimento de features em nossa arquitetura.