How to Host Angular Applications on Square Cloud

Unlike a Discord bot, Angular does not "run" on its own; it needs a web server to deliver files to the user's browser. The recommended way is the static runtime: upload the contents of dist/<project-name>/browser and rename index.html to vite.html so SPA routes work. Serving with the serve library on Node.js, shown below, is an alternative.

1. The Fundamental Step: Production Build

The first step is to transform your TypeScript code and components into files that any browser can understand. Run the build command on your local machine:

ng build --configuration production

This will create a folder named dist/ at the root of your project. Inside it, there will be another folder named after your project containing the index.html and the JavaScript bundles.

2. Preparing the Web Server

To let Square Cloud know how to deliver these files, we will use the serve library, which is lightweight and ideal for SPAs.

Adding the Dependency

In your package.json file, add serve to your dependencies:

"dependencies": {
  "serve": "^14.0.0"
}

3. Configuring the Port and Start Command

Use a config file with RUNTIME=nodejs, START=npx serve -s dist/<project-name>/browser -p 80, MEMORY, VERSION=recommended, DISPLAY_NAME and SUBDOMAIN (without MAIN or RUNTIME the deploy fails with MISSING_MAIN). In the dashboard, enable Web Publication on the first upload. serve makes this easy with simple parameters.

The Start Command

Your initialization command (defined in the Dashboard or in the configuration file) should be:

npx serve -s dist/<project-name>/browser -p 80

• -s (Single Page Application): Redirects all routes to index.html. This is vital for Angular routing (e.g., /dashboard, /login) to work without throwing a 404 error when refreshing the page.
• dist/<project-name>/browser: where Angular 17 or later writes the index.html (on older versions, dist/<project-name>). Serving only dist returns 404.
• -p 80: Sets the mandatory port for Square Cloud.

4. What to Include in the ZIP File?

For a clean deployment, your .zip file must contain:

1. The complete dist/ folder.
2. The package.json file.

Note: Do not upload the node_modules or src folders. The server only needs the compiled files and installation instructions.

5. Tips for Routes and Performance

• Routing: The -s parameter in the serve command is what ensures that Angular routing doesn't break. Without it, if a user accesses an internal URL directly, the server will try to find a physical file that does not exist.
• Environment Variables: If your Angular application consumes an API, remember to configure the URLs in the environment.prod.ts files before building, or use runtime variable injection solutions.

Updated on: 10/04/2026