> ## Documentation Index
> Fetch the complete documentation index at: https://docs.squarecloud.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Deploy an Angular App

> Deploy an Angular app on Square Cloud: build it with ng build, serve the browser folder with the static runtime or Node.js, or run the SSR server.

export const folder_2 = "dist/my-angular-app/browser"

export const folder_1 = "dist/my-angular-app/browser"

export const folder_0 = "dist/my-angular-app/browser"

export const RecommendedPlan = ({lang, plan, tier, cpu, appType, min}) => {
  const t = {
    'en': {
      q: <>Which plan should you choose for {appType}?</>,
      rec: p => <>We recommend the {p} plan: its <b>{tier} GB</b> of RAM and <b>{cpu} vCPU</b> handle most projects of this kind, with headroom for traffic spikes.</>,
      min: m => <> Lighter projects also run on the {m} plan.</>,
      pro: p => <> For larger projects, the {p} plan adds more RAM and CPU.</>
    },
    'pt-br': {
      q: <>Qual plano escolher para {appType}?</>,
      rec: p => <>Recomendamos o plano {p}: seus <b>{tier} GB</b> de RAM e <b>{cpu} vCPU</b> atendem a maioria dos projetos desse tipo, com folga para picos de tráfego.</>,
      min: m => <> Projetos mais leves também rodam no plano {m}.</>,
      pro: p => <> Para projetos maiores, o plano {p} oferece mais RAM e CPU.</>
    },
    'es': {
      q: <>¿Qué plan elegir para {appType}?</>,
      rec: p => <>Te recomendamos el plan {p}: sus <b>{tier} GB</b> de RAM y <b>{cpu} vCPU</b> cubren la mayoría de los proyectos de este tipo, con margen para picos de tráfico.</>,
      min: m => <> Los proyectos más ligeros también funcionan en el plan {m}.</>,
      pro: p => <> Para proyectos más grandes, el plan {p} ofrece más RAM y CPU.</>
    },
    'fr': {
      q: <>Quel plan choisir pour héberger {appType} ?</>,
      rec: p => <>Nous recommandons le plan {p} : ses <b>{tier} Go</b> de RAM et <b>{cpu} vCPU</b> suffisent pour la plupart des projets de ce type, avec une marge pour les pics de trafic.</>,
      min: m => <> Les projets plus légers fonctionnent aussi avec le plan {m}.</>,
      pro: p => <> Pour les projets plus importants, le plan {p} offre davantage de RAM et de CPU.</>
    },
    'de': {
      q: <>Welcher Plan eignet sich für {appType}?</>,
      rec: p => <>Wir empfehlen den {p}-Plan: <b>{tier} GB</b> RAM und <b>{cpu} vCPU</b> reichen für die meisten Projekte dieser Art, mit Reserven für Lastspitzen.</>,
      min: m => <> Kleinere Projekte laufen auch mit dem {m}-Plan.</>,
      pro: p => <> Für größere Projekte bietet der {p}-Plan mehr RAM und CPU.</>
    },
    'it': {
      q: <>Quale piano scegliere per {appType}?</>,
      rec: p => <>Ti consigliamo il piano {p}: i suoi <b>{tier}GB</b> di RAM e <b>{cpu}vCPU</b> bastano per la maggior parte dei progetti di questo tipo, con margine per i picchi di traffico.</>,
      min: m => <> I progetti più leggeri funzionano anche con il piano {m}.</>,
      pro: p => <> Per progetti più grandi, il piano {p} offre più RAM e CPU.</>
    },
    'ja': {
      q: <>{appType}にはどのプランを選べばよいですか？</>,
      rec: p => <>{p}プランをおすすめします。<b>{tier}GB</b>のRAMと<b>{cpu}vCPU</b>があれば、この種のプロジェクトの多くをトラフィックのピークにも余裕を持って動かせます。</>,
      min: m => <>軽量なプロジェクトは{m}プランでも動作します。</>,
      pro: p => <>より大規模なプロジェクトには、RAMとCPUが増える{p}プランをご検討ください。</>
    },
    'zh': {
      q: <>托管{appType}应该选择哪个套餐？</>,
      rec: p => <>我们推荐 {p} 套餐：<b>{tier}GB</b> RAM 和 <b>{cpu}vCPU</b> 足以运行大多数此类项目，并能从容应对流量高峰。</>,
      min: m => <>较轻量的项目也可以在 {m} 套餐上运行。</>,
      pro: p => <>对于更大的项目，{p} 套餐提供更多 RAM 和 CPU。</>
    }
  };
  const siteLang = t[lang] ? lang : 'en';
  const c = t[siteLang];
  const pay = (name, query) => <a href={`https://squarecloud.app/${siteLang}/pay?${query}`}>{name}</a>;
  const isPro = plan.toLowerCase() === 'pro';
  return <Note>
      <b>{c.q}</b><br />
      {c.rec(pay(plan, `plan=${plan.toLowerCase()}&tier=${tier}`))}
      {min ? c.min(pay(min, `plan=${min.toLowerCase()}`)) : null}
      {isPro ? null : c.pro(pay('Pro', 'plan=pro'))}
    </Note>;
};

export const appType_0 = "an Angular application"

## Introduction

To develop and host {appType_0} on Square Cloud, it's essential to follow a structured sequence of configurations and prerequisites. This technical guide will cover the entire process, from initial setup to production deployment.

### Prerequisites

* **Square Cloud Account**: Register through the [signup page](https://squarecloud.app/en/signup) using your email.
* **Active plan**: Ensures dedicated resources and optimized performance for your application. Check our [available plans](https://squarecloud.app/en/pricing) and choose the most suitable for your needs.

<RecommendedPlan appType="Angular applications" plan="Standard" tier="4" cpu="4" min="Hobby" lang="en" />

This guide runs on the [static runtime](/en/articles/getting-started-with-html) or the [Node.js runtime](/en/articles/getting-started-with-nodejs). Tested with Angular 22 on Node.js 24 in September 2026.

## Create the project

You need Node.js and npm on your machine. If you don't have them, download them from the [official Node.js website](https://nodejs.org/). Install the Angular CLI and create a project:

```bash theme={"system"}
npm install -g @angular/cli
ng new my-angular-app
```

The CLI asks about the stylesheet format and whether to enable server-side rendering (SSR). Answer **No** to SSR for a static site, the simplest setup; if you answer **Yes**, see [Server-side rendering](#server-side-rendering-ssr) below. `ng new` installs the dependencies for you.

Start the development server with `ng serve` (it listens on `http://localhost:4200`) and edit `src/app/app.html` to change the home page.

## Build for production

```bash theme={"system"}
ng build
```

`ng build` uses the production configuration by default. It writes the site to `dist/my-angular-app/browser`. If your project has another name, replace `my-angular-app` in the paths below.

## Choose how to serve it

Without SSR, an Angular build is a [static site](/en/articles/getting-started-with-html#static-sites-and-server-rendered-apps): HTML, CSS and JavaScript files that any web server can deliver. Pick one of these options:

<Tabs>
  <Tab title="Static runtime (recommended)">
    The static runtime serves the files of your build with a web server managed by Square Cloud. No Node.js process runs, so it is the lightest way to host a site without server-side code.

    <Steps>
      <Step title="Build the site">
        Run `npm run build`. The output goes to the <code>{folder_0}</code> folder.
      </Step>

      <Step title="Keep client-side routes working">
        If your app changes pages in the browser without a reload (client-side routing), rename <code>{folder_0}/index.html</code> to `vite.html`. The static runtime answers every path that is not a file with `vite.html`, so refreshing a route such as `/about` still loads your app. A site with one HTML file per page keeps `index.html`: unknown paths then return your `404.html`. See [how the static runtime serves files](/en/articles/getting-started-with-html#how-the-static-runtime-serves-files).
      </Step>

      <Step title="Add the configuration file">
        Create a `squarecloud.app` file inside <code>{folder_0}</code>. A `MAIN` that points to an HTML file selects the static runtime:

        ```systemd squarecloud.app theme={"system"}
        MAIN=vite.html
        MEMORY=512
        VERSION=recommended
        DISPLAY_NAME=My website
        SUBDOMAIN=mywebsite
        ```

        Use `MAIN=index.html` if you kept `index.html`. 512 MB is the minimum memory for a website. When you upload through the dashboard, it asks for these values and writes the file for you.
      </Step>

      <Step title="Zip the build output">
        Zip the contents of <code>{folder_0}</code>, not the folder itself, so that `squarecloud.app` sits at the root of the ZIP. With the CLI, run `squarecloud upload` from inside <code>{folder_0}</code>.
      </Step>
    </Steps>

    <Warning>Everything in the ZIP is public on your site. Upload only the build output, never your source code or `.env` files.</Warning>

    <Tip>Most build tools empty <code>{folder_0}</code> on every build. Keep a copy of `squarecloud.app` in the folder that your framework copies unchanged into the build (`public/` in Vite-based projects), or repeat the last three steps after each build.</Tip>
  </Tab>

  <Tab title="Express server">
    This option runs a small [Express](https://expressjs.com/) server on the Node.js runtime. Install Express as a regular dependency, not a `devDependency`, which Square Cloud does not install:

    ```bash theme={"system"}
    npm install express
    ```

    Create a `server.mjs` file at the root of your project. It serves the build output folder, <code>{folder_1}</code>, and returns `index.html` for any other path so client-side routing keeps working:

    ```javascript server.mjs theme={"system"}
    import express from 'express';
    import path from 'node:path';

    const app = express();
    const distPath = path.join(import.meta.dirname, 'dist/my-angular-app/browser');

    app.use(express.static(distPath));

    // SPA fallback: serve index.html for any route not matched above
    app.use((req, res) => {
      res.sendFile(path.join(distPath, 'index.html'));
    });

    // Square Cloud sets PORT=80; 0.0.0.0 accepts connections from outside the container
    const port = Number(process.env.PORT) || 80;
    app.listen(port, '0.0.0.0', () => console.log(`Server running on port ${port}`));
    ```

    To try it on your machine, pick a free port: `PORT=3000 node server.mjs`.

    Create a `squarecloud.app` file at the root of your project. Square Cloud starts your site with `node server.mjs`:

    ```systemd squarecloud.app theme={"system"}
    MAIN=server.mjs
    MEMORY=512
    VERSION=recommended
    DISPLAY_NAME=My website
    SUBDOMAIN=mywebsite
    ```

    Run `npm run build` before creating your ZIP. The ZIP needs `server.mjs`, `package.json`, `squarecloud.app` and the <code>{folder_1}</code> folder, without `node_modules`: Square Cloud installs your dependencies on the first start. Build tools are usually `devDependencies`, which Square Cloud does not install, so the build has to run on your machine.
  </Tab>

  <Tab title="serve package">
    This option runs the [`serve`](https://www.npmjs.com/package/serve) package on the Node.js runtime, with no server code to write. Install it as a regular dependency:

    ```bash theme={"system"}
    npm install serve
    ```

    Add a `start:prod` script to the `scripts` of your `package.json`, next to the ones you already have:

    ```json package.json theme={"system"}
    "scripts": {
      "start:prod": "serve -s dist/my-angular-app/browser"
    }
    ```

    <code>serve -s {folder_2}</code> serves the build output folder, <code>{folder_2}</code>, in single-page mode: any path that is not a file returns `index.html`, so client-side routing keeps working. `serve` listens on all network interfaces, on the port in the `PORT` environment variable, which Square Cloud sets to `80` (locally, it falls back to `3000`).

    Create a `squarecloud.app` file at the root of your project:

    ```systemd squarecloud.app theme={"system"}
    RUNTIME=nodejs
    START=npm run start:prod
    MEMORY=512
    VERSION=recommended
    DISPLAY_NAME=My website
    SUBDOMAIN=mywebsite
    ```

    `RUNTIME=nodejs` selects the Node.js runtime without a `MAIN` file, and `START` replaces the default start command.

    Run `npm run build` before creating your ZIP. The ZIP needs `package.json`, `squarecloud.app` and the <code>{folder_2}</code> folder, without `node_modules`: Square Cloud installs your dependencies on the first start. Build tools are usually `devDependencies`, which Square Cloud does not install, so the build has to run on your machine.
  </Tab>
</Tabs>

## Server-side rendering (SSR)

A project created with SSR (or with `ng add @angular/ssr`) also builds a Node.js server into `dist/my-angular-app/server`. That server reads the `PORT` environment variable, which Square Cloud sets to `80`, and listens on all network interfaces, so you don't need to change it. Start it with `START` in your `squarecloud.app`:

```systemd squarecloud.app theme={"system"}
RUNTIME=nodejs
START=node dist/my-angular-app/server/server.mjs
MEMORY=1024
VERSION=recommended
DISPLAY_NAME=My Angular app
SUBDOMAIN=my-angular-app
```

Angular's SSR server only answers requests for host names you allow; any other host gets a `400 Bad Request`. Add your address to the `NG_ALLOWED_HOSTS` [environment variable](/en/platform/environment-variables), for example `my-angular-app.squareweb.app` (separate several hosts with commas), or list it under `security.allowedHosts` in `angular.json` before you build.

Run `ng build` before creating your ZIP. The ZIP needs `package.json`, `squarecloud.app` and the `dist/` folder, without `node_modules`: Square Cloud installs the `dependencies` of your `package.json`, which already include `express` and `@angular/ssr`.

## Deploy and verify

Create the ZIP described in the option you picked, then upload it:

### Via dashboard

<Steps>
  <Step title="Access the Upload Page">
    Access the [upload page](https://squarecloud.app/en/dashboard/new) and upload your project zip file.
  </Step>

  <Step title="Configure Your Environment">
    After uploading your zip, you will need to configure the name, main file or runtime environment and other settings for your project.\
    If you are uploading a web project, make sure to select "Web Publication" and set a subdomain to your project.
  </Step>

  <Step title="Deploy Your Project">
    Finally, click on the "Deploy" button to host your project on Square Cloud.\
    After deployment, you can monitor your project's status and logs from the dashboard.

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/dashboard/uploading.gif" alt="Uploading application to Square Cloud" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Step>

  <Step title="Confirm Your App Is Live">
    Your first deploy usually takes less than a minute. In the [dashboard](https://squarecloud.app/en/dashboard), wait for your application status to show as running and check the logs for any startup errors.\
    If you deployed a website or API, open `https://<your-subdomain>.squareweb.app` in your browser: you should see your application responding. If you deployed a bot, send it a command to confirm it is online.
    <Tip>App not starting? See the [Troubleshooting guide](/en/platform/troubleshooting/app-wont-start) for the most common causes and fixes.</Tip>
  </Step>
</Steps>

### Via CLI

To use this method, your project needs a configuration file named `squarecloud.app` at its root. It tells Square Cloud how to run your application.

<Card title="Configuration file guide" icon="link" href="/en/getting-started/config-file">
  Learn how to create the `squarecloud.app` configuration file that defines your application's environment.
</Card>

<Steps>
  <Step title="Install the CLI">
    Install the [Square Cloud CLI](/en/cli-reference/installation). If you already have it, run the same command to update it:

    <CodeGroup>
      ```bash macOS, Linux, and WSL theme={"system"}
      curl -fsSL https://cli.squarecloud.app/install | bash
      ```

      ```bash Windows with npm theme={"system"}
      npm install -g @squarecloud/cli@latest
      ```
    </CodeGroup>
  </Step>

  <Step title="Log In">
    Run the command below. It opens your browser: approve the login there and the CLI is ready. There is no API key to copy. For scripts and CI, see [CLI authentication](/en/cli-reference/authentication).

    ```bash theme={"system"}
    squarecloud auth login
    ```
  </Step>

  <Step title="Upload Your Project">
    From your project folder, run the command below. The CLI zips the current folder, leaving out what [`squarecloud.ignore`](/en/getting-started/squarecloud-ignore) lists, and uploads it:

    ```bash theme={"system"}
    squarecloud upload
    ```

    To upload a zip you created yourself, pass it with `--file`:

    ```bash theme={"system"}
    squarecloud upload --file <path/to/zip>
    ```
  </Step>

  <Step title="Confirm Your App Is Live">
    Your first deploy usually takes less than a minute. Check your application status and logs directly from the terminal:

    ```bash theme={"system"}
    squarecloud app status
    squarecloud app logs
    ```

    If you deployed a website or API, open `https://<your-subdomain>.squareweb.app` in your browser: you should see your application responding. If you deployed a bot, send it a command to confirm it is online.
    <Tip>App not starting? See the [Troubleshooting guide](/en/platform/troubleshooting/app-wont-start) for the most common causes and fixes.</Tip>
  </Step>
</Steps>

## Common errors

<CardGroup cols={1}>
  ### Custom domain

  <Card horizontal>
    To use a custom domain (e.g., `mysite.com`) instead of the default URL `mysite.squareweb.app`, you need the **Standard plan or higher**. The default URL comes from the **SUBDOMAIN** field in the configuration file. To connect your domain, follow [how to set up your own domain](https://help.squarecloud.app/en-us/article/how-to-set-up-your-own-domain-cnamedns-1fzbrgh/).
  </Card>

  ### Minimum RAM requirements

  <Card horizontal>
    **Minimum: 512MB RAM** for websites and APIs, enough for a static build on the static runtime. For apps that render pages on a server (Next.js, Nuxt, Angular SSR and similar), we recommend **at least 1GB RAM**. For larger applications, allocate more RAM to prevent the application from running out of memory and crashing.
  </Card>

  ### Could not find this site.

  <Card horizontal>
    Check if the **subdomain/domain** matches what's configured in the **SUBDOMAIN** field or in the **custom domain settings**. If you just uploaded the site, wait up to **60 seconds** for Square to enable **first access**.
  </Card>

  ### Site took too long to respond...

  <Card horizontal>
    Your server must listen on **port 80** and **host 0.0.0.0**. Square Cloud sets the **PORT** (`80`) and **HOST** (`0.0.0.0`) environment variables in your application: read them in your code instead of hardcoding other values. A server that listens only on `localhost` or `127.0.0.1` never receives requests.
  </Card>
</CardGroup>

### A refresh on a route returns 404

Your app uses the Angular router and the server does not know the route. On the static runtime, rename `index.html` to `vite.html`. The Express and `serve` options above already return `index.html` for unknown paths.

### The SSR server answers 400 Bad Request

The host name of the request is not in the allowed list. Set `NG_ALLOWED_HOSTS` to your subdomain or custom domain, then restart the application.

## Next steps

<CardGroup cols={3}>
  <Card title="Environment variables" icon="key" href="/en/platform/environment-variables">
    Keep secrets and settings out of your code and read them at runtime.
  </Card>

  <Card title="Custom domain" icon="globe" href="https://help.squarecloud.app/en-us/article/how-to-set-up-your-own-domain-cnamedns-1fzbrgh/">
    Serve your app on your own domain, on the Standard plan and above.
  </Card>

  <Card title="Troubleshooting" icon="wrench" href="/en/platform/troubleshooting">
    Fix an app that does not start or a site that does not respond.
  </Card>
</CardGroup>

For more about Angular, see the [official Angular documentation](https://angular.dev).

## Contact us

If you continue facing **technical difficulties**, our **specialized support team** is available to assist you. [**Contact us**](https://squarecloud.app/en/support) and we'll be happy to help you resolve any issue: support quality is a big part of why developers rate Square Cloud [**4.9/5 across 402 reviews**](https://www.trustpilot.com/review/squarecloud.app) on Google and Trustpilot.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.