Crear y ejecutar un proyecto Nuxt.js con ServBay

¿Qué es Nuxt.js?

Nuxt.js es un framework de código abierto construido sobre el popular Vue.js, diseñado especialmente para crear aplicaciones web modernas y de alto rendimiento. Abstrae muchas configuraciones complejas, permitiendo a los desarrolladores enfocarse más en la lógica de negocio. Nuxt.js destaca especialmente en la construcción de aplicaciones renderizadas del lado del servidor (SSR), pero también proporciona potentes capacidades de generación de sitios estáticos (SSG), lo que lo convierte en una opción ideal para crear sitios ricos en contenido y optimizados para SEO.

Características principales y ventajas de Nuxt.js

• Renderizado del lado del servidor (SSR): Pre-renderiza las páginas de Vue en el servidor, mejorando la velocidad de carga inicial, la experiencia de usuario y permite que los motores de búsqueda indexen mejor el contenido, lo que favorece el SEO.
• Generación de sitios estáticos (SSG): Genera archivos HTML completamente estáticos durante el proceso de compilación. Este enfoque ofrece un rendimiento excepcional, es fácil de desplegar y no requiere recursos de servidor en tiempo de ejecución, siendo ideal para sitios cuyo contenido cambia poco, como blogs o documentación.
• División automática de código: Nuxt.js divide automáticamente el código JavaScript según las rutas, cargando solo lo necesario cuando el usuario accede a una página, optimizando significativamente el rendimiento de la aplicación.
• Enrutamiento basado en sistema de archivos: Configura las rutas automáticamente con solo crear archivos .vue en el directorio pages, simplificando enormemente la gestión de rutas.
• Modularidad: Ecosistema de módulos robusto que facilita la integración de funcionalidades y servicios de terceros (como Axios, soporte PWA, integración de CMS, etc.).
• Convención sobre configuración: Respeta una estructura y convenciones de nombre predefinidas, reduciendo la configuración manual y repetitiva.
• Mejor experiencia de desarrollo: Incluye recarga en caliente (HMR), reporte de errores y otras herramientas que mejoran la productividad.

Gracias a estas características, Nuxt.js permite crear aplicaciones web complejas, de alto rendimiento y amigables para SEO de una manera eficiente y fácil.

Configuración y ejecución de proyectos Nuxt.js en ServBay

Esta guía muestra cómo aprovechar el potente entorno local de desarrollo de ServBay, especialmente su paquete de Node.js y la gestión de sitios web, para crear, configurar y ejecutar un proyecto Nuxt.js. Cubriremos tanto la configuración del modo desarrollo (utilizando proxy inverso) como del modo producción (sirviendo archivos estáticos).

Requisitos previos

Antes de comenzar, asegúrate de cumplir con los siguientes requisitos:

1. Haber instalado correctamente la aplicación ServBay.
2. Tener instalado y habilitado el paquete Node.js en ServBay. Puedes revisarlo e instalarlo desde la pestaña "Paquetes" en el panel de control de ServBay.
3. Conocimientos básicos de Node.js, npm (o Yarn/pnpm) y uso de la terminal.
4. (Opcional, pero recomendado) Tener un editor de código, como VS Code.

Crear un proyecto Nuxt.js

Vamos a usar el generador create-nuxt-app para inicializar rápidamente un proyecto Nuxt.js.

1. Abre la terminal y accede a la raíz de sitios web de ServBay

   La ruta predeterminada para sitios locales en ServBay es /Applications/ServBay/www. Este es el lugar recomendado para tus proyectos de desarrollo. Abre la terminal y ejecuta:

   cd /Applications/ServBay/www

2. Inicializa un nuevo proyecto Nuxt.js

   Utiliza el comando npx create-nuxt-app para crear un proyecto llamado servbay-nuxt-app. npx viene incluido a partir de npm 5.2+ y permite ejecutar paquetes sin instalarlos globalmente.

   npx create-nuxt-app servbay-nuxt-app

   Sigue las indicaciones en la terminal para completar la configuración. Elige las opciones según tus necesidades. Ejemplo de configuración:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Elije tu gestor de paquetes, se recomienda Npm o Yarn
   ? UI framework: None          # Selecciona un framework UI si lo necesitas
   ? Nuxt.js modules: Axios      # Selecciona los módulos Nuxt.js que desees
   ? Linting tools: ESLint       # Selecciona las herramientas de linting que prefieras
   ? Testing framework: None     # Escoge framework de pruebas si lo necesitas
   ? Rendering mode: Universal (SSR / SSG) # Define el modo de renderizado, Universal soporta SSR y SSG
   ? Deployment target: Server (Node.js hosting) # Define el objetivo de despliegue, 'Server' sirve para desarrollo local y servidores Node.js
   ? Development tools: jsconfig.json (Recommended for VS Code) # Elige herramientas recomendadas para desarrollo

3. Instala las dependencias del proyecto

   Accede al directorio recién creado e instala las dependencias seleccionadas con tu gestor de paquetes:

   cd servbay-nuxt-app
   npm install
   # O bien con Yarn: yarn install
   # O con pnpm: pnpm install

   Espera a que terminen de instalarse todas las dependencias.

Modificar el contenido de la página de inicio

Para comprobar el proyecto fácilmente, vamos a editar la página principal para mostrar un mensaje simple.

1. Abre el archivo pages/index.vue

   Abre este archivo en el editor de código dentro del directorio raíz de tu proyecto.

2. Modifica el contenido

   Sustituye el contenido por el siguiente código para mostrar "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>

   Se ha añadido el atributo scoped al bloque de estilos para que solo apliquen a este componente, y se ha mejorado ligeramente el diseño.

Ejecutar el modo desarrollo en ServBay

El servidor de desarrollo de Nuxt.js suele funcionar en un puerto local concreto. Para acceder a él mediante tu dominio personalizado, certificados SSL y los puertos 80/443 gestionados por ServBay, utilizaremos la función de sitio web con proxy inverso.

1. Inicia el servidor de desarrollo de Nuxt.js

   Desde la raíz del proyecto, ejecuta el siguiente comando. Usamos el puerto 8585, pero puedes elegir otro disponible.

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

   Tras iniciar el servidor, normalmente estará disponible en http://localhost:8585. Mantén esta ventana de terminal abierta mientras lo utilices.

2. Configura un sitio en ServBay (proxy inverso)

   Abre el panel de control de ServBay y ve a la pestaña "Sitios web". Haz clic en el botón + (abajo a la izquierda) para agregar una nueva configuración:

   • Nombre: Escribe un nombre descriptivo, como Nuxt.js Dev Site (Proxy).
   • Dominio: Elige el dominio personalizado con el que lo accederás, por ejemplo nuxt-dev.servbay.demo. Utilizar el sufijo .servbay.demo es una buena práctica de branding para ServBay.
   • Tipo de sitio: Selecciona Proxy inverso (Reverse Proxy).
   • Dirección IP: Indica 127.0.0.1 (localhost).
   • Puerto: Introduce el puerto en el que corre el servidor de desarrollo de Nuxt.js (en este ejemplo, 8585).

   Guarda la configuración. ServBay se encargará de actualizar y aplicar los cambios automáticamente.

   Para instrucciones más detalladas sobre crear un sitio de desarrollo Node.js (proxy inverso) en ServBay, consulta Agregar un sitio de desarrollo Node.js.

3. Accede al sitio web en modo desarrollo

   Abre tu navegador y visita el dominio que configuraste, por ejemplo https://nuxt-dev.servbay.demo.

   Gracias al proxy inverso de ServBay, accederás directamente al servidor de desarrollo de Nuxt.js usando el dominio personalizado y HTTPS. ServBay generará y configurará automáticamente un certificado SSL (emitido por ServBay User CA, asegúrate de que tu sistema confía en esta CA), lo que te permite probar en un entorno seguro, simular condiciones de producción, probar Service Workers o cualquier funcionalidad que requiera contexto seguro.

Compilar y ejecutar la versión de producción

Cuando el desarrollo del proyecto Nuxt.js esté listo para su despliegue (o si deseas previsualizarlo en modo producción localmente), puedes construir la versión de producción. Para proyectos en modo Universal interesados en generar sitios estáticos, normalmente se usa nuxt generate (o el script npm run export).

1. Contruir la versión de producción y generar los archivos estáticos

   Desde la raíz del proyecto, ejecuta estos comandos. npm run build compila el código y npm run export genera los archivos estáticos HTML en el directorio dist (por defecto).

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

   Al finalizar, verás la carpeta dist en el directorio del proyecto con todos los archivos generados.

2. Configuración de sitio en ServBay (archivos estáticos)

   Abre el panel ServBay, ve a la pestaña "Sitios web" y haz clic en el botón + para agregar otro sitio:

   • Nombre: Ponle un nombre descriptivo, ej. Nuxt.js Prod Site (Static).
   • Dominio: Introduce el dominio personalizado para la versión de producción, por ejemplo nuxt-prod.servbay.demo.
   • Tipo de sitio: Selecciona Estático (Static).
   • Raíz del sitio: Introduce la ruta al directorio de archivos estáticos generados, normalmente /Applications/ServBay/www/servbay-nuxt-app/dist.

   Guarda y aplica la configuración. ServBay gestionará todos los cambios.

3. Accede al sitio web de producción

   Abre tu navegador y dirígete al dominio configurado, por ejemplo https://nuxt-prod.servbay.demo.

   El servidor web de alto rendimiento de ServBay (Caddy o Nginx según tu configuración) servirá directamente los archivos estáticos de dist. Es la forma más eficiente de entregar contenido estático y garantizar tiempos de carga ultrarrápidos. Además, contarás con certificado SSL gratuito y soporte de dominios personalizados manejado por ServBay.

Resumen

Con ServBay puedes gestionar fácilmente el entorno local de desarrollo y previsualización de tus proyectos Nuxt.js. Utiliza el paquete Node.js de ServBay para el servidor de desarrollo y configura proxies inversos desde la función de sitios web de ServBay para depurar tus apps desde dominios personalizados y con HTTPS. Al finalizar el desarrollo, compila el proyecto y genera los archivos estáticos, que podrás previsualizar de forma óptima usando el tipo de sitio web estático de ServBay. Este flujo de trabajo aprovecha al máximo la funcionalidad y conveniencia de ServBay, simplificando el desarrollo y testeo local de tus proyectos frontend. ¡Esperamos que esta guía te ayude a sacar el máximo provecho a ServBay en tu desarrollo Nuxt.js!