Prerequisites
- An OwnStak account with a fully set up organization
- An Angular project (version 18.0.0 or higher)
- Node.js installed locally (version 18.x or higher)
- Angular CLI installed globally
Getting Started
1. Prepare your Angular project
Create a new Angular project by running:
npm install -g @angular/cli
ng new my-angular-app
You can select either a static SPA project or SSR. Once the wizard finishes, enter the project directory and install all dependencies:
cd my-angular-app
npm install
For existing projects with SSR rendering, ensure your angular.json is in place and the project is properly configured for Node.js environment. Check that your project contains a server.js/mjs/ts file and exports a reqHandler function.
Example src/server.js file:
import {
AngularNodeAppEngine,
createNodeRequestHandler,
writeResponseToNodeResponse,
} from '@angular/ssr/node';
import express from 'express';
const app = express();
const angularApp = new AngularNodeAppEngine();
/**
* Handle all requests by Angular application by default
*/
app.use((req, res, next) => angularApp
.handle(req)
.then((response) =>
response ? writeResponseToNodeResponse(response, res) : next(),
)
.catch(next)
);
export const reqHandler = createNodeRequestHandler(app);
See Angular SSR Guide for more details.
2. Deploy from your machine
Now, you can deploy the project from your machine by running:
npx ownstak deploy
When you run the deploy command for the first time, the CLI will detect the currently used framework and guide you through the login and project configuration setup. Simply follow the instructions:
The organization and project names are stored in the ownstak.config.js configuration file for subsequent deployments, so you won't be prompted for this information again.
3. Deploy from CI
For CI and other non-persistent environments, you can skip the interactive deployment by providing the API key and other required options as command arguments.
You can generate a new API key for your account or project in the OwnStak Console under Settings > API Keys.
npx ownstak deploy --api-key=<your-secret-key> --organization=ownstak --project=my-angular-app --environment=default
4. Done!
Your project is now live and deployed to your organization's cloud infrastructure. You can visit and test it using the environment and deployment links provided in the output:
- Environment link – Always points to the latest deployment in a given project environment
Example:
my-angular-app-development.aws-primary.my-org.ownstak.link - Deployment link – Always points to a specific deployment
Example:
my-angular-app-development-10.aws-primary.my-org.ownstak.link
Local testing
If your project doesn't behave as expected, you can build and test it locally before deploying.
1. Build the project
Run the following command in your project directory to build your project without deploying it:
npx ownstak build
2. Start the project
Start the project and make sure it works for you locally with OwnStak:
npx ownstak start
When you see the ready message, you can visit http://localhost:3000 to test your application.
Caching
OwnStak by default sets different cache-control headers for assets, permanent assets, and pre-rendered pages with reasonable time for your CDN
for the best performance. It's expected to do cache purge via Webhooks after every deployment.
See CDN Configuration. Default cache-control headers can be overridden.
Headers
Custom HTTP headers can be dynamically set from SSR pages, or you can define static headers in your ownstak.config.js file.
import { Config } from 'ownstak'
export default new Config()
// Apply headers to specific paths
.setResponseHeaders({ "Cache-Control": "public, max-age=31536000" }, "/assets/:path*")
// Apply headers to all paths
.setResponseHeaders({
"X-Frame-Options": "DENY",
"X-Content-Type-Options": "nosniff",
"Cache-Control": "public, max-age=31536000"
})
Redirects
Custom redirects can be dynamically set from SSR pages, or you can define static redirects in your ownstak.config.js file.
import { Config } from 'ownstak'
export default new Config()
.setRedirect('/old-page', '/new-page')
.setRedirect('/api/:path*', '/new-api/:path*', 301)
Supported features
Here's a list of the features supported by OwnStak for Angular: