Getting Started Starter Project
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 MyProject

"MyProject" 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
  • Colour themes
  • 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/
├── components/               # Reusable HTML components
│   ├── header.html           # Page header
│   ├── footer.html           # Page footer
│   └── logo.html             # Inline SVG logo
├── icons/                    # Web app (PWA) icons referenced in manifest.json
│   ├── 192x192.png           # Small icon variant
│   ├── 512x512.png           # Large icon variant
│   └── opengraph.png         # Link sharing image
├── _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                 # This file

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 apps (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.

Powered by Manifest