> For the complete documentation index, see [llms.txt](https://bhplugin.gitbook.io/tapotik-ai-angular/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bhplugin.gitbook.io/tapotik-ai-angular/installation.md).

# Installation

## ✅ Key Requirements

Before starting, you'll need:

* **Node.js version 22.22 / 24.15 or higher** (LTS recommended) — required by Angular 22.
* A package manager like **npm** (bundled with Node), or `pnpm` / `yarn` / `bun`.
* A code editor (VS Code recommended).
* **Git** (optional, but recommended for deployment).

> No database, backend, or server software is required — **Tapotik AI** is a UI-only template.

## 🚀 Getting Started

The setup involves three main steps:

{% stepper %}
{% step %}

## Extract the downloaded template file

{% endstep %}

{% step %}

## Open the folder in your code editor

{% endstep %}

{% step %}

## Run `npm install`

Run this in the terminal to download dependencies into `node_modules`.

```bash
cd tapotik-ai-angular
npm install
```

{% endstep %}
{% endstepper %}

## 💻 Development & Production

To begin development, run the dev server and open the site at `http://localhost:4000`:

```bash
npm start
```

When ready to launch, create an optimized production build (every page is prerendered to `dist/tapotik-ai-angular/browser`) and preview it locally:

```bash
npm run build
npx serve dist/tapotik-ai-angular/browser
```

{% hint style="info" %}
`npm run build` is also the **type gate**. TypeScript runs in strict mode with strict template checking, so any TypeScript or template error will fail the build. ESLint runs with `npm run lint` (and as part of `npm run cb`).
{% endhint %}

## 🗂️ Key Configuration Files

Most customizations don't require modifying component code:

* **Site details** — `src/app/core/config/site.ts` (branding, navigation, social links, SEO metadata).
* **Design tokens** — `src/styles.css` (colors, radius, utilities).
* **Typography** — `src/index.html` (Google Fonts `<link>`) + the `--font-*` names in `src/styles.css`.
* **Content & mock data** — `src/app/core/data/data.ts` (blog posts, job openings, docs nav, pricing, testimonials).

See the [**Customization**](/tapotik-ai-angular/customization.md) page for full details.

## 📜 Helpful Scripts

| Command                                     | What it does                                            |
| ------------------------------------------- | ------------------------------------------------------- |
| `npm start`                                 | Dev server on port 4000.                                |
| `npm run build`                             | Production build + static prerender (+ type gate).      |
| `npx serve dist/tapotik-ai-angular/browser` | Serve the production build.                             |
| `npm run lint`                              | Run ESLint (flat config).                               |
| `npm run format`                            | Prettier write.                                         |
| `npm run cb`                                | `format && lint && build` — run this before committing. |

## 🌍 Deployment Options

**Tapotik AI** is a standard Angular 22 app that builds to static files, so it deploys to Vercel (recommended for simplicity) or any static host or web server.

{% hint style="warning" %}
Before deploying, update the production domain in `siteConfig.url` (`src/app/core/config/site.ts`) so metadata, `sitemap.xml`, and `robots.txt` generate correctly.
{% endhint %}

### Option A — Vercel (recommended, easiest)

{% stepper %}
{% step %}

## Push your project

Push your project to a GitHub / GitLab / Bitbucket repository.
{% endstep %}

{% step %}

## Import it into Vercel

Go to [vercel.com](https://vercel.com/), click **Add New → Project**, and import your repository.
{% endstep %}

{% step %}

## Deploy

Click **Deploy** — no settings to change. The included `vercel.json` sets the build command and the output directory (`dist/tapotik-ai-angular/browser`), and makes unknown URLs return the custom 404 page with a real `404` status.
{% endstep %}
{% endstepper %}

### Option B — Any static host (VPS, Render, Railway, etc.)

{% stepper %}
{% step %}

## Build the app

```bash
npm run build
```

{% endstep %}

{% step %}

## Upload the build output

Upload the contents of `dist/tapotik-ai-angular/browser/` (it includes a `404.html` for unknown URLs).
{% endstep %}

{% step %}

## Serve the site

Serve it with Nginx / Caddy (or any static host) and point your domain at it.
{% endstep %}
{% endstepper %}

> Other platforms such as **Netlify**, **Cloudflare Pages**, and **AWS Amplify** work too — use their Angular preset (or a static site with the output directory above).

Every page is statically prerendered at build time; `/blog` applies its `?category=` filter in the browser.

## 🧩 A Note on Data

This is a **UI-only** template — there is no backend. All content lives in `src/app/core/data/data.ts` and forms simulate success via the `simulatedSubmit()` helper (`src/app/core/utils/simulated-submit.ts`). Its `setTimeout` is the single seam to swap for a real API request when you add a backend.