Criando e Executando Projetos Vue.js no macOS com ServBay

Vue.js é um framework JavaScript progressivo e popular para construção de interfaces de usuário. É fácil para iniciantes, flexível e de alta performance — ideal para criar aplicações de página única (SPA). O ServBay é um poderoso ambiente local de desenvolvimento web que oferece suporte prático ao Node.js, tornando-se a plataforma ideal para desenvolvimento Vue.js no macOS.

Este guia explica em detalhes como, desde o início, criar um projeto Vue.js usando o ambiente integrado do ServBay, utilizando tanto o modo de desenvolvimento quanto de produção.

O que é Vue.js?

Vue.js é um framework progressivo de JavaScript para construção de interfaces de usuário. Diferente de outros frameworks robustos, Vue adota uma abordagem incremental, com um núcleo focado apenas na camada de visão (view), o que facilita o aprendizado e integração com projetos existentes ou outras bibliotecas. O Vue 3 é a versão mais recente, trazendo novas funcionalidades e melhorias, incluindo maior performance, bundle reduzido e melhor suporte para TypeScript.

Principais funcionalidades e benefícios do Vue 3

• API de Composição (Composition API): Organização de lógica através de funções, tornando o código de grandes componentes mais reutilizável e fácil de manter.
• Melhorias de performance: O Vue 3 utiliza o objeto Proxy para seu sistema reativo e um algoritmo de Virtual DOM otimizado, trazendo ganhos significativos de velocidade.
• Bundle menor: Com Tree-shaking, a biblioteca principal do Vue 3 é mais enxuta e carrega mais rápido.
• Suporte avançado a TypeScript: O Vue 3 fornece tipagem aprimorada, melhorando a experiência ao usar TypeScript em aplicações Vue.
• Ciclo de vida de componentes aprimorado: Novos hooks e a função setup deixam a estrutura dos componentes mais clara e fácil de administrar.

Com o Vue 3, desenvolvedores conseguem construir aplicações web modernas e responsivas de maneira muito mais eficiente.

Criando e Executando Projetos Vue.js com o Ambiente Integrado do ServBay

Neste tutorial, usaremos o Node.js integrado ao ServBay para criar e executar um projeto Vue.js. O recurso Sites do ServBay será utilizado para configurar o servidor web e permitir acesso local ao projeto através de proxy reverso e serviço de arquivos estáticos.

Pré-requisitos

Antes de começar, certifique-se de ter realizado os seguintes passos:

1. Instale o ServBay: Você já deve ter o ServBay instalado e funcionando no seu macOS.
2. Instale o pacote Node.js: Use o gerenciador de pacotes do ServBay para instalar o Node.js. Para instruções detalhadas, veja Como instalar e usar Node.js no ServBay.

Criando um Projeto Vue.js

1. Inicialização do Projeto

   Primeiro, abra o terminal. Recomenda-se salvar os projetos de sites em /Applications/ServBay/www. Acesse esta pasta e inicialize um novo projeto Vue.js com o comando npm create vue@latest. A tag @latest garante que você usará a versão mais atual do Vue CLI ou da ferramenta create-vue, normalmente gerando um projeto Vue 3.

   cd /Applications/ServBay/www
   npm create vue@latest

   Siga as instruções, informando o nome do projeto (recomenda-se servbay-vue-app) e escolhendo recursos como TypeScript, Vue Router, Pinia, conforme suas necessidades. Exemplo de configuração:

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No # Escolha Yes ou No conforme necessário
   ✔ Add JSX Support? … No # Escolha Yes ou No conforme necessário
   ✔ Add Vue Router for Single Page Application development? … Yes # Recomendado Yes
   ✔ Add Pinia for state management? … No # Escolha Yes ou No conforme necessário
   ✔ Add Vitest for Unit testing? … No # Escolha Yes ou No conforme necessário
   ✔ Add an End-to-End Testing Solution? … No # Escolha Yes ou No conforme necessário
   ✔ Add ESLint for code quality? … Yes # Recomendado Yes
   ✔ Add Prettier for code formatting? … Yes # Recomendado Yes
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # Escolha Yes ou No conforme necessário

2. Instalando as Dependências

   Com o projeto inicializado, entre na pasta servbay-vue-app e rode o comando npm install para baixar todas as dependências necessárias.

   cd servbay-vue-app
   npm install

Editando o Exemplo de Conteúdo do Projeto (Opcional)

Para confirmar se o projeto está rodando corretamente, você pode editar o arquivo src/App.vue e substituir o conteúdo padrão por uma mensagem simples: "Hello ServBay!".

Abra o arquivo src/App.vue no diretório do projeto e altere o conteúdo para:

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>Este é um aplicativo Vue.js rodando via ServBay.</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Configurando o Ambiente de Desenvolvimento (usando Proxy Reverso)

Projetos Vue em modo de desenvolvimento geralmente sobem um servidor local (baseado em Vite ou Webpack) com hot module replacement (HMR) para facilitar o processo. O ServBay permite mapear um domínio local para o endereço e porta deste servidor por meio de proxy reverso.

1. Executando o Servidor de Desenvolvimento

   No diretório raiz do projeto, execute o comando abaixo para subir o servidor de desenvolvimento. Use o parâmetro --port para especificar a porta (exemplo: 8585), certificando-se de que ela esteja livre.

   npm run dev -- --port 8585

   O terminal mostrará que o servidor está rodando e escutando na porta informada, por exemplo, http://localhost:8585.

2. Configurando Proxy Reverso no ServBay

   Abra o ServBay, navegue em Sites e crie uma nova configuração de site do tipo Proxy reverso:

   • Nome: My first Vue dev site (ou outro nome descritivo)
   • Domínio: servbay-vue-dev.servbay.demo (ou outro domínio terminado em .servbay.demo)
   • Tipo do site: Proxy reverso
   • IP de destino do proxy reverso: 127.0.0.1
   • Porta de destino do proxy reverso: 8585 (igual à usada ao iniciar o servidor dev)

   Salve e o ServBay atualizará automaticamente a configuração do servidor web (Caddy ou Nginx), mapeando os acessos ao domínio servbay-vue-dev.servbay.demo para http://127.0.0.1:8585.

   Para detalhes, consulte Adicionando site de desenvolvimento Node.js no ServBay.

3. Acessando o Modo de Desenvolvimento

   Certifique-se de que o servidor web do ServBay está rodando. Abra o navegador e acesse o domínio configurado: https://servbay-vue-dev.servbay.demo.

   O ServBay configura certificados SSL automaticamente para domínios locais (usando ServBay User CA ou ServBay Public CA), permitindo acesso HTTPS seguro ao seu ambiente de desenvolvimento — muito próximo à produção. Para detalhes do SSL, veja Configurando SSL para sites no ServBay.

   Agora, você já deve ver seu app Vue rodando no navegador em modo desenvolvimento, incluindo hot reload nas mudanças de código.

Construindo o Build de Produção e Publicando (usando site estático)

Finalizado o desenvolvimento, é possível gerar uma versão otimizada (build) do seu projeto Vue.js para produção, composta por arquivos estáticos (HTML, CSS, JS etc.), facilmente publicados via ServBay.

1. Gerando o Build de Produção

   No diretório raiz do projeto, execute:

   npm run build

   O resultado será um conjunto de arquivos estáticos otimizados, normalmente na pasta dist do projeto.

2. Configurando o Serviço de Arquivos Estáticos

   No ServBay, em Sites, adicione um novo site do tipo Estático:

   • Nome: My first Vue production site (ou outro nome)
   • Domínio: servbay-vue-prod.servbay.demo (ou outro domínio .servbay.demo de sua preferência)
   • Tipo do site: Estático
   • Raiz do site: /Applications/ServBay/www/servbay-vue-app/dist (diretório absoluto da dist gerada)

   Após salvar, o ServBay servirá diretamente os arquivos da pasta dist como site estático.

3. Acessando o Modo Produção

   Certifique-se de que o servidor web do ServBay está ativo. No navegador, acesse https://servbay-vue-prod.servbay.demo.

   Você verá a versão otimizada do app Vue funcionando, com alto desempenho de carregamento. Da mesma forma, recursos como domínio customizado e SSL automático do ServBay permitem testar localmente seu site como se estivesse em produção.

Observações Importantes

• Conflito de porta: Caso a porta 8585 (ou escolhida) já esteja em uso, ao rodar npm run dev, ocorrerá erro. Escolha outra porta livre e ajuste também a configuração do proxy reverso no ServBay.
• Status do servidor web ServBay: O servidor web do ServBay (Caddy ou Nginx, conforme a configuração) deve estar ativo — caso contrário, o domínio local não responderá.
• Resolução de domínios: ServBay configura automaticamente domínios .servbay.demo adicionados na aba Sites para resolver localmente (127.0.0.1). Se utilizar outro domínio, pode ser necessário editar o arquivo hosts do sistema manualmente, ou usar o Hosts Manager do ServBay para garantir a resolução correta.

Conclusão

Com o ServBay, é fácil montar um ambiente local de desenvolvimento no macOS integrado ao Node.js e gerenciar, com praticidade, o ciclo de vida de projetos Vue.js em modo desenvolvimento e produção. Usando o recurso Sites, você rapidamente configura proxy reverso para o servidor de desenvolvimento ou serve arquivos estáticos do build de produção, sempre com domínios personalizados e SSL automático para mais segurança e praticidade. Isso simplifica bastante o processo de configuração e manutenção de projetos Vue.js localmente.