O que vem num projeto frontend gerado pelo Studio — stack, estrutura de pastas, o que é gerado e o que é teu, configuração por variáveis de ambiente e como o correr.
Um projeto frontend criado no Studio parte do template @igrp/framework-next-template: uma aplicação Next.js 15 (App Router) já ligada à plataforma — autenticação, layout, menus e permissões do Access Management, i18n e o Design System. Esta página descreve o projeto; para o criar, ver Primeiro projeto, e para desenhar páginas, Studio · Frontend.
Stack
| Next.js 15 + React 19 | App Router, Turbopack em dev e em build |
| Framework iGRP | @igrp/framework-next, -next-auth, -next-ui, -next-types — ver Frontend |
| Design System | @igrp/igrp-framework-react-design-system — ver Design System |
| Autenticação | NextAuth v4 com OIDC (Keycloak), ou sem autenticação para pré-visualização |
| Dados e formulários | React Query, React Hook Form + Zod |
| i18n | next-intl (pt, en, fr) |
| Qualidade | TypeScript, Tailwind CSS v4, Biome |
Estrutura
O que é do Studio e o que é teu
| Pasta / ficheiro | Quem escreve | Para quê |
|---|---|---|
.igrpstudio/ | Studio | Definição das páginas, permissões e app em JSON — a fonte do que o Page Builder mostra |
src/app/(igrp)/(generated)/ | Studio | Código das páginas desenhadas no Page Builder. Não edites à mão — é regenerado ao gravar |
src/app/(myapp)/ | Tu | Componentes, funções, tipos e actions próprios, registados em igrp.config.ts — ver Custom Components |
src/app/igrp.config.ts | Tu | Registo do que está em (myapp) para o Studio o oferecer |
src/igrp.template.config.ts | Template | Configuração do layout: header, sidebar, menus, Access Management, toasts |
src/app/(auth)/, src/middleware.ts, src/lib/ | Template | Login, sessão, proteção de rotas e utilitários |
src/app/(igrp)/(demo)/ | Template | Páginas de exemplo (dashboard, permissões…) — podes removê-las |
src/temp/ | Template | Utilizador, menus e apps de exemplo para a pré-visualização sem autenticação |
src/i18n/messages/ | Tu | Textos em pt, en e fr |
Não edites (generated)
O que escreveres em src/app/(igrp)/(generated)/ perde-se na próxima gravação no Studio. Para lógica própria usa o Custom Code da página ou ficheiros em (myapp).
Configuração
Tudo se configura por variáveis de ambiente — o .env.example documenta cada uma. As principais:
| Variável | |
|---|---|
AUTH_PROVIDER | igrp-auth (Keycloak) ou none (sem autenticação) |
IGRP_AUTH_ISSUER, IGRP_AUTH_CLIENT_ID, IGRP_AUTH_CLIENT_SECRET | Cliente OIDC da aplicação |
NEXTAUTH_URL, NEXTAUTH_SECRET | Sessão NextAuth |
IGRP_APP_CODE | Código da aplicação no Access Management |
IGRP_ACCESS_MANAGEMENT_API | API do Access Management |
IGRP_SYNC_ACCESS, IGRP_SYNC_ON_CODE_MENUS, IGRP_SYNC_PERMISSIONS | Sincronizar menus e permissões declarados no código |
IGRP_PREVIEW_MODE | Pré-visualização com dados de exemplo, sem login |
NEXT_PUBLIC_BASE_PATH | Prefixo da app quando servida num subcaminho (ex.: /apps/<projeto>) |
No workspace, o Studio trata disto
Num projeto criado dentro do workspace, o Studio regista o cliente OAuth e injeta estas variáveis ao fazer Deploy Docker — ver Projetos.
Correr
No cartão do projeto, ⋮ → Deploy Docker e depois Abrir no Navegador: a app fica em http://<slug>:<porta>/apps/<projeto>, ligada à plataforma local.
| Script | |
|---|---|
pnpm dev | Servidor de desenvolvimento |
pnpm build | Lint (Biome e i18n) e build de produção |
pnpm start | Servir o build |
pnpm lint / pnpm format | Biome |
Documentação incluída
A pasta docs/ do projeto traz guias sobre a arquitetura, autenticação, Access Management, permissões, design system, tokens, i18n, header slots, Docker, variáveis de ambiente e migração.
Atualizar o template
Projetos criados com versões antigas do template atualizam-se com o @igrp/template-migrator.
Última atualização: