Prerequisites for Using Archify: Complete Setup Guide for 2024
Archify requires only a modern web browser to run—no backend, database, or API keys needed—though Node ≥ 16 and a static-file server are recommended for development.
Archify is a client-side, interactive documentation tool that renders architecture diagrams directly in the browser. Because it ships as pure static assets (HTML, CSS, JavaScript), the barrier to entry is intentionally low. This guide covers every prerequisite for using Archify, from essential browser requirements to optional development tooling.
Browser Requirements for Archify
Archify is built with ES‑2022 JavaScript, CSS Grid, and the Web Components API. These technologies require up-to-date browser engines.
| Browser | Minimum Version |
|---|---|
| Chrome | ≥ 80 |
| Firefox | ≥ 75 |
| Edge | ≥ 85 |
| Safari | ≥ 13 |
The README.md "Getting Started" section confirms these requirements. All rendering happens client-side, so server-side processing is never needed.
Optional Development Prerequisites
While Archify runs without any build step, the repository includes helper scripts for developers. These add optional but convenient capabilities.
Node.js ≥ 16 for Helper Scripts
The scripts/ folder contains utilities written for Node 16+:
run-tests.mjs— test harness for sanity checksbuild-zip.sh— bundles assets for deployment
These are not required for the core viewer. The archify/package-lock.json file pins the exact dependency versions used by these scripts.
Static-File Server for Local Development
Archify examples load JSON architecture files via fetch(). Browsers enforce CORS restrictions on file:// URLs, so a local server is needed during development.
Any of these work:
npx serve(Node-based, recommended)- Python:
python3 -m http.server php -S localhost:8000- VS Code Live Server extension
The docs/start.html guide documents this requirement explicitly.
Git for Repository Access
Clone the source from GitHub:
git clone https://github.com/tt-a1i/archify.git
Internet Connection for External Assets
Some examples in examples/web-app.html reference external resources:
- Google Fonts
- Font Awesome icons
These load via CDN and require connectivity unless you vendor them.
What Archify Does NOT Require
- No backend service — pure client-side rendering
- No database — data lives in plain JSON files
- No API keys — authentication-free operation
- No build step for basic usage — CDN bundle works immediately
This zero-dependency design means Archify deploys to any static-hosting platform: GitHub Pages, Netlify, Vercel, or basic S3 hosting.
Quick Start: Three Ways to Use Archify
1. CDN Embed (Zero Setup)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Archify Demo</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/archify/dist/archify.js"></script>
</head>
<body>
<archify-view src="examples/archify-repo.architecture.json"></archify-view>
</body>
</html>
The <archify-view> Web Component loads and renders the JSON architecture definition automatically.
2. Local Development Server
# Clone and enter repository
git clone https://github.com/tt-a1i/archify.git
cd archify
# Install optional helper scripts
npm ci
# Serve examples folder
npx serve examples
Open http://localhost:3000/web-app.html for the full-featured demo.
3. Build Custom Distribution
# From repository root
node scripts/build-zip.sh
This creates archify.zip with minified, deployment-ready assets.
Key Source Files
| File | Purpose |
|---|---|
README.md |
Primary documentation with prerequisites section |
docs/start.html |
Quick-start embedding guide |
examples/web-app.html |
Full-featured example with theming |
archify/package-lock.json |
Node dependency locking |
scripts/run-tests.mjs |
Test runner (Node ≥ 16) |
scripts/build-zip.sh |
Distribution builder |
Summary
- Minimum requirement: Modern browser (Chrome ≥ 80, Firefox ≥ 75, Edge ≥ 85, Safari ≥ 13)
- Recommended for development: Node ≥ 16 and any static-file server
- Deployment target: Any static-hosting platform
- Not needed: Backend, database, API keys, or build step for basic usage
Archify's design prioritizes portability—you can go from zero to interactive architecture diagrams in minutes.
Frequently Asked Questions
Do I need to install Node.js to use Archify?
No. Node ≥ 16 is only required if you want to run the helper scripts in scripts/ or build custom distributions. The CDN bundle in dist/archify.js works in any modern browser without installation.
Can I run Archify without a web server?
Not reliably. Browser CORS policies block fetch() requests from file:// URLs. Use any static server—even Python's http.server one-liner—to serve the examples/ folder locally.
What file format does Archify use for architecture data?
Plain JSON. All architecture definitions are human-readable JSON files bundled with the repository. No proprietary formats or external data sources are required.
Is Archify suitable for private/internal documentation?
Yes. Because Archify requires no backend or API keys, you can host it entirely on internal static hosting with no external dependencies beyond optional fonts/icons.
Have a question about this repo?
These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:
curl -s "https://instagit.com/install.md" 
Maintain an open-source project? Get it listed too →