Criando e Executando Projetos Vue.js com ServBay

Vue.js é um dos frameworks JavaScript progressivos mais populares para construção de interfaces de usuário. É fácil de aprender, flexível e possui alto desempenho, sendo especialmente indicado para criação de aplicações de página única (SPA). O ServBay é um poderoso ambiente de desenvolvimento web local que oferece suporte facilitado ao Node.js, disponível nas plataformas macOS e Windows, tornando-se uma escolha ideal para desenvolvimento com Vue.js.

Este guia detalha como aproveitar o ambiente integrado do ServBay para criar um projeto Vue.js do zero, acessar em modo de desenvolvimento e produção via ServBay.

O que é Vue.js?

Vue.js é um framework progressivo JavaScript voltado para a construção de interfaces de usuário. Diferente de outros frameworks robustos, o Vue tem uma abordagem incremental, permitindo que você utilize apenas sua biblioteca central para lidar com o layer de visualização. É fácil de integrar com outras bibliotecas ou projetos existentes. Vue 3 é a versão mais recente, trazendo diversas melhorias como desempenho superior, pacote menor e suporte aprimorado ao TypeScript.

Principais funcionalidades e vantagens do Vue 3

• API de Composição (Composition API): Permite organizar o código de componentes grandes de forma mais reutilizável e manutenível, utilizando funções de composição.
• Desempenho otimizado: Vue 3 utiliza Proxies para o sistema reativo e possui algoritmo de virtual DOM melhorado, tornando-o significativamente mais rápido.
• Pacote menor: Por meio do tree-shaking, o núcleo do Vue 3 é mais leve, garantindo carregamento mais rápido.
• Suporte avançado ao TypeScript: Oferece tipagens robustas, facilitando o desenvolvimento com TypeScript.
• Ciclo de vida dos componentes aprimorado: Novos hooks de ciclo de vida e a função Setup tornam o gerenciamento da lógica de componentes mais simples e claro.

Utilizar o Vue 3 possibilita criar aplicações web modernas, rápidas e responsivas de forma eficiente.

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

Neste tutorial, vamos usar o ambiente Node.js fornecido pelo ServBay para criar e rodar um projeto Vue.js, configurando o servidor web pelo recurso de Sites e disponibilizando o projeto localmente via proxy reverso e serviço de arquivos estáticos.

Pré-requisitos

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

1. Instalação do ServBay: O ambiente de desenvolvimento ServBay já está instalado em seu computador.
2. Instalação do pacote Node.js: O Node.js já foi instalado utilizando o gerenciador de pacotes do ServBay. Veja o passo a passo em Como instalar e usar Node.js no ServBay.

Criando um Projeto Vue.js

1. Inicializando o projeto

   Abra o terminal do seu sistema. Recomenda-se usar o diretório padrão sugerido pelo ServBay para os projetos de site. Acesse este diretório e utilize o comando npm create vue@latest para iniciar um novo projeto Vue.js. O parâmetro @latest garante que a ferramenta mais recente (Vue CLI ou create-vue) seja usada, criando normalmente um projeto Vue 3.

   macOS:

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

   Windows:

   cd C:\ServBay\www
   npm create vue@latest

   Siga as instruções do terminal para definir o nome do projeto (sugestão: servbay-vue-app) e escolher opções como TypeScript, Vue Router, Pinia etc. Exemplo de configuração sugerida:

   ✔ Nome do projeto: … servbay-vue-app
   ✔ Adicionar TypeScript? … No # Escolha Yes se quiser usar TypeScript
   ✔ Adicionar suporte a JSX? … No # Escolha Yes se quiser JSX
   ✔ Adicionar Vue Router para SPA? … Yes # Recomenda-se Yes
   ✔ Adicionar Pinia para gerenciamento de estado? … No # Escolha Yes se quiser
   ✔ Adicionar Vitest para testes unitários? … No # Escolha Yes se desejar
   ✔ Adicionar solução para testes end-to-end? … No # Opcional
   ✔ Adicionar ESLint para qualidade do código? … Yes # Recomenda-se Yes
   ✔ Adicionar Prettier para formatação? … Yes # Recomenda-se Yes
   ✔ Adicionar extensão Vue DevTools 7 para debug? (experimental) … No # Opcional

2. Instalando dependências

   Após a inicialização, acesse o diretório do novo projeto servbay-vue-app e execute npm install para baixar todas as dependências necessárias.

   cd servbay-vue-app
   npm install

Alterando o conteúdo de exemplo (opcional)

Para verificar que tudo está funcionando corretamente, edite o arquivo src/App.vue do projeto e substitua o conteúdo padrão por uma mensagem simples como "Hello ServBay!".

Abra src/App.vue e insira o seguinte conteúdo:

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>Este é um app Vue.js rodando no 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 ambiente de desenvolvimento (com proxy reverso)

Em modo de desenvolvimento, o Vue geralmente inicia um servidor local (geralmente Vite ou Webpack), oferecendo recarga automática (HMR) e outras funcionalidades úteis para desenvolvedores. Com ServBay, você pode usar proxy reverso para associar um domínio local ao endereço e porta desse servidor de desenvolvimento.

1. Iniciar o servidor de desenvolvimento

   No diretório raíz do projeto, execute o comando abaixo para subir o servidor de desenvolvimento. Use a flag --port para definir uma porta disponível (exemplo: 8585).

   npm run dev -- --port 8585

   O terminal mostrará que o servidor está ativo na porta indicada, como http://localhost:8585.

2. Configurando proxy reverso no ServBay

   Abra a interface do ServBay, vá até o menu Sites e adicione uma nova configuração. Escolha o tipo Proxy Reverso:

   • Nome: My first Vue dev site (ou qualquer nome identificável)
   • Domínio: servbay-vue-dev.servbay.demo (ou outro domínio .servbay.demo à sua escolha)
   • Tipo de site: Proxy reverso
   • IP de destino do proxy: 127.0.0.1
   • Porta de destino do proxy: 8585 (deve ser igual à usada pelo servidor dev)

   Após salvar, ServBay atualiza automaticamente a configuração do servidor web (Caddy ou Nginx), direcionando os acessos a servbay-vue-dev.servbay.demo para http://127.0.0.1:8585.

   Para detalhes sobre essa configuração, veja Adicionando site Node.js de desenvolvimento no ServBay.

3. Acessando o ambiente de desenvolvimento

   Confirme que o servidor web do ServBay está rodando. Acesse pelo navegador o domínio configurado https://servbay-vue-dev.servbay.demo.

   O ServBay configura SSL automaticamente para seus domínios locais (com User CA ou Public CA), tornando possível acessar via HTTPS e simulando um ambiente próximo ao de produção. Para detalhes sobre SSL, consulte Configurando certificado SSL no ServBay.

   Agora, você deve visualizar sua aplicação Vue em modo de desenvolvimento, aproveitando recarga automática sempre que o código for alterado.

Build de produção e deploy (serviço de site estático)

Ao finalizar o desenvolvimento, é hora de gerar a versão otimizada para produção do seu projeto Vue.js. Os arquivos finais (HTML, CSS, JS) podem ser facilmente servidos pelo recurso estático do ServBay.

1. Gerando a build de produção

   Na raíz do projeto, execute:

   npm run build

   O processo gera os arquivos otimizados no diretório dist do projeto.

2. Configurando serviço estático de arquivos

   Vá ao menu Sites no ServBay, adicione uma nova configuração de site, escolhendo Estático:

   • Nome: My first Vue production site (ou outro nome fácil de identificar)
   • Domínio: servbay-vue-prod.servbay.demo (ou outro domínio .servbay.demo)
   • Tipo de site: Estático
   • Diretório raiz do site: Caminho absoluto para o diretório dist do projeto:
     • macOS: /Applications/ServBay/www/servbay-vue-app/dist
     • Windows: C:\ServBay\www\servbay-vue-app\dist

   Após salvar, ServBay configura o servidor web para servir diretamente os arquivos desse diretório.

3. Acessando a versão de produção

   Confirme que o servidor web está ativo. No navegador, acesse https://servbay-vue-prod.servbay.demo.

   Agora você está vendo a versão otimizada da sua aplicação Vue, com carregamento rápido e ótima performance. Com domínio personalizado e SSL automático do ServBay, você pode testar seu site em um ambiente seguro e realista.

Observações

• Conflito de portas: Se a porta 8585 escolhida para o servidor de desenvolvimento já estiver ocupada, o comando falhará. Escolha uma porta livre e atualize também a configuração do proxy reverso no ServBay.
• Servidor web do ServBay: Certifique-se de que o servidor (Caddy ou Nginx, de acordo com a configuração do ServBay) está rodando para acessar seus sites pelos domínios configurados.
• Resolução de domínios: O ServBay configura automaticamente o domínio .servbay.demo para ser resolvido localmente (127.0.0.1). Se optar por outro domínio, pode ser necessário alterar manualmente o arquivo hosts do sistema ou usar recurso Hosts Manager do ServBay para garantir resolução correta.

Conclusão

Com ServBay, é simples montar um ambiente de desenvolvimento Node.js local no macOS ou Windows, gerenciando de maneira prática tanto o desenvolvimento quanto o deploy de projetos Vue.js. O recurso Sites do ServBay facilita a configuração de proxy reverso para acessar o servidor de desenvolvimento ou o serviço direto de arquivos estáticos para produção, além de oferecer domínios personalizados e certificados SSL automáticos para segurança e praticidade, simplificando seu fluxo de trabalho com projetos Vue.js locais.