Como Criar e Executar um Projeto Nuxt.js com ServBay

O que é Nuxt.js?

Nuxt.js é um framework open-source baseado na popular biblioteca Vue.js, projetado para criar aplicações web modernas e de alta performance. Ele abstrai diversas configurações complexas, permitindo que o desenvolvedor foque no que realmente importa: a lógica do negócio. Nuxt.js é especialmente eficiente para aplicações que usam renderização do lado do servidor (SSR), mas também oferece poderosa capacidade de geração de sites estáticos (SSG), tornando-o ideal para a construção de 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): Pre-renderiza páginas Vue no servidor, acelerando o carregamento inicial, melhorando a experiência do usuário e facilitando a indexação de conteúdo pelos mecanismos de busca para melhores resultados de SEO.
• Geração de site estático (SSG): Gera arquivos HTML completamente estáticos durante a build. Isso proporciona desempenho excepcional, implantação simples e elimina a necessidade de recursos do servidor em tempo de execução—perfeito para blogs e portais cuja estrutura muda pouco.
• Divisão automática de código: O Nuxt.js separa o JavaScript conforme as rotas, carregando somente o necessário ao acessar cada página para melhor performance.
• Roteamento baseado em arquivos: Criando arquivos .vue dentro do diretório pages, você gera rotas automaticamente e simplifica o gerenciamento.
• Modularidade: Ecossistema robusto de módulos, facilitando a integração com diversos recursos e serviços de terceiros (como Axios, suporte PWA, CMS, etc.).
• Convenção sobre configuração: Seguindo algumas convenções de estrutura e nomeação, você reduz significativamente o tempo gasto com configurações manuais.
• Experiência otimizada para o desenvolvedor: Hot Module Replacement (HMR), relatórios de erro e outros recursos tornam o desenvolvimento mais rápido e eficiente.

Aproveitando todas essas vantagens, o Nuxt.js permite criar aplicações web poderosas, otimizadas, seguras e prontas para SEO de forma eficiente e produtiva.

Configurando e Executando Nuxt.js no ServBay

Neste guia, vamos mostrar como usar o ambiente de desenvolvimento local do ServBay—especialmente seu pacote Node.js e o gerenciador de sites—para criar, configurar e executar um projeto Nuxt.js. Vamos explicar como preparar o ambiente tanto para desenvolvimento (usando proxy reverso) quanto para produção (com serviço de arquivos estáticos).

Pré-requisitos

Antes de começar, verifique se você atende aos seguintes requisitos:

1. O aplicativo ServBay está instalado e funcionando.
2. O Node.js está instalado e habilitado no ServBay. Você pode verificar e instalar isso na aba “Pacotes” do painel ServBay.
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

Vamos utilizar o scaffolding create-nuxt-app para inicializar rapidamente um novo projeto Nuxt.js.

1. Abra o terminal e navegue até o diretório raiz de sites do ServBay

   O ServBay consta com um diretório raiz ideal para armazenar seus projetos de desenvolvimento local. Com o terminal aberto, execute:

   macOS:

   cd /Applications/ServBay/www

   Windows:

   cd C:\ServBay\www

2. Inicialize um novo projeto Nuxt.js

   Com o comando npx create-nuxt-app, inicialize o projeto chamado servbay-nuxt-app. O npx (presente no npm >5.2) permite rodar pacotes npm sem instalação global.

   npx create-nuxt-app servbay-nuxt-app

   Após rodar o comando, siga as instruções exibidas no terminal e faça as escolhas conforme sua necessidade. Exemplo de configuração:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Selecione seu gerenciador, geralmente Npm ou Yarn
   ? UI framework: None          # Escolha o framework de UI conforme necessidade
   ? Nuxt.js modules: Axios      # Selecione os módulos desejados
   ? Linting tools: ESLint       # Opte pelas ferramentas de linting caso queira
   ? Testing framework: None     # Defina um framework de teste se desejar
   ? Rendering mode: Universal (SSR / SSG) # Universal suporta SSR e SSG
   ? Deployment target: Server (Node.js hosting) # Server para desenvolvimento local e hospedagem Node.js
   ? Development tools: jsconfig.json (Recommended for VS Code) # Habilite conforme necessidade

3. Instale as dependências do projeto

   Vá para o diretório do projeto recém-criado e instale as dependências necessárias com o gerenciador de pacotes escolhido:

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

   Aguarde a conclusão da instalação.

Modificando o Conteúdo de Saída do Projeto

Para facilitar a verificação, vamos alterar o arquivo da página inicial e exibir um texto simples.

1. Abra o arquivo pages/index.vue

   Utilize o editor de código para abrir pages/index.vue na raiz do projeto.

2. Altere o conteúdo do arquivo

   Substitua o conteúdo por um código que exibe "Hello ServBay!":

   <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>

   O atributo scoped limita o estilo ao componente atual e o design foi levemente ajustado.

Rodando Nuxt.js em Modo de Desenvolvimento no ServBay

O servidor de desenvolvimento Nuxt.js geralmente roda em uma porta local específica. Para acessar via domínios personalizados, certificado SSL e a porta 80/443 do ServBay, configuraremos um proxy reverso usando a interface de sites do ServBay.

1. Inicie o servidor de desenvolvimento Nuxt.js

   No diretório raiz do projeto, rode o comando para subir o servidor de desenvolvimento Nuxt.js. Vamos utilizar a porta 8585 (pode ser outra não ocupada):

   macOS:

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

   Windows:

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

   O servidor aparecerá normalmente em http://localhost:8585. Mantenha o terminal aberto enquanto trabalhar.

2. Configurar site no ServBay (proxy reverso)

   Abra o painel do ServBay, acesse a aba “Sites” e clique no botão + no canto inferior esquerdo para adicionar uma nova configuração:

   • Nome: Escolha como Nuxt.js Dev Site (Proxy) ou algo identificável.
   • Domínio: Defina o domínio personalizado, exemplo: nuxt-dev.servbay.demo. O uso do sufixo .servbay.demo é recomendado como boa prática.
   • Tipo de site: Selecione Proxy reverso.
   • Endereço IP: Informe 127.0.0.1, o localhost.
   • Porta: Digite 8585, de acordo com o servidor Nuxt.js.

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

   Para mais detalhes sobre como adicionar um website Node.js em modo desenvolvimento (proxy reverso), consulte Como adicionar site Node.js no desenvolvimento.

3. Acesse o site no modo de desenvolvimento

   Abra o navegador e visite o domínio definido, por exemplo: https://nuxt-dev.servbay.demo.

   O ServBay irá redirecionar todo o tráfego para o servidor Nuxt.js via proxy reverso usando domínio customizado e HTTPS. O certificado SSL é gerado automaticamente (assinado pela CA do ServBay User, certifique-se de confiar nela no seu sistema). O uso de HTTPS em ambiente de desenvolvimento auxilia na simulação de produção, testes de Service Worker e outras funcionalidades que precisam de contexto seguro.

Construindo e Visualizando a Versão de Produção

Quando o desenvolvimento estiver concluído, é hora de criar a build de produção do seu projeto Nuxt.js. Para projetos em modo Universal que utilizam SSG, o comando nuxt generate (ou script npm run export) gera os arquivos estáticos.

1. Crie a build e gere os arquivos estáticos

   No diretório do projeto, execute:

   macOS:

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

   Windows:

   cd C:\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 conclusão, será criado o diretório dist com todos os arquivos estáticos gerados.

2. Configurar site no ServBay (arquivos estáticos)

   No painel do ServBay, quebre na aba “Sites” e clique no botão +:

   • Nome: Algo como Nuxt.js Prod Site (Static).
   • Domínio: Por exemplo, nuxt-prod.servbay.demo.
   • Tipo de site: Selecione Estático.
   • Diretório raiz: Caminho para os arquivos estáticos gerados:
     • macOS: /Applications/ServBay/www/servbay-nuxt-app/dist
     • Windows: C:\ServBay\www\servbay-nuxt-app\dist

   Salve as alterações para aplicar a configuração.

3. Acesse o site de produção

   Abra o navegador e acesse seu domínio de produção, ex: https://nuxt-prod.servbay.demo.

   O servidor web do ServBay (Caddy ou Nginx, conforme configuração) irá servir os arquivos estáticos do diretório dist de forma otimizada e com alto desempenho. Você também conta com suporte a SSL gratuito e domínios personalizados.

Conclusão

Com o ServBay, gerenciar ambientes locais de desenvolvimento e preview de projetos Nuxt.js se torna fácil e eficiente. Use o pacote Node.js do ServBay para rodar o servidor de desenvolvimento e, por meio do gerenciamento de sites, configure proxies reversos para trabalhar com domínios customizados e HTTPS. Após finalizar o desenvolvimento, gere a build estática e visualize com alta performance usando a configuração de site estático do ServBay. Esse fluxo aproveita a praticidade e os recursos avançados do ServBay, simplificando todo o processo de desenvolvimento e testes locais de projetos front-end. Esperamos que este guia ajude você a potencializar o uso do ServBay com Nuxt.js!