ServBay

Português

English
简体中文
繁體中文
Español
العربية
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Português

English
简体中文
繁體中文
Español
العربية
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Appearance

Como Criar e Rodar Projetos React com ServBay ​

O que é React? ​

React é uma biblioteca JavaScript de código aberto, mantida pela Meta (anteriormente Facebook) e sua comunidade, voltada para a construção de interfaces de usuário (UI). Com uma abordagem baseada em componentes, React permite desenvolver UIs interativas de forma eficiente, facilitando a criação de aplicações de página única (SPA) e de sistemas web complexos e escaláveis. Entre seus principais pontos fortes estão o paradigma declarativo, atualização eficiente do virtual DOM e uma vasta comunidade de ferramentas e bibliotecas.

Principais Características e Vantagens do React ​

  • Desenvolvimento baseado em componentes: Permite dividir interfaces complexas em componentes independentes e reutilizáveis, aumentando a manutenção e a reutilização do código.
  • Visão declarativa: Basta descrever o estado da interface e o React cuida de atualizar o DOM conforme necessário, simplificando a lógica de desenvolvimento.
  • Virtual DOM: Mantém uma representação virtual do DOM na memória, fazendo atualizações de forma otimizada e melhorando significativamente a performance.
  • Fluxo de dados unidirecional: Os dados fluem de cima para baixo, tornando as mudanças de estado previsíveis e fáceis de acompanhar.
  • JSX: Sintaxe que permite escrever estruturas semelhantes ao HTML dentro do JavaScript, melhorando a legibilidade e a organização do código.
  • Ecossistema robusto: Conta com muitos pacotes e soluções populares como React Router, Redux/Zustand/MobX, Material UI, entre outros, cobrindo gerenciamento de estado, roteamento e componentes visuais.

Com React, você cria aplicações web modernas e de alta performance com mais agilidade e eficiência.

Ambientando o Desenvolvimento e Deploy React com ServBay ​

ServBay é um ambiente completo para desenvolvimento web local, disponível para macOS e Windows, trazendo diversos pacotes prontos para uso, incluindo Node.js. Neste guia, veremos como aproveitar o ambiente Node.js e os recursos de websites do ServBay para criar, configurar e rodar um projeto React — incluindo a configuração de proxy reverso para desenvolvimento e de serviço estático para produção.

Pré-requisitos ​

Antes de começar, certifique-se de que você:

  1. Instalou o ServBay: ServBay já está instalado e ativo em seu sistema.
  2. Instalou o pacote Node.js: O pacote Node.js já foi instalado via interface ou CLI do ServBay. Consulte a documentação de instalação do Node.js no ServBay para instruções detalhadas. O ServBay gerencia automaticamente as versões e as variáveis de ambiente do Node.js.

Criando Seu Projeto React ​

Vamos utilizar o Vite, uma ferramenta moderna que oferece inicialização super-rápida e atualização instantânea de módulos (HMR), tornando o desenvolvimento muito mais fluido e eficiente. Hoje, Vite é uma das principais escolhas para novos projetos React, substituindo inclusive o antigo create-react-app.

  1. Abra o terminal e navegue até o diretório raiz dos sites

    Inicie seu terminal. O diretório sugerido pelo ServBay para os sites é:

    macOS:

    bash
    cd /Applications/ServBay/www

    Windows:

    cmd
    cd C:\ServBay\www

  2. Crie um novo projeto React com Vite

    Execute o comando abaixo para criar o projeto servbay-react-demo a partir do template React do Vite:

    bash
    npx create-vite servbay-react-demo --template react
    • npx é o executor de pacotes do npm, permitindo rodar ferramentas diretamente do registro npm sem instalação global, garantindo sempre a última versão do create-vite.
    • create-vite é o scaffolding oficial de projetos Vite.
    • servbay-react-demo será o nome da pasta do projeto.
    • --template react define o uso do template React para a estrutura inicial.

    Siga as instruções exibidas no terminal para finalizar a criação do projeto.

  3. Entre no diretório do projeto e instale as dependências

    Acesse o diretório recém-criado e instale os pacotes necessários:

    bash
    cd servbay-react-demo
npm install
    • Se preferir, pode usar yarn install ou pnpm install, caso utilize esses gerenciadores de pacotes.

Editando o Conteúdo do Projeto React (Opcional) ​

Para validar a configuração e o funcionamento, altere rapidamente a página inicial do projeto.

  1. Abra o arquivo src/App.jsx ou src/App.tsx

    No editor de código de sua preferência, abra o arquivo correspondente dentro do diretório do projeto — src/App.jsx (para JavaScript) ou src/App.tsx (para TypeScript).

  2. Edite o conteúdo

    Localize o trecho responsável pela renderização principal e altere para exibir "Hello ServBay!":

    javascript
    // ... outros imports ...
import './App.css';

function App() {
  // ... outros códigos ...
  return (
    <>
      {/* ... outros elementos ... */}
      <h1>Hello ServBay!</h1>
      {/* ... outros elementos ... */}
    </>
  );
}

export default App;

    Salve o arquivo.

Rodando em Modo de Desenvolvimento ​

Durante o desenvolvimento, usamos um servidor local com atualização instantânea (HMR). O ServBay pode direcionar requisições externas ao servidor local via proxy reverso.

  1. Inicie o servidor de desenvolvimento pelo terminal

    No diretório raiz do projeto, rode o servidor Vite e defina uma porta, por exemplo 8585:

    bash
    npm run dev -- --port 8585
    • npm run dev executa o script dev do package.json, normalmente responsável por iniciar o Vite.
    • -- --port 8585 indica o número da porta que será usada pelo Vite.

    Após iniciado, o terminal exibirá o endereço local, ex: http://localhost:8585. Deixe essa janela aberta enquanto estiver desenvolvendo.

  2. Configure o proxy reverso no ServBay

    Abra o ServBay e vá até a seção de Websites. Clique em adicionar para criar a seguinte configuração:

    • Nome: ServBay React Dev (descritivo)
    • Domínio: servbay-react-dev.servbay.demo (exemplo usando o domínio da marca ServBay)
    • Tipo do site: Selecione Proxy Reverso (Reverse Proxy)
    • IP do Proxy: 127.0.0.1 (servidor rodando localmente)
    • Porta do Proxy: 8585 (mesma utilizada no servidor dev)

    Salve a configuração. O ServBay aplicará as mudanças e seu servidor web interno (Caddy ou Nginx) redirecionará automaticamente as visitas ao domínio servbay-react-dev.servbay.demo para http://127.0.0.1:8585.

    Para mais detalhes sobre como adicionar um site, consulte a documentação de gerenciamento de Websites do ServBay.

  3. Acesse o site de desenvolvimento

    No navegador, acesse o domínio configurado: https://servbay-react-dev.servbay.demo.

    • Uma das vantagens do ServBay é a configuração automática de certificados SSL (via ServBay User CA ou Public CA), permitindo acesso seguro via HTTPS. Saiba mais em Como proteger o site com SSL no ServBay.
    • Alterações feitas nos arquivos, ao salvar, refletem automaticamente no navegador graças ao recurso de HMR.

Build para Produção ​

Ao finalizar o desenvolvimento, é necessário gerar os arquivos otimizados para publicação.

  1. Compile o projeto para produção

    No diretório raiz, execute o comando para gerar o build:

    bash
    npm run build

    Esse comando executa o script build do package.json. No caso do Vite com React, os códigos serão compilados, minificados e otimizados, produzindo arquivos estáticos (HTML, CSS, JS, etc) na pasta dist. O terminal exibirá uma mensagem confirmando a conclusão.

  2. Configurar serviço de arquivos estáticos no ServBay

    O diretório dist gerado pelo build contém os arquivos prontos para serem servidos por um servidor web. No ServBay, basta criar uma configuração de site estático apontando para essa pasta:

    Abra o ServBay, vá até Websites e clique em adicionar para criar:

    • Nome: ServBay React Prod
    • Domínio: servbay-react.servbay.demo (diferenciado do domínio de desenvolvimento)
    • Tipo do site: Selecione Estático (Static)
    • Diretório raiz: Caminho completo para a pasta dist gerada:
      • macOS: /Applications/ServBay/www/servbay-react-demo/dist
      • Windows: C:\ServBay\www\servbay-react-demo\dist

    Salve a configuração. O ServBay ajustará o servidor interno para servir diretamente os arquivos da pasta dist.

  3. Acesse o site em produção

    No navegador, acesse o domínio: https://servbay-react.servbay.demo.

    Agora está disponível a versão final, otimizada e pronta para produção, também protegida automaticamente por SSL via ServBay.

Conclusão ​

Com este passo a passo, você aprendeu como criar um projeto React local usando o ServBay, com configurações separadas para desenvolvimento (proxy reverso) e produção (serviço de arquivos estáticos). O ServBay facilita muito o setup e gerenciamento do ambiente para macOS e Windows, oferecendo suporte nativo para Node.js, configurações flexíveis de websites (proxy e estáticos) e certificado SSL automático, tornando o desenvolvimento com React muito mais prático. Continue evoluindo seu projeto, testando e publicando facilmente com infraestrutura preparada pelo ServBay.