Imported from master8848/rspfx (skills/rspfx/SKILL.md). Install upstream with npx skills add master8848/rspfx --skill rspfx. Copyright stays with the author.

RSPFx — Fast SPFx Toolchain

Builds sharepoint/solution/*.sppkg without Heft/webpack/gulp. Vite is the default bundler.

Supports SPFx 1.20, 1.21, 1.22, 1.23, 1.24 (default 1.23), Node 20+, React/Vue/Solid and more.

Any other framework works via FrameworkPreset — see docs/custom-framework.md.

Docs: https://rspfx.mbsks.me · Repo: https://github.com/master8848/rspfx

Install

npm i -g @mbsks/rspfx-cli   # or pnpm add -g / yarn global add / bun add -g / deno install -g
rspfx --version
rspfx --help

New project — plugin-first

RSPFx is a Vite/Rsbuild/Rspack plugin. Scaffold with your favorite starter, then add the plugin. Vite is default.

npm create vite@latest my-app -- --template react-ts   # or pnpm create vite@latest / yarn create vite@latest / bun create vite@latest / deno run -A npm:create-vite@latest
cd my-app
npm i -D @mbsks/rspfx-plugin @mbsks/rspfx-cli           # or pnpm add -D / yarn add -D / bun add -D / deno add -D

Add to vite.config.ts:

import { defineConfig } from 'vite';
import { rspfxVite } from '@mbsks/rspfx-plugin';
export default defineConfig({ plugins: [rspfxVite({ name: 'my-app', framework: 'react', spfxVersion: '1.24' })] });

Then create src/webparts/<name>/*.manifest.json + config/package-solution.json (see docs/project-structure.md).

Other starters: better-t-stack, TanStack Router, create-rsbuild, etc. — same plugin pattern: rspfxVite for Vite, rspfxRsbuild for Rsbuild, RSpfxPlugin for Rspack. No extra code needed; RSPFx already supports all three. See docs/getting-started.md, docs/commands.md#bundler-plugin, docs/frameworks.md.

Shortcut: rspfx new my-app --yes (also rspfx new my-app --framework react --spfx-version 1.24 --yes) scaffolds Vite + manifests + git init for you. See docs/commands.md#rspfx-new-name for all flags (--framework, --language, --spfx-version, --pm, --component, --bundler vite|rsbuild|rspack).

Existing project — try without migrating (recommended)

Lean-first: run rspfx dev:vite — it auto-detects spfxVersion/framework, installs @mbsks/rspfx-plugin-dev + vite, and scaffolds vite.config.ts with rspfxViteDev (no @rspack/core). Start with npm run dev:vite. Manual alternative: vite.config.ts with rspfxVite({ devTryMode: true, tryComponents }) from @mbsks/rspfx-plugin, then rspfx dev. See docs/guide/try-mode.md.

One file vite.config.ts with devTryMode: true and two installs. Keeps gulp serve for production — no migration needed to try.

cd my-existing-spfx-app
npm i -D @mbsks/rspfx-plugin @mbsks/rspfx-cli   # or pnpm add -D / yarn add -D / bun add -D / deno add -D

Create vite.config.ts:

import { defineConfig } from 'vite';
import { rspfxVite } from '@mbsks/rspfx-plugin';
export default defineConfig({ plugins: [rspfxVite({ name: 'my-project', framework: 'react', spfxVersion: '1.24', devTryMode: true, tryComponents: [{ name: 'hello-world' }] })] });

Then rspfx dev — http://localhost:4321. Delete vite.config.ts to revert. See docs/guide/try-mode.md.

Migrate fully only when ready: rspfx migrate --dry-run then rspfx migrate then bun install. Commit before migrating. See docs/migrating-from-gulp-heft.md.

Develop and build

rspfx dev                                            # http://localhost:4321
rspfx dev --tenant https://contoso.sharepoint.com    # or rspfx dev --tenant https://contoso.sharepoint.com
rspfx build; rspfx package                           # → sharepoint/solution/*.sppkg
rspfx doctor; rspfx doctor --fix                     # validate env + cert

Dev server is on :4321.

Set tenant in vite.config.ts (dev.tenantUrl), via --tenant, or SPFX_SERVE_TENANT_DOMAIN env var.

See docs/getting-started.md and docs/commands.md.

No @microsoft/sp-* install needed — spfxVersion externalizes them.

Configuration — plugin for any starter

Vite is default (most popular). Any Vite starter works — create-vite, better-t-stack, TanStack Router — just add rspfxVite().

import { defineConfig } from 'vite';
import { rspfxVite } from '@mbsks/rspfx-plugin';
export default defineConfig({
  plugins: [rspfxVite({ name: 'my-app', framework: 'react', spfxVersion: '1.24' })],
});

Rsbuild (rspfxRsbuild in rsbuild.config.ts) and Rspack (RSpfxPlugin in rspack.config.ts) are also supported — same options, same manifests. See docs/commands.md#bundler-plugin, docs/getting-started.md, docs/frameworks.md. No extra codebase changes needed — packages/plugin/src/vite.ts, packages/plugin/src/rsbuild.ts, packages/plugin/src/rspack.ts already ship all three.

Styling

SPFx requires CSS bundled into JS.

bun add -D sass   # or pnpm add -D sass / npm i -D sass / yarn add -D sass / deno add -D npm:sass

Then import *.scss/*.css directly. See docs/styling.md.

Query lists

bun add @pnp/sp @pnp/graph   # or pnpm add / npm i / yarn add / deno add

In onInit: spfi().using(SPFx(this.context)), then sp.web.lists.getByTitle("MyList").items().

See https://pnp.github.io/pnpjs/

Teams, multi-webpart, assets

One .sppkg syncs teams/manifest.json for Teams/Outlook.

Multi-webpart: duplicate src/webparts/<name>/ with a new id in *.manifest.json — see docs/multi-webpart.md.

Tips

• 404 on dev → config/config.json bundle key doesn't match src/webparts/<name>/ folder.
• Share tenant across projects: export SPFX_SERVE_TENANT_DOMAIN=https://contoso.sharepoint.com in ~/.zshrc.