Proof-of-concept SharePoint Framework (SPFx) web parts demonstrating development workflow and deployment process.
Simple demonstration project showcasing SPFx custom web part development for internal capability assessment. Contains three basic web parts (Hero Banner, Quick Links, Feature Cards) and complete documentation of environment setup, extension configuration, and deployment procedures.
This project validates Quadratic IT's ability to develop custom SharePoint web parts for client implementations. Prior to this demo, the Dev Team had no hands-on SPFx experience. This repository captures the learning process and establishes baseline documentation for future SharePoint development work.
Context:
- Client/Purpose: Internal capability development, ACLU FL future work
- Business Driver: Client requested custom intranet components beyond out-of-box SharePoint features
- Timeline: January 2025 proof-of-concept
Three standalone web parts demonstrating common intranet patterns: hero sections, navigation tiles, and feature cards. Built with pure HTML/CSS/JavaScript (no React) for simplicity and easy customization by clients.
| Layer | Technology | Version |
|---|---|---|
| Framework | SharePoint Framework | v1.22+ |
| Build Tool | Heft | Latest |
| Node Runtime | Node.js LTS | v22 |
| Development | TypeScript, SCSS | Latest |
| Deployment | SharePoint Online | N/A |
sharepoint-web-part/
├── 📂 demo-corp-intranet/ # Main SPFx solution
│ ├── src/
│ │ ├── assets/ # Graphics (hero images, icons)
│ │ └── webparts/
│ │ ├── heroBanner/ # Full-width hero section
│ │ ├── quickLinks/ # 3x2 navigation tile grid
│ │ └── featureCards/ # 3-column feature cards
│ ├── config/ # Build configuration
│ └── sharepoint/ # Package output (.sppkg)
├── 📂 project/ # Initial test project
└── 📄 README.md # This fileFull-width hero section with configurable background image, title, subtitle, and optional call-to-action button. Adjustable overlay opacity for text readability.
Grid of 6 colored navigation tiles (3 columns × 2 rows). Each tile configurable with icon, label, URL, and background color.
Three-column layout featuring cards with images, titles, descriptions, and "Learn more" links. Ideal for departmental highlights or service offerings.
- SPFx Development Environment Setup - Node.js, Heft, Yeoman scaffolding, dev certificate trust
- SPFx Toolkit Extension Configuration - VS Code extension, Entra app registration, tenant auth
- Deploy SPFx Solution to SharePoint - Package build, App Catalog upload, page creation
- Node.js v22 LTS installed
- Access to Microsoft 365 dev tenant (m365x29708118-admin.sharepoint.com)
- VS Code with SPFx Toolkit extension (optional but recommended)
# Install global tools
npm install -g @microsoft/generator-sharepoint yo
# Clone repository
git clone https://github.com/Quadratic-IT/sharepoint-web-part.git
cd sharepoint-web-part/demo-corp-intranet
# Install dependencies
npm install
# Trust development certificate
heft trust-dev-cert
# Configure tenant in config/serve.json
# Replace {tenantDomain} with m365x29708118-admin.sharepoint.com
# Start development server
heft start# Production build
heft clean
heft build --production
heft package-solution --production
# Output: sharepoint/solution/demo-corp-intranet.sppkg
# Upload to App Catalog via SharePoint Admin Center or SPFx Toolkit extension- Repository: Private (Quadratic IT members only)
- Dev Tenant Credentials: Available in Hudu
- No customer data in repository
- Graphics generated by AI (no licensed imagery)
Never commit: Environment files, API keys, tenant-specific configurations with credentials
Ownership:
- Primary: Dev Team
- Operations: N/A (development environment only)
Status: Proof-of-concept complete, no ongoing maintenance planned
This is a learning/demo repository. For production client implementations, fork this repo and customize web parts per client requirements.
Last Updated: January 13, 2025 | Status: Proof-of-Concept Complete