The awesome-comparisons application is fully compatible with static deployment for its public-facing "Comparison View". The requirement to run without server-side services is met for the public interfaces.
- Static Assets: The application loads data exclusively from static JSON files (
comparison.json,data.json) located in theassets/directory. - No API Dependencies: The
ConfigurationServiceandDatasetManifestServiceuseHttpClientto fetch these static files, which works perfectly on static hosting providers (GitHub Pages, Netlify, etc.). - Dataset Discovery:
DatasetManifestServicereads adatasets.manifest.jsonfile to discover available datasets, requiring no dynamic backend logic.
- Production Build:
src/environments/environment.prod.tsis configured correctly for static deployment:It does not define or use any API endpoints.export const environment = { production: true, debug: false, repositoryUrl: '...', githubPagesUrl: '...' };
- Public vs. Admin: The codebase cleanly separates the public view (
ComparisonModule) from the admin interface (ConfigAdminModule).- Public View: Uses
ComparisonComponentandDatasetShellComponent, which have zero dependencies on the config API. - Admin View:
ConfigWorkspaceService(used by the Admin UI) does attempt to contact/api/config. However, this service and module are only active when the user explicitly navigates to/admin/config.
- Public View: Uses
- Routing: The default route points to
DatasetShellComponent, ensuring regular users never trigger the admin API calls.
To deploy the application statically:
-
Build: Run the production build command.
npm run build:prod
This will generate the static artifacts in
dist/. -
Hosting: Upload the contents of the
dist/directory to any static file server. -
Caveat: The
/admin/configroute will not function in this environment, as it requires the local Node.js backend (config-workspace). This is expected behavior and does not impact the public comparison view.