Criando e Executando um Projeto Nuxt.js com o ServBay

O que é o Nuxt.js?

Nuxt.js é um framework open-source baseado no popular Vue.js, projetado especialmente para criar aplicações web modernas e de alta performance. Ele abstrai grande parte das configurações complexas, permitindo que os desenvolvedores foquem mais na lógica de negócio. O Nuxt.js é especialmente eficaz para a construção de aplicações com renderização do lado do servidor (SSR), mas também oferece poderosas capacidades de geração de sites estáticos (SSG), tornando-o a escolha ideal para construir sites e apps ricos em conteúdo e otimizados para SEO.

Principais características e vantagens do Nuxt.js

• Renderização do lado do servidor (SSR): Renderiza antecipadamente as páginas Vue no servidor, melhorando o tempo de carregamento inicial, a experiência do usuário e a indexação de conteúdo pelos motores de busca — benefícios importantes para SEO.
• Geração de site estático (SSG): Gera arquivos HTML totalmente estáticos durante a build. Esse método oferece desempenho superior e implantação simples, sem necessidade de servidor no runtime, ideal para sites cujo conteúdo muda pouco, como blogs e documentação.
• Divisão automática de código: O Nuxt.js divide automaticamente o JavaScript por rotas, de modo que o usuário carrega apenas o necessário para cada página, otimizando consideravelmente a performance do app.
• Roteamento baseado em sistema de arquivos: Basta criar arquivos .vue dentro da pasta pages para gerar rotas automaticamente, simplificando muito a gestão de roteamento.
• Modularidade: Ecossistema de módulos robusto para integrar facilmente funcionalidades e serviços de terceiros (como Axios, suporte PWA, CMS, etc.).
• Convenções ao invés de configuração: Segue estruturas e nomes de pastas convencionados, reduzindo a necessidade de configurações detalhadas e repetitivas.
• Experiência de desenvolvimento aprimorada: Hot Module Reload (HMR), relatórios de erro e outras funcionalidades que aumentam a produtividade do desenvolvedor.

Com esses recursos, o Nuxt.js torna a construção de aplicações web complexas, rápidas e SEO-friendly muito mais eficiente e prática.

Configurando e executando projetos Nuxt.js no ServBay

Este guia mostra como utilizar o ambiente de desenvolvimento local avançado do ServBay — especialmente o pacote Node.js e a funcionalidade de gerenciamento de sites — para criar, configurar e executar um projeto Nuxt.js. Abordaremos tanto a configuração em modo de desenvolvimento (com proxy reverso) quanto em modo de produção (serviço de arquivos estáticos).

Pré-requisitos

Antes de começar, garanta que você possui:

1. ServBay já instalado no seu sistema.
2. O pacote Node.js instalado e habilitado no ServBay. Basta acessar a aba "Pacotes" no painel do ServBay para verificar e instalar.
3. Conhecimentos básicos em Node.js, npm (ou Yarn/pnpm) e comandos de terminal.
4. (Recomendado) Um editor de código, como o VS Code.

Criando um projeto Nuxt.js

Usaremos o utilitário create-nuxt-app para inicializar rapidamente um projeto Nuxt.js.

1. Abra o terminal e acesse o diretório raiz de sites do ServBay

   O diretório padrão é /Applications/ServBay/www. Recomenda-se armazenar seus projetos locais aqui. No terminal, execute:

   cd /Applications/ServBay/www

2. Inicialize um novo projeto Nuxt.js

   Use o npx create-nuxt-app para criar um novo projeto chamado servbay-nuxt-app. O npx (incluído a partir do npm 5.2+) permite rodar utilitários sem precisar instalar globalmente.

   npx create-nuxt-app servbay-nuxt-app

   Siga as instruções interativas no terminal para configurar o projeto. Um exemplo de configuração:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Escolha o gerenciador de pacotes, recomendado Npm ou Yarn
   ? UI framework: None           # Escolha conforme desejar
   ? Nuxt.js modules: Axios       # Caso necessário
   ? Linting tools: ESLint        # Opcional
   ? Testing framework: None      # Opcional
   ? Rendering mode: Universal (SSR / SSG) # Modo recomendado
   ? Deployment target: Server (Node.js hosting) # Ideal para desenvolvimento local
   ? Development tools: jsconfig.json (Recommended for VS Code) # Conforme desejar

3. Instale as dependências do projeto

   Entre na pasta do projeto e instale as dependências usando o gerenciador escolhido:

   cd servbay-nuxt-app
   npm install
   # Ou: yarn install
   # Ou: pnpm install

   Aguarde o término da instalação.

Modificando o conteúdo da página inicial

Para checar rapidamente o funcionamento, vamos editar a página inicial para exibir um texto simples.

1. Abra o arquivo pages/index.vue

   No editor de código, abra o arquivo pages/index.vue no seu projeto.

2. Altere o conteúdo do arquivo

   Substitua o conteúdo por:

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style scoped>
   div {
     text-align: center;
     margin-top: 50px;
     font-family: sans-serif;
   }
   h1 {
     color: #333;
   }
   </style>

   Aqui, adicionamos o atributo scoped à tag style, restringindo os estilos ao componente, e aplicamos uma simples estilização.

Rodando o modo de desenvolvimento no ServBay

O servidor de desenvolvimento do Nuxt.js normalmente roda em uma porta local específica. Para acessá-lo por domínio personalizado, com SSL e usando as portas 80/443 através do ServBay, vamos configurar um proxy reverso.

1. Inicialize o servidor de desenvolvimento do Nuxt.js

   Execute na raiz do projeto (use a porta 8585 ou uma disponível):

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run dev -- --port 8585
   # Ou: yarn dev --port 8585
   # Ou: pnpm run dev --port 8585

   O servidor estará acessível em http://localhost:8585. Deixe este terminal aberto para manter o servidor rodando.

2. Configure o site no ServBay (Proxy Reverso)

   No painel do ServBay, vá até a aba "Sites" e clique no botão + para adicionar uma nova configuração:

   • Nome (Name): Um nome descritivo, como Nuxt.js Dev Site (Proxy).
   • Domínio (Domain): O domínio desejado, como nuxt-dev.servbay.demo. Recomenda-se o sufixo .servbay.demo como padrão da marca ServBay.
   • Tipo de Site (Website Type): Selecione Proxy Reverso (Reverse Proxy).
   • Endereço IP (IP Address): 127.0.0.1 (localhost).
   • Porta (Port): A porta escolhida no passo anterior, por exemplo 8585.

   Salve a configuração. O ServBay atualizará e aplicará automaticamente.

   Para detalhes completos sobre como adicionar um site Node.js de desenvolvimento (proxy reverso), consulte Adicionando site Node.js de desenvolvimento.

3. Acesse o site do modo de desenvolvimento

   Abra o navegador e visite o domínio configurado (exemplo: https://nuxt-dev.servbay.demo).

   Com o proxy reverso do ServBay, você pode acessar seu servidor Nuxt.js de desenvolvimento por domínio personalizado e HTTPS. O ServBay gera e configura automaticamente um certificado SSL (assinado pela ServBay User CA — certifique-se que seu sistema reconhece essa CA), assim, até mesmo em ambiente de desenvolvimento, você terá HTTPS, útil para simular produção, testar Service Workers ou funcionalidades que exigem contexto seguro.

Gerando e rodando a versão de produção

Quando o projeto Nuxt.js estiver finalizado para deployment (ou para preview local do ambiente de produção), você pode gerar a build de produção. Em projetos no modo Universal e que desejam site estático, normalmente executa-se o nuxt generate (ou npm run export).

1. Build de produção e geração dos arquivos estáticos

   No terminal, na raiz do projeto, execute:

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run build
   npm run export
   # Ou: yarn build && yarn export
   # Ou: pnpm build && pnpm run export

   Após a build, será criada uma pasta dist no projeto com os arquivos estáticos gerados.

2. Configure o site no ServBay (Site Estático)

   No painel do ServBay, aba "Sites", clique no + para adicionar nova configuração:

   • Nome (Name): Por exemplo, Nuxt.js Prod Site (Static).
   • Domínio (Domain): Algo como nuxt-prod.servbay.demo.
   • Tipo de Site (Website Type): Selecione Estático (Static).
   • Raiz do Site (Website Root): Aponte para a pasta dos arquivos estáticos gerados, por exemplo /Applications/ServBay/www/servbay-nuxt-app/dist.

   Salve a configuração. O ServBay aplicará as mudanças automaticamente.

3. Acesse o site do modo de produção

   No navegador, visite o domínio configurado, como https://nuxt-prod.servbay.demo.

   O servidor web de alta performance do ServBay (Caddy ou Nginx, dependendo da configuração) servirá diretamente o conteúdo estático da pasta dist. Essa é a maneira mais eficiente de entregar sites estáticos, garantindo carregamento ultra rápido. O ServBay fornece SSL gratuito e suporte a domínios personalizados de forma nativa.

Conclusão

O ServBay facilita enormemente a gestão dos ambientes locais de desenvolvimento e pré-visualização de projetos Nuxt.js. Execute o servidor de desenvolvimento com o pacote Node.js do ServBay e configure facilmente domínios personalizados e proxy reverso para experiências reais em HTTPs. Após finalizar o desenvolvimento, basta gerar os arquivos estáticos e usar o modo de sites estáticos do ServBay para prévias locais de alta performance. Essa metodologia potencializa a praticidade e recursos do ServBay, tornando muito mais simples o desenvolvimento e testes de projetos frontend modernos. Esperamos que este guia ajude você a tirar o máximo proveito do ServBay no seu fluxo de trabalho com Nuxt.js!