description: Use this skill when creating or setting up a new SFDX React web application. Covers first steps, npm install, skills-first protocol, deployment order, and core web app rules.
**Always run `npm install` before doing anything else** when working in a web app directory (e.g. `force-app/main/default/webapplications/<appName>/` or a dist app path). Dependencies must be installed before running `npm run dev`, `npm run build`, `npm run lint`, or any other script. If `node_modules` is missing or stale, commands will fail.
**Before writing any code or running any command**, search for relevant skills (`SKILL.md` files) that cover your task. Read the full skill and follow its instructions. Skills live in `.a4drules/skills/` and `feature/*/skills/`.
- Do not write custom scripts or complex bash commands for a workflow already covered by a loaded skill.
- Only proceed with manual execution after confirming no relevant skill exists.
# Deployment Order (MUST FOLLOW)
**Metadata deployments must complete before fetching GraphQL schema or running codegen.** The schema reflects the current org state; custom objects and fields appear only after metadata is deployed. Running schema fetch or codegen too early produces incomplete or incorrect types.
**Invoke the `deploying-to-salesforce` skill** (`.a4drules/skills/deploying-to-salesforce/`) whenever the task involves:
**Webapp name (`-n`):** Must be **alphanumerical only**—no spaces, hyphens, underscores, or special characters. Use only letters (A–Z, a–z) and digits (0–9). Example: `CoffeeBoutique` not `Coffee Boutique`.
```bash
sf webapp generate -n MyWebApp -t reactbasic
```
Do not use `create-react-app`, Vite, or other generic scaffolds; use `sf webapp generate` so the app is SFDX-aware.
## After Generation (MANDATORY)
After generating or when touching an existing app:
1.**Replace all default boilerplate** — "React App", "Vite + React", default `<title>`, placeholder text in shell. Use the actual app name.
2.**Populate the home page** — Never leave it as default template. Add real content: landing section, banners, hero, navigation to features.
3.**Update navigation and placeholders** — See [Navigation & Layout section](#navigation--layout-mandatory) below.
# Navigation & Layout (MANDATORY)
Agents consistently miss these. **You must not leave them default.**
## appLayout.tsx is the Source of Truth
- **Build navigation into the app layout** (`appLayout.tsx`). The layout must include nav (header, sidebar, or both) so every page shares the same shell.
Use a **single** router package. When using `createBrowserRouter` / `RouterProvider`, all imports MUST come from **`react-router`** — not `react-router-dom`.
## Component Library + Styling
- **shadcn/ui** for components: `import { Button } from '@/components/ui/button';`
- **Tailwind CSS** utility classes
## URL & Path Handling
Apps run behind dynamic base paths. Router navigation (`<Linkto>`, `navigate()`) prefer absolute paths (`/x`). Non-router attributes (`<imgsrc>`) use dot-relative (`./x`) to resolve against `<base>`. Prefer Vite `import` for static assets.
## Module Restrictions
React apps must NOT import Salesforce platform modules like `lightning/*` or `@wire` (LWC-only). For data access, invoke the **using-salesforce-data** skill.
**Never use complex `node -e` one-liners** for file edits or multi-line transforms. They break in Zsh due to `!` history expansion and backtick interpolation. Use a temporary `.js` file, `sed`/`awk`, `jq`, or IDE file-editing tools instead.
