Crear y ejecutar proyectos Vue.js en macOS con ServBay

Vue.js es un popular framework progresivo de JavaScript para construir interfaces de usuario. Es fácil de aprender, flexible y de alto rendimiento, especialmente adecuado para crear aplicaciones de una sola página (SPA). ServBay, como un potente entorno local para desarrollo web, ofrece soporte integrado para Node.js, convirtiéndose en la plataforma ideal para desarrollar proyectos Vue.js en macOS.

Esta guía te mostrará paso a paso cómo usar el entorno integrado de ServBay para crear un proyecto Vue.js desde cero y acceder a él en modo desarrollo y producción mediante ServBay.

¿Qué es Vue.js?

Vue.js es un framework progresivo de JavaScript orientado a la construcción de interfaces de usuario. A diferencia de otros frameworks más grandes, Vue adopta un enfoque de desarrollo incremental desde la base. El núcleo de Vue se centra únicamente en la capa de vista, lo que no solo facilita el aprendizaje, sino que también permite una sencilla integración con otras librerías o proyectos existentes. Vue 3 es la última versión del framework y trae numerosas mejoras y novedades, como un rendimiento superior, paquetes más ligeros y una integración óptima con TypeScript.

Principales características y ventajas de Vue 3

• API de composición (Composition API): Permite organizar la lógica dentro de los componentes mediante funciones reutilizables, haciendo que la gestión de código en grandes componentes sea más coherente y mantenible.
• Mejoras de rendimiento: Vue 3 utiliza objetos Proxy para su sistema reactivo y ha optimizado el algoritmo del DOM virtual, logrando avances significativos en velocidad.
• Paquete más pequeño: Gracias al Tree-shaking, la biblioteca principal de Vue 3 es más ligera, lo que agiliza la carga de las aplicaciones.
• Mayor soporte para TypeScript: Vue 3 incluye definiciones de tipos mejoradas, garantizando una experiencia más sólida al desarrollar aplicaciones Vue con TypeScript.
• Ciclo de vida del componente mejorado: Nuevos hooks y la función Setup facilitan una lógica de componentes más clara y fácil de gestionar.

Utilizando Vue 3, los desarrolladores pueden crear aplicaciones web modernas, reactivas y de alto rendimiento de manera más eficiente.

Crear y ejecutar proyectos Vue.js usando el entorno integrado de ServBay

En este artículo, utilizaremos el entorno Node.js proporcionado por ServBay para crear y ejecutar un proyecto Vue.js. Aprovecharemos la función de Sitios Web de ServBay para configurar el servidor web, y accederemos al proyecto localmente mediante proxy inverso y servicio de archivos estáticos.

Requisitos previos

Antes de comenzar, asegúrate de haber completado lo siguiente:

1. Instalar ServBay: Ya tienes ServBay instalado en tu entorno macOS.
2. Instalar el paquete de Node.js: Has añadido el paquete de Node.js usando el gestor de paquetes de ServBay. Consulta los pasos detallados en Instalar y usar Node.js en ServBay.

Crear un proyecto Vue.js

1. Inicializar el proyecto

   Primero, abre tu terminal. ServBay recomienda guardar tus proyectos web en el directorio /Applications/ServBay/www. Accede a esa carpeta y usa el comando npm create vue@latest para inicializar un nuevo proyecto Vue.js. El parámetro @latest asegura que utilices la versión más reciente de Vue CLI o la herramienta create-vue, que por defecto creará un proyecto con Vue 3.

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

   Sigue las instrucciones en terminal e introduce el nombre del proyecto (se recomienda servbay-vue-app). Selecciona según lo que necesites si incluir TypeScript, Vue Router, Pinia y otras características. Ejemplo de configuración:

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

2. Instalar dependencias

   Tras inicializar el proyecto, accede al nuevo directorio servbay-vue-app y ejecuta npm install para instalar todas las dependencias necesarias.

   cd servbay-vue-app
   npm install

Modificar el contenido de ejemplo del proyecto (Opcional)

Para comprobar que el proyecto corre correctamente, puedes modificar el archivo src/App.vue y reemplazar el contenido por algo más simple, como un mensaje "Hello ServBay!".

Abre src/App.vue en el directorio del proyecto y reemplaza el contenido por:

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>Esta es una app Vue.js ejecutándose con 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 (Usando proxy inverso)

En modo desarrollo, los proyectos Vue inician normalmente un servidor local (basado en Vite o Webpack) con recarga en caliente (HMR), lo que facilita el trabajo. ServBay puede mapear un dominio local a la dirección y puerto de ese servidor de desarrollo usando proxy inverso.

1. Iniciar el servidor de desarrollo

   Desde la raíz del proyecto, ejecuta el siguiente comando para iniciar el servidor. Usa el parámetro --port (por ejemplo: 8585) y asegúrate de que el puerto no esté en uso.

   npm run dev -- --port 8585

   La terminal mostrará el servidor en marcha escuchando en el puerto especificado, por ejemplo http://localhost:8585.

2. Configurar el proxy inverso en el sitio web de ServBay

   Abre la interfaz de ServBay y dirígete a la sección Sitios Web. Añade una nueva configuración de sitio eligiendo el tipo Proxy inverso:

   • Nombre: My first Vue dev site (o cualquier nombre reconocible)
   • Dominio: servbay-vue-dev.servbay.demo (o cualquier otro bajo .servbay.demo)
   • Tipo de sitio web: Proxy inverso
   • IP de destino del proxy: 127.0.0.1
   • Puerto de destino del proxy: 8585 (igual que el puerto del servidor de desarrollo)

   Guarda los cambios y ServBay actualizará automáticamente la configuración de su servidor web (Caddy o Nginx), redireccionando el tráfico del dominio servbay-vue-dev.servbay.demo a http://127.0.0.1:8585.

   Para detalles más completos, consulta Añadir sitio Node.js para desarrollo en ServBay.

3. Accede al modo desarrollo

   Asegúrate de que el servidor web de ServBay esté en funcionamiento. Abre tu navegador y visita el dominio que configuraste: https://servbay-vue-dev.servbay.demo.

   Como ServBay activa automáticamente certificados SSL para dominios locales (mediante ServBay User CA o ServBay Public CA), puedes acceder desde HTTPS y así trabajar en un entorno seguro y similar al de producción. Para información sobre los ajustes SSL, revisa Configurar certificados SSL en sitios web con ServBay.

   Ahora deberías ver tu aplicación Vue corriendo en modo desarrollo y aprovechar la recarga en caliente cuando modifiques tu código.

Compilar para producción y desplegar (Servicio de sitio estático)

Una vez completes el desarrollo de tu proyecto Vue.js y quieras publicarlo, es necesario compilar una versión optimizada para producción. Usualmente esto será un conjunto de archivos estáticos (HTML, CSS, JavaScript) que puedes servir fácilmente desde ServBay.

1. Compilar la versión de producción

   Desde la raíz del proyecto, ejecuta:

   npm run build

   El resultado será una carpeta dist en la raíz con el conjunto de archivos estáticos empaquetados y optimizados.

2. Configurar el servicio de archivos estáticos

   En la interfaz de ServBay, entra en Sitios Web y añade una nueva configuración seleccionando Estático como tipo de sitio:

   • Nombre: My first Vue production site (o cualquier nombre reconocible)
   • Dominio: servbay-vue-prod.servbay.demo (u otro bajo .servbay.demo)
   • Tipo de sitio web: Estático
   • Directorio raíz del sitio: /Applications/ServBay/www/servbay-vue-app/dist (el path absoluto generado tras compilar el proyecto)

   Guarda los cambios y ServBay configurará su servidor web para servir directamente los archivos de la carpeta dist.

3. Accede a la versión de producción

   Asegúrate de que el servidor web de ServBay esté funcionando. Abre tu navegador y visita el dominio asignado para la producción: https://servbay-vue-prod.servbay.demo.

   Ahora verás la versión optimizada de tu aplicación Vue, lista para su lanzamiento, disfrutando de la mejor velocidad y rendimiento. Además, mediante los dominios personalizados y SSL automáticos de ServBay, puedes previsualizar de forma segura tu sitio productivo en local.

Consideraciones importantes

• Conflicto de puertos: Si el puerto 8585 (u otro elegido en npm run dev) está en uso, el servidor fallará al iniciar. Usa un puerto desocupado y actualiza también la configuración de proxy inverso en ServBay.
• Estado del servidor web de ServBay: Comprueba que el servidor web (Caddy o Nginx, según tu configuración) está funcionando, de lo contrario, no podrás acceder a los sitios por dominio.
• Resolución de dominios: ServBay configura automáticamente los dominios .servbay.demo añadidos en Sitios Web para que apunten a 127.0.0.1 (localhost). Si usas otro dominio, podrías necesitar modificar tu archivo hosts o emplear el Administrador de Hosts de ServBay para asegurar una correcta resolución local.

Conclusión

Gracias a ServBay, puedes montar fácilmente un entorno local en macOS con soporte Node.js integrado, gestionando el desarrollo y la publicación de proyectos Vue.js de forma ágil y sencilla. Aprovechando la función Sitios Web de ServBay, puedes configurar rápidamente un proxy inverso para acceder al servidor de desarrollo, o servir directamente archivos estáticos de la versión productiva, todo ello beneficiándote de dominios personalizados y certificados SSL automáticos, lo que aporta comodidad y seguridad. Esto simplifica de manera significativa la configuración y el flujo de trabajo de cualquier proyecto local con Vue.js.