Angular Landing Template (SSR + Prerender)

Modern Angular 21 starter template for building fast landing pages with SSR prerendering, TailwindCSS, and GitHub Pages deployment.

This template is optimized for static landing sites where pages are rendered at build time for SEO and performance.

Acknowledge

  • Angular 21
  • SSR prerendering during build
  • Zoneless Angular
  • OnPush change detection by default
  • TailwindCSS v4
  • GitHub Pages deployment
  • Prettier formatting
  • Clean minimal project structure

The project builds both:

dist/app/browser
dist/app/server

But deployment uses the browser prerendered output, making it perfect for static hosting.

Project Structure

src/
  app/
    app.component.ts
    app.config.ts
    app.config.server.ts
    app.routes.ts
    app.routes.server.ts
  assets/
  styles.scss

SSR configuration lives in:

app.config.server.ts
app.routes.server.ts

Development

Start the development server:

npm start

or

ng serve

Application runs at:

http://localhost:4200

Development mode runs as a normal Angular SPA.

Build

Build the project:

npm run build

This generates:

dist/app/browser
dist/app/server

Pages are prerendered at build time using Angular SSR.

Running the SSR server (optional)

The template includes a Node server for SSR:

npm run serve:ssr:app

This runs:

node dist/app/server/server.mjs

For most landing pages this is not required, because prerendered HTML is already generated.

Prerender configuration

All routes are prerendered by default:

src/app/app.routes.server.ts

RenderMode.Prerender

export const serverRoutes: ServerRoute[] = [
  {
    path: '**',
    renderMode: RenderMode.Prerender
  }
]

This makes Angular generate static HTML for every route during build.

TailwindCSS

Tailwind is configured via:

.postcssrc.json

Global styles live in:

src/styles.scss

Deployment

Deployment is handled automatically via GitHub Actions.

Workflow:

.github/workflows/deploy.yml

Steps:

  1. Install dependencies
  2. Build Angular app
  3. Copy CNAME
  4. Push build output to gh-pages

The deployed folder is:

dist/app/browser

Domain

Custom domain which you should adjust to your own domain so it works properly, any subdomain of *.itkamianets.com in case it's not used before on our github org.

ngx.itkamianets.com

Configured via:

CNAME

Code Style

Formatting is handled by:

  • .editorconfig
  • .prettierrc

Key conventions:

  • tabs
  • single quotes
  • 100 character line width

NPM Scripts

Start development:

npm start

Build project:

npm run build

Run SSR server:

npm run serve:ssr:app

Requirements

Recommended environment:

Node.js 20+
npm 11+

Code structure guide

Pages

Application pages should be created inside:

src/app/pages/

Each page should have its own folder and its own component file.

Example:

src/app/pages/home/home.component.ts
src/app/pages/about/about.component.ts

Generate a page component with Angular CLI:

ng generate component pages/home

or shorter:

ng g c pages/home

Pages should be lazy loaded from src/app/app.routes.ts.

Example route config:

import { Routes } from '@angular/router';

export const routes: Routes = [
	{
		path: '',
		loadComponent: () => import('./pages/home/home.component').then((m) => m.HomeComponent),
	},
	{
		path: 'about',
		loadComponent: () => import('./pages/about/about.component').then((m) => m.AboutComponent),
	},
];

Feature structure for back-end connected modules

If a part of the app needs its own business logic and back-end integration, create a dedicated feature folder inside:

src/app/feature/

Each feature should keep its own internal structure.

Example:

src/app/feature/user/
src/app/feature/user/components/
src/app/feature/user/directives/
src/app/feature/user/interfaces/
src/app/feature/user/pages/
src/app/feature/user/pipes/
src/app/feature/user/services/

Example service location:

src/app/feature/user/services/user.service.ts

Suggested CLI commands:

Create feature page:

ng g c feature/user/pages/user-profile

Create feature component:

ng g c feature/user/components/user-card

Create feature directive:

ng g d feature/user/directives/user-focus

Create feature pipe:

ng g p feature/user/pipes/user-name

Create feature service:

ng g s feature/user/services/user

Interfaces are usually created manually:

src/app/feature/user/interfaces/user.interface.ts
src/app/feature/user/interfaces/user-response.interface.ts

Generic shared code

Generic reusable code that is not tied to one specific feature can live directly under src/app.

Example shared folders:

src/app/components/
src/app/directives/
src/app/interfaces/
src/app/pipes/
src/app/services/

Example shared pipe location:

src/app/pipes/phone.pipe.ts

Suggested CLI commands:

Create shared component:

ng g c components/page-header

Create shared directive:

ng g d directives/autofocus

Create shared pipe:

ng g p pipes/phone

Create shared service:

ng g s services/api

Interfaces are usually created manually:

src/app/interfaces/api-response.interface.ts
src/app/interfaces/select-option.interface.ts

Development summary

Use these locations by default:

  • src/app/pages − app-level lazy loaded pages
  • src/app/feature/<name> − feature-specific code with back-end/business logic
  • src/app/components, directives, pipes, services, interfaces − generic shared code

Create a new project from this template

Clone the default repository into a new folder with your project name(replace PROJECT_NAME with your project name):

git clone https://github.com/IT-Kamianets/ngx-default.git PROJECT_NAME
cd PROJECT_NAME
npm i
npm run start

What these commands do

  • git clone https://github.com/IT-Kamianets/ngx-default.git PROJECT_NAME Downloads the template repository and creates a local folder named PROJECT_NAME.

  • cd PROJECT_NAME Opens the newly created project folder.

  • npm i Installs all project dependencies from package.json.

  • npm run start Starts the local development server.

After that, open the local URL shown in the terminal, usually http://localhost:4200

License

MIT