Proveedores

Analog soporta el despliegue en muchos proveedores con poca o ninguna configuración adicional utilizando Nitro como motor de servidor subyacente. Puedes encontrar más proveedores en la documentación de implementación de Nitro.

Netlify

Analog soporta el despliegue en Netlify con una configuración mínima.

Para el sitio de Netlify, establece el Publish directory en dist/analog/public y configura la salida como se muestra a continuación en el vite.config.ts. Esto despliega los activos estáticos y el servidor como una función de Netlify.

import { defineConfig } from 'vite';
import analog from '@analogjs/platform';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  /// ...other config
  plugins: [
    analog({
      nitro: {
        output: {
          dir: './dist/analog',
          serverDir: '{{ rootDir }}/.netlify/functions-internal',
        },
      },
    }),
  ],
}));

Vercel

Anaalog sopoorta el despliegue en Vercel con una configuración mínima.

Desplegando el proyecto

Crear analog
Nx

Por defecto, al desplegar en Vercel, el preset de compilación se maneja automáticamente.

Crear un nuevo proyecto y seleccionar el repositorio que contiene tu código.
Click 'Deploy'.

Eso es todo!

Para hacerlo funcionar con Nx, necesitamos definir la aplicación específica que queremos construir. Hay varias formas de hacerlo, y puedes elegir uno de los siguientes métodos (reemplaza <app> con el nombre de tu aplicación):

Define el parámetro defaultProject en tu nx.json

{
  "defaultProject": "<app>"
}

Crear un fichero vercel.json en la raíz de tu proyecto y definir el buildCommand:

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "buildCommand": "nx build <app>"
}

Definir el buildCommand en tu package.json:

{
  "scripts": {
    "build": "nx build <app>"
  }
}

Estableciendo el preset manualmente

Puede haber un caso en el que Vercel no cargue el preset automáticamente. En ese caso, puedes hacer una de las siguientes cosas.

Establece la variable de entorno BUILD_PRESET en vercel.
Establece el preset en el fichero vite.config.ts:

import { defineConfig } from 'vite';
import analog from '@analogjs/platform';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  /// ...other config
  plugins: [
    analog({
      nitro: {
        preset: 'vercel',
      },
    }),
  ],
}));

Nx y Vercel

Cuando se usa Nx y se reutiliza la caché de compilación en la plataforma de compilación de Vercel, existe la posibilidad de que la caché se reutilice si la has construido localmente. Esto puede provocar que la salida se coloque en la ubicación incorrecta. Para resolver este problema, puedes usar el preset en el fichero vite.config.ts como solución alternativa.

Cloudflare Pages y Workers

Anaalog soporta el despliegue en Cloudflare pages y workers con una configuración mínima.

Actualizando el punto de entrada del servidor

El fichero main.server.ts debe actualizarse para proporcionar la URL completa y el token APP_BASE_HREF en el servidor para el soporte de Cloudflare.

import { renderApplication } from '@angular/platform-server';
import { APP_BASE_HREF } from '@angular/common';
/// imports y código de arranque ...

export default async function render(url: string, document: string) {
  // establecer el href base
  const baseHref = process.env['CF_PAGES_URL'] ?? `http://localhost:8888`;

  // usar la URL completa y proporcionar APP_BASE_HREF
  const html = await renderApplication(bootstrap, {
    document,
    url: `${baseHref}${url}`,
    platformProviders: [{ provide: APP_BASE_HREF, useValue: baseHref }],
  });

  return html;
}

Configurando el directorio de salida

Para el despliegue de Cloudflare, establece la salida como se muestra a continuación. Esto combina los activos estáticos, junto con el worker de Cloudflare en el mismo directorio de salida.

import { defineConfig } from 'vite';
import analog from '@analogjs/platform';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  /// ...other config
  plugins: [
    analog({
      nitro: {
        output: {
          dir: './dist/analog/public',
          serverDir: './dist/analog/public',
        },
      },
    }),
  ],
}));

Desplegando a Cloudflare

Para conectar tu repositorio y desplegar automáticamente a Cloudflare:

Inicia sesión en el panel de control de Cloudflare y selecciona tu cuenta.
En la página de inicio de la cuenta, selecciona Workers & Pages.
Selecciona Create application > Pages > Connect to Git.
Ingresa npm run build como el Build Command.
Ingresa dist/analog/public como el Build output directory.
Deja la otra configuración predeterminada, haz clic en Save and Deploy.

La aplicación se despliega en la red de Cloudflare en cada push al repositorio.

Ejecutando la aplicación localmente usando Wrangler

Tambien puedes ejecutar la aplicación ejecutando localmente en Cloudflare:

Establece la variable de entorno BUILD_PRESET en cloudflare-pages antes de ejecutar la compilación

BUILD_PRESET=cloudflare-pages npm run build

Usa la CLI wrangler para ejecutar la aplicación localmente

npx wrangler pages dev ./dist/analog/public

Firebase

Analog soporta Firebase Hosting con Cloud Functions de forma nativa.

Vea un Repositorio de Ejemplo con Firebase configurado.

Nota: Necesitas estar en el plan Blaze para usar Analog con Cloud Functions.

Si aún no tienes un firebase.json en tu directorio raíz, Analog lo creará la primera vez que lo ejecutes. En este fichero, deberás reemplazar <your_project_id> con la ID de tu proyecto Firebase.

Este fichero luego debe ser subido al control de versiones. También puedes crear un fichero .firebaserc si no quieres pasar manualmente la ID de tu proyecto a tus comandos firebase (con --project <your_project_id>):

{
  "projects": {
    "default": "<your_project_id>"
  }
}

Luego, solo agrega las dependencias de Firebase a su proyecto:

npm install -D firebase-admin firebase-functions firebase-functions-test

Usando el Firebase CLI

Si prefieres configurar tu proyecto con el Firebase CLI, que obtendrá tu ID de proyecto por ti, agrega las dependencias requeridas (ver arriba) e incluso configura despliegues automatizados con GitHub Actions.

Instalar el Firebase CLI globalmente

npm install -g firebase-tools

Nota: Necesitas estar en ^11.18.0 para desplegar una función nodejs18.

Inicializar tu proyecto Firebase

firebase login
firebase init hosting

Cuantdo se te solicite, selecciona tu proyecto Firebase y elige dist/analog/public como el directorio public.

En el siguiente paso, no configures tu proyecto como una aplicación de una sola página (single-page).

Cuando la configuración esté completa, agrega lo siguiente a tu firebase.json para habilitar el renderizado del servidor en Cloud Functions:

{
  "functions": { "source": "dist/analog/server" },
  "hosting": [
    {
      "site": "<your_project_id>",
      "public": "dist/analog/public",
      "cleanUrls": true,
      "rewrites": [{ "source": "**", "function": "server" }]
    }
  ]
}

Puedes encontrar más detalles en la documentación de Firebase.

Previsualización local

Puedes previsualizar una versión local de tu sitio para probar las cosas sin desplegar.

BUILD_PRESET=firebase npm run build
firebase emulators:start

Desplegar a Firebase Hosting usando el CLI

Para desplegar a Firebase Hosting, ejecuta el comando firebase deploy.

BUILD_PRESET=firebase npm run build
firebase deploy

Render.com

Analog soporta el despliegue en Render con una configuración mínima.

Despliegue del servicio web

Crear un nuevo servicio web y seleccionar el repositorio que contiene tu código.
Asegúrate de que el entorno 'Node' esté seleccionado.
Especifica la versión de Node para que Render la use (se recomienda v18.13.0 o superior) - Render por defecto usa Node 14, que no puede construir correctamente un sitio Analog
Dependiendo de tu gestor de paquetes, establece el comando de compilación en yarn && yarn build, npm install && npm run build, o pnpm i --shamefully-hoist && pnpm build.
Actualiza el comando de inicio a node dist/analog/server/index.mjs
Haz Click en 'Advanced' y agrega una variable de entorno con BUILD_PRESET establecido en render-com.
Haz Click en 'Create Web Service'.

Despliegue de sitio estático

Si estas usando Analog para pre-renderizar contenido estático, puedes desplegar un sitio estático en Render con una configuración mínima

Crea un nuevo sitio estático y selecciona el repositorio que contiene tu código.
Dependiendo de tu gestor de paquetes, establece el comando de compilación en yarn && yarn build, npm install && npm run build, o pnpm i --shamefully-hoist && pnpm build.
Establece el directorio de publicación en el directorio public dentro del directorio de compilación dist (por ejemplo, dist/analog/public)
Haz clic en 'Crear sitio estático'

Edgio

Analog soporta el despliegue en Edgio con una configuración mínima.

Instala la CLI de Edgio:

npm i -g @edgio/cli

En tu directorio de proyecto, inicializa Edgio:

edgio init --connector=@edgio/analogjs

Despliega a Edgio:

edgio deploy

Proveedores

Netlify​

Vercel​

Desplegando el proyecto​

Estableciendo el preset manualmente​

Nx y Vercel​

Cloudflare Pages y Workers​

Actualizando el punto de entrada del servidor​

Configurando el directorio de salida​

Desplegando a Cloudflare​

Ejecutando la aplicación localmente usando Wrangler​

Firebase​

Usando el Firebase CLI​

Instalar el Firebase CLI globalmente​

Inicializar tu proyecto Firebase​

Previsualización local​

Desplegar a Firebase Hosting usando el CLI​

Render.com​

Despliegue del servicio web​

Despliegue de sitio estático​

Edgio​