Crear

El comando create inicializa un nuevo proyecto de Vela. Con sesión iniciada en velastack.dev, también crea allí un proyecto y vincula los dos, de modo que vela deploy informa a ese proyecto y una plantilla con CMS lee del CMS alojado del proyecto desde la primera compilación.

Sintaxis

$ vela create [path]
$ vela create my-project

Esto creará un directorio llamado my-project con el nuevo proyecto de SvelteKit. Todo lo que no se pase como opción se solicita, así que el comando puede ejecutarse sin argumentos y responderse de forma interactiva.

Opciones

  • --template <type> - Plantilla a generar, por defecto minimal
  • --name <name> - Nombre de la aplicación, que se escribe en src/lib/site.ts. Un proyecto con backend también lo recibe como nombre de aplicación de PocketBase, que es el que usan sus correos.
  • --email <email> - Correo electrónico del superusuario de PocketBase
  • --password <password> - Contraseña del superusuario de PocketBase
  • --install <package-manager> - Instala las dependencias con el gestor de paquetes indicado. Uno de npm, yarn, pnpm, pnpm-rush, bun, deno, nub o aube. Pasa --no-install para omitir la instalación.
  • --link <new|none|project-id> - Vincula el nuevo proyecto con velastack.dev: crea allí un proyecto, omite el paso, o usa el id de un proyecto existente. Por defecto crea uno cuando tienes sesión iniciada en una terminal.
  • --team <id> - El equipo en el que se crea el proyecto de velastack.dev, con --link new. Por defecto, tu equipo personal.
  • --cms <url> - Lee el contenido de un CMS en esta URL en lugar del CMS del proyecto vinculado. Solo para plantillas con CMS.

El proyecto en velastack.dev

Con sesión iniciada en una terminal, vela create crea un proyecto en velastack.dev con el nombre de la aplicación, vincula el nuevo directorio con él en .vela/project.json e imprime la página del proyecto. Es el mismo vínculo que vela link crea para un proyecto existente: vela deploy informa a ese proyecto, y una plantilla con CMS recibe el CMS alojado del proyecto en src/lib/site.ts. Pasa --link none para mantener el proyecto local, o --link <project-id> para asociarlo a un proyecto que ya tienes.

Sin sesión iniciada, una plantilla con CMS pregunta de dónde debe leer su contenido: iniciar sesión y crear un proyecto en el momento, pegar la URL de un CMS que ya tengas, u omitirlo por ahora. Las demás plantillas no preguntan nada e indican cómo vincular más adelante.

Fuera de una terminal, por ejemplo en CI, no se crea nada en velastack.dev salvo que una opción lo pida. Define VELA_API_KEY y pasa --link new o --link <project-id>; una plantilla con CMS generada sin ninguna de las dos muestra un aviso y funciona con su contenido de respaldo hasta que se rellene cmsEndpoint.

$ vela create my-site --template hearth                # vinculado, endpoint del CMS escrito en src/lib/site.ts
$ vela create my-site --template hearth --link none    # mantenerlo local
$ VELA_API_KEY=… vela create my-site --template hearth --link new --no-install

Plantillas

Dos plantillas base vienen con la CLI:

  • minimal - SvelteKit con un backend de PocketBase, configurado y migrado. La opción por defecto.
  • static - Solo el frontend de SvelteKit, prerenderizado con adapter-static. Consulta Generador de Sitios Estáticos.

Las plantillas temáticas se descargan del registro de plantillas la primera vez que se usan y se guardan en caché en ~/.vela/templates. Cada una es un sitio completo construido sobre una de las dos plantillas base. Las plantillas de blog se construyen sobre minimal, así que todo lo de abajo sigue aplicando (las entradas son archivos Markdown en src/lib/content/blog/):

  • broadsheet - Blog editorial estilo periódico: tipografía serif, antetítulos, columnas con filetes y una cabecera con fecha.
  • confetti - Blog juguetón con navegación en píldoras redondeadas, garabatos y una paleta frambuesa y limón.
  • folio - Blog centrado en la tipografía, una sola familia serif, filetes finos y una columna de lectura estrecha.
  • loudspeaker - Blog tipo fanzine neobrutalista: bordes gruesos, sombras desplazadas y un acento llamativo por modo.
  • penumbra - Blog cinematográfico en modo oscuro por defecto, superficies pizarra y un acento ámbar cálido.
  • rebar - Blog monocromo y crudo con estructura expuesta: bordes finos, sin radios, sin sombras.
  • stdout - Blog de bitácora para desarrolladores con estilo de terminal: tipografía monoespaciada y un acento verde.

Las plantillas de negocio y de restaurante se construyen sobre static y leen sus textos de un CMS alojado, así que cada página se edita en el sitio desde la barra de administración:

  • blueline - Sitio de cuatro páginas para un estudio de ingeniería dibujado como un plano: cabecera con cajetín, cuadrícula de papel milimetrado y líneas de cota.
  • letterhead - Sitio de cuatro páginas para una consultoría con títulos serif grabados y márgenes generosos.
  • outpost - Sitio de cuatro páginas de monitorización de infraestructura construido como una sala de control: cabecera de barra de estado, contador de disponibilidad y una consola con desplazamiento.
  • signet - Sitio de cuatro páginas de asesoría patrimonial y fiduciaria compuesto como un dosier lacrado: emblema de sello de cera, filetes de libro mayor y mandatos referenciados.
  • waybill - Sitio de cuatro páginas de transporte de mercancías sellado como un muelle de carga: cabecera de conocimiento de embarque, franjas de peligro y tablas de manifiesto.
  • hearth - Sitio de restaurante de tres páginas construido alrededor del fuego: horarios, cómo llegar y enlace al menú, todo editable desde el CMS.

Una plantilla con CMS no necesita nada más que el vínculo. Su src/lib/site.ts lleva el cmsEndpoint que vela create rellenó; abre cualquier página con ?edit en la URL e inicia sesión desde la barra de administración. Los editores se gestionan en velastack.dev, en el CMS del proyecto. Sin endpoint el sitio se compila sin conexión y muestra el contenido de respaldo escrito en sus páginas, y VELA_CMS_OFFLINE=1 compila así a propósito cuando el CMS no está disponible. Consulta vela enable cms para ver cómo encajan las piezas.

Pasar un nombre que no existe muestra todas las plantillas agrupadas por categoría. Si no se puede acceder al registro, las plantillas base siguen funcionando. Define VELA_TEMPLATE_INDEX_URL para apuntar la CLI a una copia local del registro mientras desarrollas una plantilla.

--email y --password solo se aplican a plantillas con backend; pasarlas a la plantilla estática es un error.

Características incluidas

De serie, antes de habilitar cualquier módulo, todas las plantillas de Vela incluyen estas características mínimas, consideradas esenciales para una aplicación lista para producción:

  • Conexión a la base de datos
  • Metadatos de la aplicación (nombre de la aplicación, URL pública) en src/lib/site.ts
  • Diseño de cuadrícula de altura completa con Tailwind CSS
  • Página de respaldo para errores
  • Soporte de modo claro/oscuro
  • Pruebas de servidor
  • Mensajes flash
  • Notificaciones toast