Pular para o conteúdo principal

Criar um projeto

Ao final desta página

Uma loja rodando em http://localhost:5173, configurada com o nome da sua loja, tema, moeda, número de WhatsApp e chave Pix.

Rodar a CLI​

npm create plug-store minha-loja

Equivalente com os outros gerenciadores:

pnpm create plug-store minha-loja
yarn create plug-store minha-loja

A CLI faz de cinco a sete perguntas. As de Pix só aparecem quando você escolhe BRL como moeda, porque uma chave Pix não faz sentido fora disso.

PerguntaO que define
Nome da pasta do projetoO diretório a criar
Nome da Loja / Empresaconfig.companyName, usado no header, no rodapé e nas mensagens de pedido
Nicho / Tema inicialdefaultTheme — um dos 50 temas
Moeda principalconfig.currency (BRL, USD ou EUR)
Número do WhatsAppconfig.whatsappPhone, só dígitos, com o código do país
Chave Pix (só em BRL)config.pixKey — CPF, CNPJ, e-mail, telefone ou chave aleatória
Cidade do Pix (se houve chave)config.pixMerchantCity, máximo 15 caracteres

Depois:

cd minha-loja
npm install
npm run dev

Modo não interativo​

Passe --yes para pular todas as perguntas. Útil em CI, em um Dockerfile, ou quando você está gerando vários projetos de cliente.

npm create plug-store minha-loja -- \
  --yes \
  --company "Bloom Cosméticos" \
  --theme beauty \
  --currency BRL \
  --whatsapp 5511999998888 \
  --pix-key bloom@example.com \
  --pix-city "Sao Paulo"
FlagValoresPadrão
--yes, -y—modo interativo
--companyqualquer textoMinha Loja Plug
--themequalquer um dos 50 ids de temafashion
--currencyBRL, USD, EURBRL
--whatsappdígitos com código do paísvazio
--pix-keyCPF, CNPJ, e-mail, telefone, chave aleatóriavazio
--pix-citymáximo 15 caracteresvazio (cai para BRASIL)
--langpt, eno locale da sua máquina

Um --theme ou --currency inválido sai com código diferente de zero e lista os valores aceitos, então um erro de digitação quebra o pipeline em vez de gerar silenciosamente uma loja de moda.

O que é gerado​

minha-loja/
├── index.html
├── package.json          # core e themes travados na versão da própria CLI
├── vite.config.ts
├── tsconfig.json
├── tailwind.config.js    # content inclui a biblioteca compilada
├── postcss.config.js
└── src/
    ├── main.tsx          # importa o CSS da biblioteca, depois o seu
    ├── App.tsx           # <CatalogApp /> com as suas respostas
    └── index.css         # diretivas do Tailwind + overrides de tokens

src/App.tsx é a loja inteira:

import { CatalogApp } from '@neverleans-labs/plug-store-core';

export default function App() {
  return (
    <CatalogApp
      defaultTheme="beauty"
      config={{
        companyName: "Bloom Cosméticos",
        currency: "BRL",
        whatsappPhone: "5511999998888",
        pixKey: "bloom@example.com",
        pixMerchantCity: "Sao Paulo",
      }}
    />
  );
}
Por que o main.tsx importa dois arquivos de estilo

O pacote core é compilado em modo library do Vite, que emite dist/index.css como arquivo separado — dist/index.js não o referencia. O seu ponto de entrada precisa importá-lo, senão a loja renderiza sem nenhum design token. Os estilos da biblioteca vêm primeiro para que o que você escrever em src/index.css vença.

Confira o build​

Antes de publicar qualquer coisa, confirme que o build de produção funciona:

npm run build

Toda versão do PlugStore é validada do mesmo jeito, no Linux e no Windows, contra React 18 e React 19 — veja o job e2e-consumer no CI do repositório.

Próximos passos​