How to Host Angular Applications

Introduction

This guide covers deploying Angular applications on Shard Cloud.

Creating Your Project

Ensure you have Node.js and npm installed.

Installing Angular CLI

npm install -g @angular/cli

Creating a New Project

ng new my-angular-app
cd my-angular-app

Building Your Project

Build the production output:

ng build --configuration production

This creates a dist/ folder with optimized files.

Serving Your Angular App

Angular apps are static files that need a server:

Using serve

npm install serve

Using Express

Create a server.js file:

server.js

const express = require('express');
const path = require('path');

const app = express();
const distPath = path.join(__dirname, 'dist', 'my-angular-app', 'browser');

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

app.get('*', (req, res) => {
  res.sendFile(path.join(distPath, 'index.html'));
});

app.listen(80, () => {
  console.log('Server running on port 80');
});

Replace my-angular-app with your actual project name in the path.

Shard Cloud Configuration

Create a .shardcloud file:

.shardcloud

DISPLAY_NAME=Angular App
DESCRIPTION=Angular Application
LANGUAGE=node
MEMORY=1024
VERSION=recommended
SUBDOMAIN=my-angular-app
CUSTOM_COMMAND=npm run build && npx serve -s dist/my-angular-app/browser -l 80

Deploying

Build Your Application

Run ng build --configuration production.

Prepare Your Files

Ensure you have:

Source files
package.json
.shardcloud
angular.json

Exclude Unnecessary Files

Remove: node_modules/, dist/, package-lock.json

Create ZIP Archive

Compress your project folder.

Upload to Shard Cloud

Go to Shard Cloud Dashboard and upload.

Additional Resources

Visit the official Angular documentation for more information.

Troubleshooting

Build fails with memory errors

Increase MEMORY to at least 1024MB for Angular builds.

Routes not working (404)

Ensure your server serves index.html for all routes.

Introduction

Platform Features

Bot Platforms

API Frameworks

Website Frameworks

How to Host Angular Applications

Introduction

Creating Your Project

Installing Angular CLI

Creating a New Project

Building Your Project

Serving Your Angular App

Using serve

Using Express

Shard Cloud Configuration

Deploying

Additional Resources

Troubleshooting

​Introduction

​Creating Your Project

​Installing Angular CLI

​Creating a New Project

​Building Your Project

​Serving Your Angular App

​Using serve

​Using Express

​Shard Cloud Configuration

​Deploying

​Additional Resources

​Troubleshooting

Introduction

Creating Your Project

Installing Angular CLI

Creating a New Project

Building Your Project

Serving Your Angular App

Using serve

Using Express

Shard Cloud Configuration

Deploying

Additional Resources

Troubleshooting