Netlify Deployment
Relevant source files
The following files were used as context for generating this wiki page:
The SuperClaude Website utilizes Netlify as its primary hosting and serverless compute platform. The deployment infrastructure manages the static asset hosting for the React-based frontend, handles client-side routing redirects, and provides a serverless execution environment for backend logic via Netlify Functions.
The deployment process is integrated with the project's build lifecycle, ensuring that documentation maps are generated and external resources are fetched before the site is bundled and published to the Netlify CDN.
Sources: netlify.toml:1-12, package.json:30-35, README.md:1-24
Build Configuration
Netlify is configured via the netlify.toml file located in the project root. This file defines the build commands and the directory containing the deployable assets.
Build Settings
The build process executes npm run build, which triggers a sequence of pre-build scripts to prepare documentation and maps. The resulting production assets are stored in the build directory for publishing.
Sources: netlify.toml:1-3, package.json:30-35
Development Environment
For local development, the Netlify CLI mimics the production environment by running npm start on port 3000.
Sources: netlify.toml:5-7
| Key | Value | Description |
|---|---|---|
| Build Command | npm run build | Compiles the React application for production. |
| Publish Directory | build | The folder containing the final static assets. |
| Dev Command | npm start | Command used for local development. |
| Dev Port | 3000 | The local port for the development server. |
| Sources: netlify.toml:1-7 |
Routing and Redirects
To support the React Router's client-side navigation (Single Page Application architecture), a wildcard redirect rule is implemented. This ensures that any request to a path (e.g., /docs or /about) that does not match a static file is redirected to index.html with a 200 status code, allowing the frontend router to handle the request.
Sources: netlify.toml:9-12, App.js:23-30
The diagram shows how Netlify handles incoming requests to ensure client-side routes are preserved.
Sources: netlify.toml:9-12, src/App.js:25-27
Netlify Functions
The project employs Netlify Functions to handle dynamic server-side operations that cannot be performed in the browser, such as interacting with the GitHub API while maintaining an in-memory cache.
Contributors Function
The get-contributors function fetches contributor data from two repositories: SuperClaude_Framework and SuperClaude_Website. It aggregates data, filters out specific excluded users, and fetches detailed user profiles.
Sources: netlify/functions/get-contributors.js:15-80
Caching Strategy
The function implements an in-memory cache to stay within GitHub API rate limits. Data is cached for 12 hours (43,200,000 milliseconds).
Sources: netlify/functions/get-contributors.js:1-8
This sequence illustrates the flow of data between the React frontend and the serverless Netlify function, including the caching logic.
Sources: netlify/functions/get-contributors.js:10-104, src/pages/ContributorsPage.js:13-25
Build Lifecycle Integration
The deployment success relies on the prebuild script defined in package.json. This script ensures that documentation is synced and the docs-map.json (required for routing and sidebar generation) is current before Netlify finishes the build.
Sources: package.json:32, scripts/generate-docs-map.js:1-51
# Executed by Netlify during build
npm run build
# Triggers:
# 1. node scripts/fetch-docs.mjs
# 2. node scripts/generate-docs-map.js
# 3. react-scripts build
Sources: package.json:31-33
Conclusion
Netlify Deployment for the SuperClaude Website provides a robust environment for both static content and dynamic serverless logic. By configuring explicit redirects and leveraging serverless functions for API aggregation and caching, the system maintains high performance while managing complex documentation structures and contributor data.