Microsoft Graph
Graph access depends on API availability, tenant configuration, delegated or application permissions, consent, and security requirements.
SPFx
Microsoft Graph
Microsoft 365
SharePoint Framework engineering
SPFx Development Services
Build, modernize, integrate, and support SharePoint Online solutions using SharePoint Framework, React, TypeScript, Microsoft Graph, PnPjs, and modern Microsoft 365 development practices.
USER
SharePoint / Microsoft Teams
SPFx
Microsoft Graph / SharePoint REST / PnPjs / APIs
Microsoft 365 & Business Systems
What We Can Build
SPFx is strongest when SharePoint needs production-grade custom UI, supported extensions, Microsoft 365 integrations, or reusable components. Not every business application should be implemented in SPFx.
Custom SPFx Web Parts
Application Customizers
ListView Command Sets
SharePoint Extensions
Microsoft Graph Integrations
SharePoint REST Integrations
External API Integrations
Dashboard Experiences
Employee Portals
Business Applications
Custom Search Experiences
SharePoint Productivity Components
Microsoft Teams-integrated SPFx experiences where appropriate
Custom web part development
React, TypeScript, Fluent UI, and SharePoint Data
Custom web parts should be configurable, responsive, accessible, performant, and maintainable after launch.
SharePoint Page
SPFx Web Part
Business Logic
SharePoint / Graph / API
Business Data
React-based web parts
TypeScript
Fluent UI
Responsive design
SharePoint data
Microsoft Graph
PnPjs
REST APIs
Property panes
Configuration
Localization where required
Accessibility
Performance
Reusable components
SPFx Extensions
Extensions can support targeted SharePoint customization such as page-level experiences, commands, and contextual actions. They should be used for appropriate scenarios, not as a universal customization mechanism.
Application Customizers
ListView Command Sets
Field Customizers where appropriate
Page-level experiences
Navigation enhancements
Contextual actions
List/library experiences
Microsoft 365 and API Integrations
PnPjs / SharePoint REST
Implementation choice depends on API requirements, authorization, maintainability, and the shape of SharePoint data.
SPFx
PnPjs / SharePoint REST
SharePoint Data
External APIs
Secrets, API keys, and credentials should not be exposed in browser-side SPFx code. Use a secure API layer when the architecture requires it.
SharePoint
SPFx
Secure API Layer
Business System
Users
Groups
SharePoint
Teams
OneDrive
Calendars
Profiles
Files
Directory information
Sites
Lists
Libraries
Files
Metadata
Permissions where APIs and authorization permit
CRM
ERP
HR systems
Internal APIs
Azure services
Line-of-business applications
Third-party platforms
Authentication
Authorization
CORS
Secrets
API permissions
Rate limits
Error handling
Environment configuration
Legacy JavaScript modernization
Modernize Only What Still Has Business Value
Script Editor, Content Editor, jQuery, and hard-coded custom scripts should be assessed before rebuilding. Some functionality may now exist natively in SharePoint or Microsoft 365.
Related service: SharePoint Modernization Services.
Legacy
Script Editor
Content Editor
jQuery
DOM manipulation
Custom JavaScript
Hard-coded URLs
Legacy libraries
Modern
Native SharePoint
SPFx
React
TypeScript
Microsoft Graph
Power Platform where appropriate
LEGACY
ASSESS
DECIDE: Retain / Replace / Modernize / Rebuild / Retire
MODERN
SPFx During SharePoint Migration
Customizations should be assessed separately from content migration. Script dependencies, old REST patterns, tenant-specific values, branding, navigation, integrations, and authentication changes can affect the target design.
Legacy SharePoint
Migration Assessment
Customization Inventory
SPFx Modernization
SharePoint Online
Script Editor replacements
Legacy web parts
Custom JavaScript
Tenant-specific URLs
Old REST patterns
Custom branding
Custom navigation
Third-party integrations
Hard-coded IDs
Authentication changes
SPFx Solution Architecture
USER
SHAREPOINT ONLINE / TEAMS
SPFx Presentation Layer: React / Fluent UI / TypeScript
Service Layer: PnPjs / SharePoint REST / Microsoft Graph / Custom APIs
DATA & SERVICES: SharePoint / Microsoft 365 / Azure / Business Systems
Cross-Cutting Concerns
Production SPFx work includes more than UI. Authentication, configuration, reliability, accessibility, and release management need to be designed explicitly.
Authentication
Authorization
Configuration
Error Handling
Logging
Accessibility
Performance
ALM
Security
SPFx executes in the user’s browser context, so security boundaries and API authorization must be designed explicitly. Do not place secrets in client-side code.
Least privilege
Microsoft Graph permissions
SharePoint permissions
API permissions
Delegated access
Secure API architecture
Secret management
Input validation
Output encoding
Dependency management
Tenant configuration
External API security
Performance
Performance depends on SPFx code and downstream services. Keep bundles lean, calls efficient, rendering controlled, and throttling in mind.
Bundle size
Lazy loading
Code splitting where appropriate
Efficient API calls
Caching where appropriate
Avoiding unnecessary dependencies
React rendering
Large-list considerations
Graph/API throttling awareness
Page-load impact
Accessibility
Accessible SPFx development uses semantic HTML, keyboard support, labels, focus management, contrast, and responsive behavior. Compliance certification requires a dedicated audit.
Semantic HTML
Keyboard navigation
Focus management
Accessible labels
Color contrast
Screen-reader support
Responsive behavior
Fluent UI accessibility
WCAG-oriented development practices where applicable
SPFx Upgrades
Existing SPFx solutions may need dependency, build-tool, React, Fluent UI, Graph, PnPjs, Node.js, or security remediation. Not every old solution can be upgraded without code changes.
Existing SPFx Solution
Technical Assessment
Dependency Review
Upgrade Plan
Code Remediation
Testing
Deployment
Old SPFx versions
Deprecated packages
Node.js compatibility
React compatibility
PnPjs upgrades
Fluent UI changes
Microsoft Graph changes
Build-tool changes
Security vulnerabilities
Dependency updates
API changes
SPFx Troubleshooting
Troubleshooting focuses on reproducing the issue, isolating the failure, fixing the root cause, and validating in the target environment.
Issue
Reproduce
Diagnose
Fix
Test
Deploy
Validate
Build failures
Deployment issues
App Catalog problems
Web part loading issues
API permission issues
Graph errors
REST errors
Authentication issues
Performance issues
React errors
Package/dependency problems
Environment-specific failures
Production-only issues
SPFx technical assessment
Need a Code Review or Modernization Roadmap?
Assessment output focuses on findings, risks, recommended changes, and a practical modernization roadmap.
Architecture
Code structure
Dependencies
Security
Graph/API usage
Performance
Accessibility
Error handling
Configuration
Deployment
Maintainability
Upgrade readiness
Technical debt
Findings
Risks
Recommended Changes
Modernization Roadmap
When to Use SPFx
Use SPFx when it is the right architecture, not simply because custom code is possible. Native SharePoint, Power Apps, Power Automate, Microsoft Teams, Azure, or a custom application may be a better fit depending on the requirement.
Development Process
01
Discover
Clarify business goals, users, current constraints, and support expectations.
02
Define
Translate requirements into a practical scope, acceptance criteria, and dependencies.
03
Architect
Choose SPFx, Graph, REST, PnPjs, APIs, Power Platform, or native SharePoint where they fit.
04
Prototype
Validate key UX, data, permission, and integration assumptions early.
05
Develop
Build with React, TypeScript, Fluent UI, maintainable components, and clear configuration.
06
Test
Check behavior, permissions, browsers, responsiveness, accessibility, and API failure paths.
07
Secure
Review permissions, inputs, outputs, dependencies, and API authorization boundaries.
08
Deploy
Package, version, release, and document the solution using the appropriate app catalog model.
09
Validate
Confirm the deployed solution works for business users in the target environment.
10
Support
Plan maintenance, upgrades, fixes, documentation, and knowledge transfer.
ALM & Deployment
Source control
Environment configuration
Development/test/production separation
App Catalog
Tenant App Catalog
Site Collection App Catalog where applicable
API permissions
Versioning
Release management
CI/CD where appropriate
Rollback planning
Documentation
Testing
Functional testing
Responsive testing
Browser testing
Permission testing
API failure testing
Accessibility testing
Performance testing
User acceptance testing
Production validation
Support & Maintenance
Bug fixes
Dependency updates
SPFx upgrades
Performance improvements
Security remediation
New features
Microsoft 365 API changes
Technical debt
Documentation
Knowledge transfer
Who This Service Is For
Organizations that need custom SharePoint Online functionality
Organizations that need SPFx web parts
Organizations that need SharePoint extensions
Organizations that need Microsoft Graph integration
Organizations that need external API integration
Organizations that have legacy JavaScript
Organizations that are migrating legacy SharePoint customizations
Organizations that have outdated SPFx solutions
Organizations that need SPFx troubleshooting
Organizations that need code review
Organizations that need ongoing SharePoint engineering support
SPFx project enquiry
Discuss Your SPFx Requirement
Share the requirement, current environment, project stage, timeline, and context. Do not submit passwords, credentials, API keys, tenant secrets, or confidential source code through this form.
Related SPFx and SharePoint Resources
SharePoint Modernization ServicesSharePoint Migration ServicesSharePoint Migration AssessmentSharePoint Online MigrationSPFx complete guideSPFx React developer guideSPFx PnPjs developer guideSPFx Graph developer guideSPFx troubleshootingScript Editor to SPFx modernizationMicrosoft Graph APIPower Apps data source choicesPower Automate cloud flows
Frequently Asked Questions
What is SPFx?
SPFx is the SharePoint Framework, Microsoft’s supported model for building custom SharePoint web parts and extensions that can integrate with SharePoint, Microsoft Graph, Microsoft Teams, and approved APIs.
When should we use SPFx?
Use SPFx when the requirement needs deep SharePoint UI integration, reusable web parts, extensions, custom page experiences, or Microsoft 365 API integration that native SharePoint or Power Platform cannot satisfy cleanly.
Can SPFx replace Script Editor customizations?
Often, but not always. Script Editor solutions should be assessed first because some functionality can now be handled by native SharePoint or retired.
Can existing JavaScript be migrated to SPFx?
Yes, where the business value still exists and the code can be moved to a supported architecture with modern dependencies, permissions, configuration, and testing.
Can SPFx integrate with Microsoft Graph?
Yes, subject to API availability, tenant configuration, permissions, consent, and security requirements. Graph access is not unrestricted.
Can SPFx integrate with external APIs?
Yes, but secure architecture matters. Secrets and API keys should not be placed in browser-side SPFx code; a secure API layer is often needed.
Can SPFx solutions run in Microsoft Teams?
Some SPFx solutions can be exposed in Teams where the scenario and packaging model support it. The right approach depends on the user experience and deployment requirements.
Can old SPFx solutions be upgraded?
Many can be upgraded, but old packages, Node.js versions, React compatibility, PnPjs changes, and API changes may require code remediation.
How are SPFx solutions deployed?
SPFx solutions are packaged and deployed through an app catalog, with tenant or site collection app catalog choices depending on the governance and deployment model.
How are SPFx API permissions managed?
Graph and API permissions require explicit planning, approval, and tenant configuration. Permissions should follow least-privilege principles.
Can SPFx access SharePoint lists and libraries?
Yes, if the current user and APIs have the required authorization. Implementation may use PnPjs, SharePoint REST, Microsoft Graph, or another suitable API.
Is SPFx secure?
SPFx can be part of a secure architecture, but it runs in the user’s browser context. Security depends on permissions, API design, input handling, dependencies, and secret management.
SPFx vs Power Apps — which should we use?
SPFx fits deep SharePoint UI and pro-code component requirements. Power Apps may fit forms and business apps. The best choice depends on UX, data, licensing, governance, and maintainability.
How long does an SPFx project take?
Timeline depends on requirements, integrations, permissions, tenant readiness, UX complexity, testing, deployment model, and support needs.