{"id":49431965,"url":"https://github.com/trailheadapps/multiframework-recipes","last_synced_at":"2026-04-29T13:39:51.300Z","repository":{"id":351690949,"uuid":"1208000627","full_name":"trailheadapps/multiframework-recipes","owner":"trailheadapps","description":"A collection of easy-to-digest code examples for React on Salesforce Platform","archived":false,"fork":false,"pushed_at":"2026-04-16T03:16:07.000Z","size":1282,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-16T05:21:58.300Z","etag":null,"topics":["react","salesforce"],"latest_commit_sha":null,"homepage":"https://developer.salesforce.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trailheadapps.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":".github/SUPPORT.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-11T17:26:30.000Z","updated_at":"2026-04-16T03:58:36.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/trailheadapps/multiframework-recipes","commit_stats":null,"previous_names":["trailheadapps/multiframework-recipes"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/trailheadapps/multiframework-recipes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trailheadapps%2Fmultiframework-recipes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trailheadapps%2Fmultiframework-recipes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trailheadapps%2Fmultiframework-recipes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trailheadapps%2Fmultiframework-recipes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trailheadapps","download_url":"https://codeload.github.com/trailheadapps/multiframework-recipes/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trailheadapps%2Fmultiframework-recipes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32428374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T13:34:34.882Z","status":"ssl_error","status_checked_at":"2026-04-29T13:34:29.830Z","response_time":110,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","salesforce"],"created_at":"2026-04-29T13:39:50.422Z","updated_at":"2026-04-29T13:39:51.293Z","avatar_url":"https://github.com/trailheadapps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Multiframework Recipes\n\n[![CI](https://github.com/trailheadapps/multiframework-recipes/actions/workflows/ci.yml/badge.svg)](https://github.com/trailheadapps/multiframework-recipes/actions/workflows/ci.yml)\n[![codecov](https://codecov.io/gh/trailheadapps/multiframework-recipes/branch/main/graph/badge.svg)](https://codecov.io/gh/trailheadapps/multiframework-recipes)\n\n![React Recipes](force-app/main/react-recipes/uiBundles/reactRecipes/react-recipes.png)\n\nA collection of easy-to-digest code examples for building apps on the Salesforce platform using modern frontend frameworks. Each recipe demonstrates how to accomplish a specific task — from querying data with GraphQL to handling errors and navigating between views — in the fewest lines of code possible while following best practices. Each recipe includes an inline source code viewer so you can see exactly how it works.\n\nThis sample application is designed to run on the Salesforce Platform. It covers what a frontend developer needs to know about Salesforce, and what a Salesforce developer needs to know about modern frameworks — taught at the intersection.\n\n\u003e Multi-Framework currently supports **React**, with additional frameworks coming over time. The feature is in Beta and only available in Scratch Orgs and Sandboxes — not yet in Developer Edition orgs or Trailhead Playgrounds.\n\u003e\n\u003e There is a known limitation where orgs that do not use English (`en_US`) as the default language may experience issues. The scratch org definition in this project explicitly sets `\"language\": \"en_US\"` to work around this. If you are using a sandbox or other org type, ensure the default language is set to English.\n\n**Learn more:** Read the [Salesforce Multi-Framework developer guide](https://developer.salesforce.com/docs/platform/einstein-for-devs/guide/reactdev-overview.html) for a comprehensive overview.\n\n## Architecture\n\n```mermaid\ngraph LR\n    A[React App\u003cbr/\u003eVite + TypeScript] --\u003e|Build| B[UI Bundle]\n    B --\u003e|Deploy| C[Salesforce Org]\n    C --\u003e|Query| D[GraphQL UIAPI]\n    C --\u003e|Fetch| E[REST APIs]\n```\n\n## Table of Contents\n\n- [Setting up a Scratch Org](#setting-up-a-scratch-org)\n- [Setting up a Sandbox](#setting-up-a-sandbox)\n- [Developer Edition](#developer-edition)\n- [Install \u0026 Deploy React Recipes](#install--deploy-react-recipes)\n- [Local Development](#local-development)\n- [Testing](#testing)\n- [Optional installation instructions](#optional-installation-instructions)\n\n## Setting up a Scratch Org\n\n1. Set up your environment. Follow the steps in the [Quick Start: Lightning Web Components](https://trailhead.salesforce.com/content/learn/projects/quick-start-lightning-web-components/) Trailhead project. The steps include:\n   - Enable Dev Hub in your Trailhead Playground\n   - Install Salesforce CLI\n   - Install Visual Studio Code\n   - Install the Visual Studio Code Salesforce extensions\n\n1. Make sure you have **Node.js v22+** and **npm** installed.\n\n1. Install the ui-bundle-dev plugin:\n\n   ```bash\n   sf plugins install @salesforce/plugin-ui-bundle-dev\n   ```\n\n1. If you haven't already done so, authorize your hub org and provide it with an alias (**myhuborg** in the command below):\n\n   ```bash\n   sf org login web -d -a myhuborg\n   ```\n\n1. Clone this repository:\n\n   ```bash\n   git clone https://github.com/trailheadapps/multiframework-recipes\n   cd multiframework-recipes\n   ```\n\n1. Create a scratch org and provide it with an alias (**recipes** in the command below):\n\n   ```bash\n   sf org create scratch -d -f config/project-scratch-def.json -a recipes\n   ```\n\n1. Deploy shared metadata:\n\n   ```bash\n   sf project deploy start -d force-app/main/default/objects -d force-app/main/default/classes -d force-app/main/default/permissionsets -d force-app/main/default/cspTrustedSites\n   ```\n\n1. Assign the **recipes** permission set to the default user:\n\n   ```bash\n   sf org assign permset -n recipes\n   ```\n\n1. Import sample data:\n\n   ```bash\n   sf data tree import -p ./data/data-plan.json\n   ```\n\n## Setting up a Sandbox\n\n1. Set up your environment. Follow the steps in the [Quick Start: Lightning Web Components](https://trailhead.salesforce.com/content/learn/projects/quick-start-lightning-web-components/) Trailhead project. The steps include:\n   - Install Salesforce CLI\n   - Install Visual Studio Code\n   - Install the Visual Studio Code Salesforce extensions\n\n1. Make sure you have **Node.js v22+** and **npm** installed.\n\n1. Install the ui-bundle-dev plugin:\n\n   ```bash\n   sf plugins install @salesforce/plugin-ui-bundle-dev\n   ```\n\n1. Authorize your sandbox org and provide it with an alias (**mysandbox** in the command below):\n\n   ```bash\n   sf org login web -a mysandbox\n   ```\n\n1. Clone this repository:\n\n   ```bash\n   git clone https://github.com/trailheadapps/multiframework-recipes\n   cd multiframework-recipes\n   ```\n\n1. Deploy shared metadata:\n\n   ```bash\n   sf project deploy start -d force-app/main/default/objects -d force-app/main/default/classes -d force-app/main/default/permissionsets -d force-app/main/default/cspTrustedSites\n   ```\n\n1. Assign the **recipes** permission set to the default user:\n\n   ```bash\n   sf org assign permset -n recipes\n   ```\n\n1. Import sample data:\n\n   ```bash\n   sf data tree import -p ./data/data-plan.json\n   ```\n\n## Developer Edition\n\nDeveloper Edition support is coming soon.\n\n## Install \u0026 Deploy React Recipes\n\n1. Install dependencies, fetch the GraphQL schema, and run codegen:\n\n   ```bash\n   cd force-app/main/react-recipes/uiBundles/reactRecipes\n   npm install\n   npm run graphql:schema\n   npm run graphql:codegen\n   ```\n\n1. Build the app:\n\n   ```bash\n   npm run build\n   ```\n\n1. Deploy the UI bundle to your org:\n\n   ```bash\n   cd ../../../../..\n   sf project deploy start --source-dir force-app/main/react-recipes/uiBundles/reactRecipes\n   ```\n\n1. Open the scratch org and select the **React Recipes** app in App Launcher:\n\n   ```bash\n   sf org open\n   ```\n\n## Local Development\n\nStart the Vite development server with hot module replacement:\n\n```bash\nnpm run dev\n```\n\nBuild the app for production:\n\n```bash\nnpm run build\n```\n\nPreview the production build locally:\n\n```bash\nnpm run preview\n```\n\n## Testing\n\nRun unit tests ([Vitest](https://vitest.dev/) + [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)):\n\n```bash\nnpm test\n```\n\nRun with coverage:\n\n```bash\nnpm run test:coverage\n```\n\nRun end-to-end tests ([Playwright](https://playwright.dev/)):\n\n```bash\nnpx playwright install chromium\nnpm run build:e2e\nnpm run test:e2e\n```\n\n## Optional Installation Instructions\n\nThis repository contains several files that are relevant if you want to integrate modern web development tools into your Salesforce development processes or into your continuous integration/continuous deployment processes.\n\n### Code formatting\n\n[Prettier](https://prettier.io/) is a code formatter used to ensure consistent formatting across your code base. To use Prettier with Visual Studio Code, install [this extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) from the Visual Studio Code Marketplace. The [.prettierignore](/.prettierignore) and [.prettierrc](/.prettierrc) files are provided as part of this repository to control the behavior of the Prettier formatter.\n\n### Code linting\n\n[ESLint](https://eslint.org/) is a popular JavaScript linting tool used to identify stylistic errors and erroneous constructs. The apps use ESLint with TypeScript and framework-specific plugins.\n\n### Pre-commit hook\n\nThis repository comes with a [package.json](./package.json) file that makes it easy to set up a pre-commit hook that enforces code formatting and linting by running Prettier and ESLint every time you `git commit` changes.\n\nTo set up the formatting and linting pre-commit hook:\n\n1. Install [Node.js](https://nodejs.org) if you haven't already done so.\n1. Run `npm install` in your project's root folder to install the ESLint and Prettier modules.\n\nPrettier and ESLint will now run automatically every time you commit changes. The commit will fail if linting errors are detected. You can also run the formatting and linting from the command line using the following commands (check out [package.json](./package.json) for the full list):\n\n```bash\nnpm run lint\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrailheadapps%2Fmultiframework-recipes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrailheadapps%2Fmultiframework-recipes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrailheadapps%2Fmultiframework-recipes/lists"}