ServBay

Español

English
简体中文
繁體中文
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Español

English
简体中文
繁體中文
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Appearance

Crear y ejecutar un proyecto Nuxt.js con ServBay ​

¿Qué es Nuxt.js? ​

Nuxt.js es un framework open source construido sobre Vue.js, diseñado especialmente para crear aplicaciones web modernas y de alto rendimiento. Abstrae gran parte de la complejidad de la configuración inicial, permitiendo a los desarrolladores centrarse más en la lógica de negocio. Nuxt.js destaca en la construcción de aplicaciones con renderizado del lado del servidor (SSR), pero también ofrece potentes capacidades para generar sitios estáticos (SSG). Esto lo convierte en una excelente opción para construir sitios y aplicaciones ricos en contenido y optimizados para SEO.

Principales características y ventajas de Nuxt.js ​

  • Renderizado del lado del servidor (SSR): Pre-renderiza páginas Vue en el servidor, acelerando la carga inicial, mejorando la experiencia de usuario y facilitando la indexación de contenido por los motores de búsqueda, lo que resulta beneficioso para el SEO.
  • Generación de sitios estáticos (SSG): Genera archivos HTML completamente estáticos durante el build, ideal para sitios cuyos contenidos no cambian frecuentemente, como blogs o documentación. Esta modalidad ofrece ultra rendimiento y despliegue sencillo, sin coste de servidor en tiempo de ejecución.
  • División automática de código: Nuxt.js divide el código JavaScript según las rutas de la app, cargando solo lo necesario en cada página, y así optimizando el rendimiento.
  • Ruteo basado en sistema de archivos: Solo debes crear archivos .vue en la carpeta pages para que Nuxt.js genere automáticamente la configuración de rutas, simplificando mucho la gestión del ruteo.
  • Modularidad: Ecosistema sólido de módulos para integrar funcionalidades y servicios de terceros como Axios, soporte para PWA, integración con sistemas de gestión de contenido, entre otros.
  • Convención sobre configuración: Siguiendo estructuras de carpetas y normas de nomenclatura predefinidas, se reduce la necesidad de configuraciones manuales tediosas.
  • Experiencia de desarrollo optimizada: Incluye hot module replacement (HMR), reporte de errores y más herramientas que mejoran la productividad.

Gracias a estas características, Nuxt.js agiliza y facilita la construcción de aplicaciones web complejas, rápidas y amigables para SEO.

Configurar y ejecutar un proyecto Nuxt.js en ServBay ​

Esta guía explica cómo aprovechar el potente entorno de desarrollo local de ServBay, en particular su paquete Node.js y herramientas de gestión de sitios web, para crear, configurar y ejecutar un proyecto Nuxt.js. Verás cómo establecer modo desarrollo (usando proxy inverso) y modo producción (usando servicio de archivos estáticos) dentro de ServBay.

Requisitos previos ​

Antes de comenzar, asegúrate de cumplir con lo siguiente:

  1. ServBay está instalado correctamente en tu computadora.
  2. El paquete Node.js está instalado y activo en ServBay. Puedes revisarlo e instalarlo desde la pestaña "Paquetes" del panel de control de ServBay.
  3. Conoces lo básico de Node.js, npm (o Yarn/pnpm) y comandos terminal.
  4. (Recomendado) Cuentas con un editor de código como VS Code.

Crear un proyecto Nuxt.js ​

Usaremos el CLI de create-nuxt-app para iniciar rápidamente un proyecto Nuxt.js.

  1. Abre la terminal y navega a la carpeta raíz de sitios de ServBay

    La carpeta raíz de sitios de ServBay es ideal para alojar tus proyectos locales de desarrollo. Abre la terminal y ejecuta uno de los siguientes comandos para acceder:

    macOS:

    bash
    cd /Applications/ServBay/www

    Windows:

    bash
    cd C:\ServBay\www

  2. Inicializa un nuevo proyecto Nuxt.js

    Utiliza el comando npx create-nuxt-app para crear un nuevo proyecto llamado servbay-nuxt-app. npx viene con npm 5.2+ y permite ejecutar comandos de paquetes sin instalación global.

    bash
    npx create-nuxt-app servbay-nuxt-app

    Al ejecutarlo, sigue las preguntas y selecciona las opciones que prefieras. Ejemplo de configuración:

    bash
    ? Project name: servbay-nuxt-app
? Programming language: JavaScript
? Package manager: Npm         # Elige tu gestor de paquetes, se recomienda Npm o Yarn
? UI framework: None          # Selecciona framework UI si lo necesitas
? Nuxt.js modules: Axios      # Elige los módulos Nuxt.js según lo que requieras
? Linting tools: ESLint       # Selecciona herramienta de validación de código si lo deseas
? Testing framework: None     # Elige framework de testing si lo necesitas
? Rendering mode: Universal (SSR / SSG) # Universal soporta SSR y SSG
? Deployment target: Server (Node.js hosting) # Para desarrollos locales y despliegue en servidores Node.js
? Development tools: jsconfig.json (Recommended for VS Code) # Elige configuración para herramientas de desarrollo

  3. Instala las dependencias del proyecto

    Entra al directorio del proyecto recién creado e instala sus dependencias usando el gestor elegido:

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

    Espera a que termine la instalación.

Modificar el contenido que se muestra en el proyecto ​

Para verificar la configuración, cambiaremos el contenido de la página de inicio para mostrar texto sencillo.

  1. Abre el archivo pages/index.vue

    Accede con tu editor de código al archivo pages/index.vue en el directorio del proyecto.

  2. Modifica el contenido del archivo

    Reemplaza el contenido por el siguiente código para mostrar "Hello ServBay!" en la página:

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

    Aquí hemos añadido el atributo scoped al tag de estilos para limitar la aplicación de los estilos a este componente y mejorar un poco su apariencia.

Ejecutar el proyecto en modo desarrollo con ServBay ​

El servidor de desarrollo de Nuxt.js funciona normalmente en un puerto local específico. Para poder acceder fácilmente a través de los dominios personalizados, certificados SSL y puertos 80/443 gestionados por ServBay, utilizaremos la función de proxy inverso en su configuración de sitios web.

  1. Inicia el servidor de desarrollo de Nuxt.js

    Desde la raíz del proyecto, corre el siguiente comando para iniciar el servidor en el puerto 8585 (puedes elegir cualquier puerto libre):

    macOS:

    bash
    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

    Windows:

    bash
    cd C:\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

    Al arrancar, el servidor normalmente se muestra en http://localhost:8585. No cierres la terminal para que el servidor siga funcionando.

  2. Configura el sitio en ServBay (proxy inverso)

    Accede al panel de control de ServBay y ve a la pestaña "Sitios web". Haz clic en el botón + en la parte inferior izquierda para agregar una nueva configuración:

    • Nombre (Name): Por ejemplo, Nuxt.js Dev Site (Proxy).
    • Dominio (Domain): El dominio personalizado para tu acceso, por ejemplo nuxt-dev.servbay.demo. Usar el sufijo .servbay.demo es una buena práctica que respalda la marca ServBay.
    • Tipo de sitio web (Website Type): Selecciona Proxy inverso (Reverse Proxy).
    • Dirección IP (IP Address): Pon 127.0.0.1 (loopback local).
    • Puerto (Port): El puerto en el que arrancaste el servidor, por ejemplo 8585.

    Tras configurar estos datos, haz clic en “Agregar” o “Guardar”. ServBay actualizará automáticamente el sitio.

    Para detalles avanzados sobre cómo agregar un sitio Node.js de desarrollo en ServBay (usando proxy inverso), consulta Agregar un sitio web de desarrollo Node.js.

  3. Accede al sitio de desarrollo

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

    Usando el proxy inverso de ServBay, puedes acceder a tu servidor Nuxt.js de desarrollo directamente desde el dominio personalizado y el puerto HTTPS. ServBay genera y configura de manera automática el certificado SSL (firmado por ServBay User CA; asegúrate de confiar en esta CA en tu sistema), permitiendo pruebas seguras, simulación del entorno productivo o desarrollo de funciones que requieren contexto seguro como Service Workers.

Construir y ejecutar la versión de producción ​

Cuando tu proyecto esté listo para su despliegue o desees previsualizar la versión de producción localmente, puedes construir el paquete optimizado. Con el modo Universal y SSG, la construcción se realiza usando nuxt generate o el script npm run export.

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

    Ejecuta los siguientes comandos desde la raíz del proyecto. npm run build compila el código, y npm run export genera los archivos HTML estáticos en la carpeta dist.

    macOS:

    bash
    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

    Windows:

    bash
    cd C:\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

    Cuando termine, verás la carpeta dist con todos los archivos generados.

  2. Configura el sitio en ServBay (servicio de archivos estáticos)

    En el panel de ServBay, ve a la pestaña "Sitios web" y haz clic en el botón + para agregar una nueva configuración:

    • Nombre (Name): Por ejemplo, Nuxt.js Prod Site (Static).
    • Dominio (Domain): El dominio personalizado para la versión de producción, como nuxt-prod.servbay.demo.
    • Tipo de sitio web (Website Type): Elige Estático (Static).
    • Raíz del sitio web (Website Root): Indica la ruta a la carpeta con los archivos estáticos generados:
      • macOS: /Applications/ServBay/www/servbay-nuxt-app/dist
      • Windows: C:\ServBay\www\servbay-nuxt-app\dist

    Guarda y ServBay actualizará el sitio.

  3. Accede al sitio en modo producción

    Abre tu navegador y visita el 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 de la carpeta dist, lo que garantiza velocidad y eficiencia máximas. Además, disfrutarás del certificado SSL gratuito y soporte de dominios personalizados que ServBay ofrece.

Resumen ​

ServBay facilita la gestión local de proyectos Nuxt.js para desarrollo y previsualización. Aprovecha el paquete Node.js de ServBay para ejecutar el servidor de desarrollo y emplea el sistema de sitios web para configurar proxies inversos, dando acceso bajo dominios personalizados y HTTPS para pruebas y debugging. Cuando finalices el desarrollo, construye y exporta el sitio estático y configúralo con el modo de sitio web estático de ServBay para obtener una previsualización local de alto rendimiento. Este flujo explota al máximo la comodidad y potencia de ServBay, simplificando las fases de desarrollo y pruebas frontend. ¡Esperamos que esta guía te ayude a sacar el máximo provecho de ServBay para desarrollar con Nuxt.js!