Providers
Analog supports deployment to many providers with little or no additional configuration using Nitro as its underlying server engine. You can find more providers in the Nitro deployment docs.
Netlify
Analog supports deploying on Netlify with minimal configuration.
Deploying the Project
- Create analog
- Nx
In the build settings of your Netlify project, set the publish directory to dist/analog/public
to deploy the static assets and the functions directory to dist/analog
to deploy the server.
In the build settings of your Netlify project on the web UI, do the following.
- Set the build command to
nx build [your-project-name]
- Set the publish directory to
dist/[your-project-name]/analog/public
to deploy the static assets - Set the functions directory to
dist/[your-project-name]/analog
to deploy the server.
You can also configure this by putting a netlify.toml
at the root of your repository. Below is an example config.
# replace "my-analog-app" with the name of the app you want to deploy
[build]
command = "nx build my-analog-app"
publish = "dist/my-analog-app/analog/public"
functions = "dist/my-analog-app/analog"
Vercel
Analog supports deploying on Vercel with no additional configuration.
Deploying the Project
- Create analog
- Nx
By default, when deploying to Vercel, the build preset is handled automatically.
-
Create a new project and select the repository that contains your code.
-
Click 'Deploy'.
And that's it!
In order to make it work with Nx, we need to define the specific app we want to build. There are several ways to do this, and you can choose one of the following methods (replace <app> with your app name):
- Define the
defaultProject
in yournx.json
{
"defaultProject": "<app>"
}
- Create a
vercel.json
file in the root of your project and define thebuildCommand
:
{
"$schema": "https://openapi.vercel.sh/vercel.json",
"buildCommand": "nx build <app>"
}
- Define the
buildCommand
in yourpackage.json
:
{
"scripts": {
"build": "nx build <app>"
}
}
Nx and Vercel
When using Nx and reusing the build cache on the Vercel build platform, there is a possibility that the cache is reused if you have built it locally. This can lead to the output being placed in the wrong location. To resolve this issue, you can use the preset in the vite.config.ts
file as a workaround.
Setting the Preset Manually
There might be a case where Vercel doesn't load the preset automatically. In that case, you can do one of the following.
- Set the
BUILD_PRESET
environment variable tovercel
. - Set the preset in the
vite.config.ts
file:
import { defineConfig } from 'vite';
import analog from '@analogjs/platform';
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
/// ...other config
plugins: [
analog({
nitro: {
preset: 'vercel',
},
}),
],
}));
Cloudflare Pages
Analog supports deploying to Cloudflare Pages with minimal configuration.
Updating the Server Entry Point
The main.server.ts
file should be updated to provide the full URL and the APP_BASE_HREF
token on the server for Cloudflare support.
import { renderApplication } from '@angular/platform-server';
import { APP_BASE_HREF } from '@angular/common';
/// imports and bootstrap code ...
// set the base href
const baseHref = process.env['CF_PAGES_URL'] ?? `http://localhost:8888`;
export default async function render(url: string, document: string) {
// Use the full URL and provide the APP_BASE_HREF
const html = await renderApplication(bootstrap, {
document,
url: `${baseHref}${url}`,
platformProviders: [{ provide: APP_BASE_HREF, useValue: baseHref }],
});
return html;
}
Deploying to Cloudflare
To connect your repository and deploy automatically to Cloudflare:
- Log in to the Cloudflare dashboard and select your account.
- In Account Home, select Workers & Pages.
- Select Create application > Pages > Connect to Git.
- Enter
npm run build
as theBuild Command
. - Enter
dist/analog/public
as theBuild output directory
. - Leave the other default settings, click
Save and Deploy
.
The application deploys to Cloudflare's network on each push to the repository.
Nx and Cloudlfare
For Nx workspaces, the build output is under the app name. Update the Build output directory
accordingly.
For example:
Build output directory: dist/[your-project-name]/analog/public
To test the build locally, run the following command:
BUILD_PRESET=cloudflare-pages npx nx build [your-project-name]
Running the application locally using Wrangler
You can also preview the application running on Cloudflare locally:
- Set the environment variable
BUILD_PRESET
tocloudflare-pages
before running the build
BUILD_PRESET=cloudflare-pages npm run build
- Use the
wrangler
CLI to run the application locally
npx wrangler pages dev ./dist/analog/public