Crear y ejecutar proyectos Vue.js con ServBay

Vue.js es uno de los frameworks JavaScript progresivos más populares para construir interfaces de usuario. Es fácil de aprender, flexible y de alto rendimiento, especialmente ideal para aplicaciones de página única (SPA). ServBay es una potente herramienta para el desarrollo web local que ofrece soporte para Node.js, está disponible tanto en macOS como en Windows, y es una plataforma excelente para desarrollar con Vue.js.

Esta guía te explica paso a paso cómo crear un proyecto Vue.js desde cero usando el entorno integrado de ServBay, y cómo accederlo tanto en modo desarrollo como en producción.

¿Qué es Vue.js?

Vue.js es un framework progresivo de JavaScript para crear interfaces de usuario. A diferencia de otros frameworks más grandes, Vue adopta un diseño incremental que va de abajo hacia arriba. Su librería principal se centra solamente en la capa de vista, lo que facilita su uso y su integración con otras bibliotecas o proyectos existentes. Vue 3 es la versión más reciente y trae consigo varias mejoras y nuevas funcionalidades, incluyendo mayor rendimiento, paquetes más ligeros y soporte avanzado para TypeScript.

Principales características y ventajas de Vue 3

• API de composición (Composition API): Permite organizar la lógica del componente mediante funciones, facilitando el mantenimiento y la reutilización de código en aplicaciones grandes.
• Mejoras de rendimiento: Vue 3 utiliza Proxy para su sistema reactivo y ha optimizado el algoritmo del DOM virtual, resultando en un rendimiento significativamente superior.
• Paquetes más ligeros: Gracias a la técnica de Tree-shaking, el core de Vue 3 es más pequeño y las cargas son más rápidas.
• Soporte mejorado para TypeScript: Proporciona tipos mejor definidos y una experiencia superior al desarrollar aplicaciones Vue con TypeScript.
• Ciclo de vida de componentes mejorado: Nuevos hooks de ciclo de vida y la función Setup hacen que la lógica de componentes sea más clara y sencilla de gestionar.

Utilizar Vue 3 te ayuda a construir aplicaciones web modernas y rápidas de forma más eficiente.

Crear y ejecutar un proyecto Vue.js en ServBay

En este artículo usaremos el entorno Node.js integrado de ServBay para crear y ejecutar un proyecto Vue.js. Utilizaremos la función de sitios web de ServBay para configurar el servidor web y habilitar el acceso local mediante proxy inverso y servicio de archivos estáticos.

Requisitos previos

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

1. ServBay instalado: Has instalado correctamente el entorno local ServBay.
2. Paquete Node.js instalado: Has utilizado la gestión de paquetes de ServBay para instalar Node.js. Puedes ver los pasos detallados en Instalar y usar Node.js en ServBay.

Crear un proyecto Vue.js

1. Inicializar el proyecto

   Abre tu terminal. Se recomienda guardar los proyectos de sitios web en el directorio predeterminado de ServBay. Entra en ese directorio y usa el comando npm create vue@latest para iniciar un nuevo proyecto Vue.js. El sufijo @latest garantiza que emplearás la versión más reciente del CLI o la herramienta create-vue, habitualmente para proyectos con Vue 3.

   macOS:

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

   Windows:

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

   Sigue los pasos en terminal ingresando el nombre del proyecto (recomendamos servbay-vue-app). Elige si deseas agregar TypeScript, Vue Router, Pinia y otras características según tus necesidades. Ejemplo de configuración:

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No # Elige Yes o No según prefieras
   ✔ Add JSX Support? … No # Elige Yes o No según prefieras
   ✔ Add Vue Router for Single Page Application development? … Yes # Se recomienda Yes
   ✔ Add Pinia for state management? … No # Elige Yes o No según prefieras
   ✔ Add Vitest for Unit testing? … No # Elige Yes o No según prefieras
   ✔ Add an End-to-End Testing Solution? … No # Elige Yes o No según prefieras
   ✔ Add ESLint for code quality? … Yes # Se recomienda Yes
   ✔ Add Prettier for code formatting? … Yes # Se recomienda Yes
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # Elige Yes o No según prefieras

2. Instalar las dependencias

   Una vez inicializado el proyecto, accede al directorio creado (servbay-vue-app) y ejecuta npm install para instalar todos los paquetes necesarios.

   cd servbay-vue-app
   npm install

Modificar el contenido de ejemplo del proyecto (opcional)

Para comprobar que el proyecto funciona correctamente, puedes modificar el archivo src/App.vue para mostrar un simple "Hello ServBay!".

En el directorio del proyecto, abre src/App.vue y reemplaza su contenido por:

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>Esta es una aplicación Vue.js ejecutándose mediante 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>

Configurar el entorno de desarrollo (proxy inverso)

En modo desarrollo, Vue normalmente levanta un servidor local (usando Vite o Webpack) que ofrece funcionalidades como recarga en caliente (HMR). ServBay puede mapear un nombre de dominio local hacia la dirección y puerto de ese servidor usando proxy inverso.

1. Ejecutar el servidor de desarrollo

   Desde la raíz del proyecto, ejecuta el siguiente comando para iniciar el servidor de desarrollo. Utiliza el parámetro --port para especificar un puerto (por ejemplo: 8585), asegurándote de que no esté en uso por otra aplicación.

   npm run dev -- --port 8585

   El terminal mostrará que el servidor se ha iniciado y escucha en el puerto indicado, por ejemplo en http://localhost:8585.

2. Configurar el proxy inverso en ServBay

   Accede a la interfaz de ServBay y dirígete a la sección de Sitios web. Crea una nueva configuración seleccionando el tipo proxy inverso:

   • Nombre: My first Vue dev site (o algún nombre identificativo de tu preferencia)
   • Dominio: servbay-vue-dev.servbay.demo (o cualquier otro dominio .servbay.demo)
   • Tipo de sitio web: Proxy inverso
   • IP destino proxy: 127.0.0.1
   • Puerto destino proxy: 8585 (debe coincidir con el del servidor de desarrollo)

   Al guardar la configuración, ServBay actualizará automáticamente su servidor web (Caddy o Nginx) para redirigir las solicitudes a servbay-vue-dev.servbay.demo hacia http://127.0.0.1:8585.

   Para pasos detallados sobre cómo añadir sitios Node.js en ServBay, consulta Cómo añadir un sitio de desarrollo Node.js en ServBay.

3. Acceder en modo desarrollo

   Asegúrate de que el servidor web de ServBay está en funcionamiento. Abre el navegador y accede al dominio configurado: https://servbay-vue-dev.servbay.demo.

   ServBay soporta la configuración automática de certificados SSL para los dominios locales (usando ServBay User CA o ServBay Public CA), permitiéndote acceder por HTTPS como en producción. Para más información sobre SSL, visita Cómo configurar certificados SSL en ServBay.

   Ahora deberías ver tu aplicación Vue ejecutándose en modo desarrollo con recarga en caliente cada vez que modifiques el código.

Crear una build de producción y desplegar (sitio estático)

Cuando tu proyecto Vue.js esté listo para producción, necesitarás generar una versión optimizada para desplegar como sitio estático. Esta versión incluye archivos HTML, CSS y JS que pueden servirse directamente con la función de sitios estáticos de ServBay.

1. Generar la build de producción

   Ejecuta el siguiente comando en la raíz del proyecto:

   npm run build

   El proceso crea un conjunto de archivos estáticos altamente optimizados y empaquetados en la carpeta dist dentro de tu proyecto.

2. Configurar el servicio de archivos estáticos

   En la interfaz de ServBay, accede a Sitios web y añade una nueva configuración como sitio estático:

   • Nombre: My first Vue production site (o el nombre que prefieras)
   • Dominio: servbay-vue-prod.servbay.demo (o cualquier otro dominio .servbay.demo)
   • Tipo de sitio web: Estático
   • Directorio raíz del sitio: Define la ruta absoluta a la carpeta dist generada por la build:
     • macOS: /Applications/ServBay/www/servbay-vue-app/dist
     • Windows: C:\ServBay\www\servbay-vue-app\dist

   Al guardar, ServBay configurará el servidor web para servir directamente los archivos estáticos de dist.

3. Acceder a la build de producción

   Verifica que el servidor web de ServBay esté corriendo y abre el dominio configurado: https://servbay-vue-prod.servbay.demo.

   Ahora verás la versión optimizada de tu aplicación Vue, lista para ofrecer el mejor rendimiento posible. Utilizando dominios personalizados y SSL automático de ServBay, puedes probar con total seguridad tu sitio en local antes de desplegarlo en producción.

Consideraciones

• Conflictos de puerto: Si otro programa ya utiliza el puerto 8585 (o el que elijas), el comando npm run dev dará error. Cambia a otro puerto libre y actualiza también la configuración del proxy inverso en ServBay.
• Estado del servidor web de ServBay: Asegúrate de que está ejecutándose el servidor web de ServBay (Caddy o Nginx, según la configuración), de lo contrario no podrás acceder mediante el dominio configurado.
• Resolución de dominio: ServBay configura automáticamente los dominios .servbay.demo añadidos en Sitios web para que apunten a 127.0.0.1. Si usas otro dominio, quizá debas editar el archivo hosts de tu sistema manualmente o emplear la herramienta Hosts Manager de ServBay para garantizar la resolución local adecuada.

Resumen

Con ServBay puedes crear fácilmente en macOS y Windows un entorno local con Node.js totalmente integrado, gestionando de forma sencilla proyectos Vue.js tanto en desarrollo como en producción. Gracias a la función sitios web de ServBay, puedes configurar rápidamente un proxy inverso para acceder a tu servidor de desarrollo, o servir directamente la build de producción como sitio estático, contando además con dominios personalizados y certificados SSL automatizados que simplifican y aseguran tu flujo de trabajo local para proyectos Vue.js.