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:
- ServBay instalado: Has instalado correctamente el entorno local ServBay.
- 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
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:
bashcd /Applications/ServBay/www npm create vue@latest
1
2Windows:
cmdcd C:\ServBay\www npm create vue@latest
1
2Sigue 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:bash✔ 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
1
2
3
4
5
6
7
8
9
10Instalar las dependencias
Una vez inicializado el proyecto, accede al directorio creado (
servbay-vue-app
) y ejecutanpm install
para instalar todos los paquetes necesarios.bashcd servbay-vue-app npm install
1
2
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:
html
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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.
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.bashnpm run dev -- --port 8585
1El terminal mostrará que el servidor se ha iniciado y escucha en el puerto indicado, por ejemplo en
http://localhost:8585
.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
haciahttp://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.
- Nombre:
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.
Generar la build de producción
Ejecuta el siguiente comando en la raíz del proyecto:
bashnpm run build
1El proceso crea un conjunto de archivos estáticos altamente optimizados y empaquetados en la carpeta
dist
dentro de tu proyecto.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
- macOS:
Al guardar, ServBay configurará el servidor web para servir directamente los archivos estáticos de
dist
.- Nombre:
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 comandonpm 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 a127.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.