Getting Started

Starter Project

Kickstart new websites and apps with a turnkey template.

Install

Install the starter project locally with the npx command:

npx mnfst-starter Name

"Name" is the modifiable root directory title — name it after your project.

Alternatively, download the template directory from GitHub.

Run




npx mnfst-run

Run this project locally from the project root with npx mnfst-run, or any subdirectory with npx mnfst-run path, where "path" is the folder path. Alternatively, most local server solutions can run Manifest projects.

See websites for deploying live to production.

Capabilities

The project is provided with ready-made content for:

  • Routing (page-level views & 404 content)
  • Header, footer, and logo components
  • Responsive layout with mobile sidebar
  • Color modes
  • Localization (English, Arabic, and Chinese examples)
  • Markdown article injection

Files & Folders

The project begins with this folder structure for both development and deployment:

Project Name/
├── assets/                   # Visual files
│   ├── fonts                 # Web fonts
│   │   └── Inter.woff2
│   └── icons                 # Web app icons               
│       ├── 192x192.png
│       └── 512x512.png
├── components/               # HTML components
│   ├── header.html
│   ├── footer.html
│   └── logo.html
├── _redirects                # SPA routing support for modern static hosts
├── favicon.ico               # Browser tab icon
├── index.html                # Rendering entry point / main page
├── LICENSE.md                # MIT License
├── locales.csv               # Translated content in English, Arabic, and Chinese
├── manifest.json             # Project & web app manifest
├── manifest.theme.css        # Project theme variables
├── privacy.md                # Privacy policy template, required by most sites & apps
└── README.md                 # Project README

index.html

This main HTML file serves as the router's single-page application (SPA) entry point. It includes:

  • Head tags for Manifest framework loading (from CDN), SEO, and web app configuration.
  • Component placeholders (<x-header>, <x-footer>) of HTML templates.
  • Routing views (x-route="...") for URL-specific content.
  • Dynamic references (x-text="$x.content.page1") to localized data source values.

manifest.json

This web application manifest allows browsers to identify and export the website as an app to mobile and desktop devices. As a progressive web app (PWA), your project is often more portable, scalable, and popular than traditional native apps, and can be packaged for app store distribution.

This project also uses the manifest to register its components and localized content, and to define author and email fields referenced by the Privacy Policy.