| .. | ||
| .husky | ||
| config | ||
| force-app/main/default | ||
| scripts | ||
| .forceignore | ||
| .prettierignore | ||
| .prettierrc | ||
| .version | ||
| AGENT.md | ||
| CHANGELOG.md | ||
| eslint.config.js | ||
| jest.config.js | ||
| LICENSE.txt | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| sfdx-project.json | ||
Property Management App
A property management sample React UI Bundle for the Salesforce platform. Demonstrates property management, maintenance requests, tenant applications, a dashboard, and an Agentforce conversation client. Built with React, Vite, TypeScript, and Tailwind/shadcn.
Table of Contents
- What's Included
- Prerequisites
- Quick Start (Automated)
- Step-by-Step Setup
- Local Development
- Resources
What's Included
| Path | Description |
|---|---|
force-app/main/default/uiBundles/propertymanagementapp/ |
React UI Bundle (source, config, tests) |
force-app/main/default/objects/ |
17 custom objects — Agent__c, Application__c, KPI_Snapshot__c, Lease__c, Maintenance_Request__c, Maintenance_Worker__c, Notification__c, Payment__c, Property__c, Property_Cost__c, Property_Feature__c, Property_Image__c, Property_Listing__c, Property_Management_Company__c, Property_Owner__c, Property_Sale__c, Tenant__c |
force-app/main/default/layouts/ |
Page layouts for each custom object |
force-app/main/default/permissionsets/ |
Property_Management_Access permission set — full CRUD access to all custom objects |
force-app/main/default/data/ |
Sample data (JSON) for all objects, importable via sf data import tree |
Prerequisites
Before you begin, ensure the following are in place.
| Tool | Minimum Version | Install |
|---|---|---|
Salesforce CLI (sf) |
v2+ | npm install -g @salesforce/cli |
| Node.js | v22+ | nodejs.org |
| Git | Any recent version | git-scm.com |
Verify your Salesforce CLI version with:
sf --version
Quick Start (Automated)
Two npm scripts at the project root streamline getting started and deployment.
npm run sf-project-setup — installs the UI Bundle dependencies, builds the app, and starts the dev server (see Local Development).
npm run setup — automates the full setup: login, deploy metadata, assign permission sets, import sample data, fetch the GraphQL schema, run codegen, build the UI Bundle, and optionally launch the dev server:
npm run setup -- --target-org <alias>
Replace <alias> with your target org alias or username. Running without flags presents an interactive step picker. Pass --yes to skip it and run all steps immediately:
npm run setup -- --target-org <alias> --yes
Common Options
| Option | Description |
|---|---|
--skip-login |
Skip browser login (auto-skipped if org is already connected) |
--skip-deploy |
Skip the metadata deploy step |
--skip-permset |
Skip permission set assignment |
--skip-data |
Skip data preparation and import |
--skip-graphql |
Skip GraphQL schema fetch and codegen |
--skip-ui-bundle-build |
Skip npm install and UI Bundle build |
--skip-dev |
Do not launch the dev server at the end |
--permset-name <name> |
Assign only a specific permission set (repeatable). Default: all sets in the project |
--ui-bundle-name <name> |
UI Bundle folder name under uiBundles/ (default: auto-detected) |
-y, --yes |
Skip interactive step picker and run all enabled steps immediately |
For a full list of options:
npm run setup -- --help
Step-by-Step Setup
Use this section if you prefer to run each step manually, or if the automated script is not available.
1. Install Dependencies
Install root-level project dependencies:
npm install
Install the UI Bundle dependencies and build it:
cd force-app/main/default/uiBundles/propertymanagementapp
npm install
npm run build
cd -
This produces the static bundle artifacts that are packaged into the Salesforce metadata. Having them built now means any deploy option in Step 3 is ready to run without an additional build step.
2. Authenticate Your Org
Log in to your target org using the Salesforce CLI. This opens a browser window for OAuth authentication:
sf org login web --alias <alias>
To verify the login was successful:
sf org display --target-org <alias>
If you are working with a sandbox, use:
sf org login web --alias <alias> --instance-url https://test.salesforce.com
3. Deploy Metadata
Option A: Deploy Everything (metadata + UI Bundle)
Build the UI Bundle first, then deploy all source in a single command:
cd force-app/main/default/uiBundles/propertymanagementapp && npm run build && cd -
sf project deploy start --source-dir force-app --target-org <alias>
Option B: Deploy Metadata Only (objects, layouts, permission sets)
sf project deploy start \
--source-dir force-app/main/default/objects \
--source-dir force-app/main/default/layouts \
--source-dir force-app/main/default/permissionsets \
--target-org <alias>
Option C: Deploy the UI Bundle Only
cd force-app/main/default/uiBundles/propertymanagementapp && npm run build && cd -
sf project deploy start --source-dir force-app/main/default/uiBundles --target-org <alias>
Replace <alias> with your target org alias.
4. Assign Permission Set
After deploying the metadata, assign the Property_Management_Access permission set to grant access to the custom objects and fields:
sf org assign permset --name Property_Management_Access --target-org <alias>
To assign to a specific user:
sf org assign permset --name Property_Management_Access --on-behalf-of <username> --target-org <alias>
Replace <alias> with your target org alias.
5. Import Sample Data
Once the metadata has been successfully deployed:
sf data import tree --plan force-app/main/default/data/data-plan.json --target-org <alias>
The data plan imports records in dependency order: Contacts, Agents, Maintenance Workers, Properties, Tenants, Applications, Maintenance Requests, Notifications, Property Management Companies, Property Owners, Leases, Property Sales, Property Costs, Payments, KPI Snapshots, Property Listings, Property Images, and Property Features.
Note: If you re-run the import, duplicate records will be created. Wipe existing records first or use the
--upsertflag if your plan supports it.
6. Generate GraphQL Types
After metadata is deployed, generate the GraphQL schema and TypeScript types for the UI Bundle. These are used to provide type-safe queries against the Salesforce GraphQL API.
cd force-app/main/default/uiBundles/propertymanagementapp
npm run graphql:schema # Fetches schema from org → outputs schema.graphql
npm run graphql:codegen # Generates TypeScript types → updates src/api/graphql-operations-types.ts
cd -
Prerequisite: The org must be authenticated and metadata must already be deployed before running these commands, as the schema is generated from the org's live metadata.
7. Rebuild the UI Bundle
Step 6 updates the generated GraphQL types in the UI Bundle source. Rebuild the app to compile those changes into the bundle before deploying:
cd force-app/main/default/uiBundles/propertymanagementapp
npm run build
cd -
8. Deploy the UI Bundle
Once the build is complete, deploy the UI Bundle to your org:
sf project deploy start --source-dir force-app/main/default/uiBundles --target-org <alias>
Local Development
Install project dependencies and start the dev server:
npm install
npm run sf-project-setup
This installs the UI Bundle dependencies, builds the app, and opens the dev server at http://localhost:5173. For manual build and test instructions, see the UI Bundle README.