Frontend

Os 4 frameworks frontend suportados: Next.js, React/Vite, Vue e Angular.

O PlazerCLI suporta 4 frameworks frontend. Todos sao configurados com TypeScript e, se habilitado, Tailwind CSS. O frontend e gerado em apps/web/.

Next.js

O framework padrao e recomendado. Usa o App Router (Next.js 14+) com Server Components.

Estrutura gerada:

apps/web/
├── src/
│   └── app/
│       ├── layout.tsx        # Layout raiz com metadata
│       ├── page.tsx          # Pagina inicial
│       └── globals.css       # Estilos globais
├── public/
├── next.config.ts
├── tsconfig.json
└── package.json

Exemplo do layout gerado:

import type { Metadata } from 'next';
import './globals.css';

export const metadata: Metadata = {
  title: 'meu-projeto',
  description: 'Descricao do projeto',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="pt-BR">
      <body>{children}</body>
    </html>
  );
}

Scripts: dev (next dev), build (next build), start (next start), lint (next lint)

React + Vite

React com Vite para quem prefere uma SPA (Single Page Application) rapida.

Estrutura gerada:

apps/web/
├── src/
│   ├── App.tsx               # Componente principal
│   ├── main.tsx              # Entry point com React 18 createRoot
│   └── index.css             # Estilos globais
├── public/
├── index.html                # HTML template
├── vite.config.ts            # Vite config (porta 3000)
├── tsconfig.json
└── package.json

Scripts: dev (vite), build (tsc -b && vite build), preview (vite preview)

Vue

Vue 3 com Composition API e Vue Router, rodando sobre Vite.

Estrutura gerada:

apps/web/
├── src/
│   ├── App.vue               # Componente raiz
│   ├── main.ts               # Entry point com createApp
│   └── style.css             # Estilos globais
├── public/
├── index.html
├── vite.config.ts            # Plugin @vitejs/plugin-vue
├── env.d.ts                  # Tipos do Vite
├── tsconfig.json
└── package.json

Scripts: dev (vite), build (vue-tsc -b && vite build), preview (vite preview)

Angular

Angular 19+ com Standalone Components (sem NgModules).

Estrutura gerada:

apps/web/
├── src/
│   ├── app/
│   │   └── app.component.ts  # Componente standalone
│   ├── main.ts               # bootstrapApplication
│   ├── index.html
│   └── styles.css            # Estilos globais
├── angular.json              # Angular CLI config
├── tsconfig.json
└── package.json

Scripts: dev (ng serve --port 3000), build (ng build), lint (ng lint)

Tailwind CSS

Se habilitado, o Tailwind CSS e configurado automaticamente para qualquer framework frontend. Alem disso, paginas SaaS pre-desenhadas sao geradas:

Landing page — hero, features, pricing, CTA
Login / Register — formularios de autenticacao
Dashboard — layout com sidebar e conteudo
Pricing — tabela de planos (Free, Pro, Enterprise)

Todas as paginas usam classes utilitarias do Tailwind e sao responsivas.

Arquitetura

Backend