92cae58d5f
* chore: rename webapp-template packages to ui-bundle-template * chore: sync React b2e and b2x samples from npm @1.117.3 * chore: rename sample folders to match ui-bundle-template package names * chore: sync React b2e and b2x samples from npm @1.117.5 * chore: remove accidental trace.md from b2e sample * chore: keep old webapp-template sample directories alongside new ui-bundle-template ones * chore: revert component.md change from skills/generating-webapplication-ui * chore: update ui-bundle-template sample versions to 1.117.5
9.5 KiB
Property Rental App
A property rental sample React UI Bundle for Salesforce Experience Cloud. Demonstrates property listings, maintenance requests, and a dashboard with an app shell designed for external-facing deployment. Built with React, Vite, TypeScript, and Tailwind/shadcn.
What's included
| Path | Description |
|---|---|
force-app/main/default/uiBundles/propertyrentalapp/ |
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 |
force-app/main/default/classes/ |
Apex classes — MaintenanceRequestListAction, MaintenanceRequestUpdatePriorityAction |
force-app/main/default/cspTrustedSites/ |
CSP trusted sites for external resources (Google Fonts, Pexels, Unsplash, GitHub Avatars) |
force-app/main/default/data/ |
Sample data (JSON) for all objects, importable via sf data import tree |
force-app/main/default/digitalExperienceConfigs/ |
Experience Cloud site configuration |
force-app/main/default/digitalExperiences/ |
Experience Cloud site definition |
force-app/main/default/networks/ |
Experience Cloud network |
force-app/main/default/sites/ |
Salesforce site |
Getting started
Navigate to the UI Bundle and install dependencies:
cd force-app/main/default/uiBundles/propertyrentalapp
npm install
npm run dev
Opens at http://localhost:5173 by default. For build and test instructions, see the UI Bundle README.
Deploy
Deploy everything (metadata + Experience Cloud site + UI Bundle)
cd force-app/main/default/uiBundles/propertyrentalapp && npm install && npm run build && cd -
sf project deploy start --source-dir force-app --target-org <alias>
Deploy the UI Bundle only
cd force-app/main/default/uiBundles/propertyrentalapp && npm install && npm run build && cd -
sf project deploy start --source-dir force-app/main/default/ui-bundles --target-org <alias>
Deploy metadata only (objects, layouts, permission sets, Apex classes)
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 \
--source-dir force-app/main/default/classes \
--target-org <alias>
Deploy Experience Cloud site only
sf project deploy start \
--source-dir force-app/main/default/digitalExperienceConfigs \
--source-dir force-app/main/default/digitalExperiences \
--source-dir force-app/main/default/networks \
--source-dir force-app/main/default/sites \
--target-org <alias>
Replace <alias> with your target org alias.
Import sample data
sf data import tree --plan force-app/main/default/data/data-plan.json --target-org <alias>
Using setup-cli.mjs
When this app is built (e.g. from the monorepo or from a published package), a setup-cli.mjs script is included at the project root. It runs the full setup in one go: login (if needed), deploy metadata, assign the Property_Management_Access permission set, prepare and import sample data, fetch GraphQL schema and run codegen, build the UI Bundle, and optionally start the dev server.
Run from the project root (the directory that contains force-app/, sfdx-project.json, and setup-cli.mjs):
node setup-cli.mjs --target-org <alias>
Common options:
| Option | Description |
|---|---|
--skip-login |
Skip browser login (org already authenticated) |
--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 start the dev server at the end |
--permset <name> |
Permission set to assign (default: Property_Management_Access) |
--app <name> |
Web app folder name when multiple exist |
For all options: node setup-cli.mjs --help.
Configure Your Salesforce DX Project
The sfdx-project.json file contains useful configuration information for your project. See Salesforce DX Project Configuration in the Salesforce DX Developer Guide for details about this file.