Multiframework Recipes

A 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.

This 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.

Learn more: Read the Salesforce Multi-Framework developer guide for a comprehensive overview.

Table of Contents

• Multi-Framework Recipes
• Micro-Frontend Recipes
• Prerequisites
• Setting up a Scratch Org
• Optional Installation Instructions

Multi-Framework Recipes

App	Framework	README
React Recipes	React	README
Angular Recipes	Angular	README

Micro-Frontend Recipes

Micro-Frontend Recipes demonstrates how to embed an externally hosted app inside a Lightning page and exchange data and events over the Platform SDK.

It deploys with everything else below. Its guests are served from your machine, so it needs one extra step — see Running the guest server.

Prerequisites

1. Set up your environment. Follow the steps in the Quick Start: Lightning Web Components Trailhead project. The steps include:

   • Enable Dev Hub in your Trailhead Playground
   • Install Salesforce CLI
   • Install Visual Studio Code
   • Install the Visual Studio Code Salesforce extensions

2. Make sure you have Node.js v22+ and npm installed.

3. Make sure you have Salesforce CLI v2.130.7+ installed. This version includes the UI Bundle plugin. Check your version with sf --version and update with sf update if needed.

Setting up a Scratch Org

These steps deploy the shared metadata and all three recipe apps — React, Angular, and Micro-Frontend — as a single project. The per-app READMEs cover local development and testing only.

1. If you haven't already done so, authorize your hub org and provide it with an alias (myhuborg in the command below):

   sf org login web -d -a myhuborg

2. Clone this repository:

   git clone https://github.com/trailheadapps/multiframework-recipes
   cd multiframework-recipes

3. Create a scratch org and provide it with an alias (recipes in the command below):

   sf org create scratch -d -f config/project-scratch-def.json -a recipes

4. Install dependencies and build the apps (builds both the React and Angular UI bundles):

   npm run install:all
   npm run build

5. Deploy the metadata and all UI bundles:

   sf project deploy start --source-dir force-app

6. Assign the Recipes (All Frameworks) permission set group to the default user. It bundles the shared recipes set with the React, Angular, and Micro-Frontend sets:

   sf org assign permset -n recipesAll

   If this fails with "You can only assign users to permission set groups that have the 'Updated' status", the group is still recalculating after the deploy. Wait a few seconds and run the command again.

7. Import sample data:

   sf data tree import -p ./data/data-plan.json

8. Open the org and pick any of the React Recipes, Angular Recipes, or Micro-Frontend Recipes apps in App Launcher:

   Micro-Frontend Recipes embeds guests from http://localhost:5173, so start a guest dev server first — see Running the guest server.

   sf org open

Optional Installation Instructions

This 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.

Code formatting

Prettier is a code formatter used to ensure consistent formatting across your code base. To use Prettier with Visual Studio Code, install this extension from the Visual Studio Code Marketplace. The .prettierignore and .prettierrc files are provided as part of this repository to control the behavior of the Prettier formatter.

Code linting

ESLint is a popular JavaScript linting tool used to identify stylistic errors and erroneous constructs. The apps use ESLint with TypeScript and framework-specific plugins.

Pre-commit hook

This repository comes with a 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.

To set up the formatting and linting pre-commit hook:

1. Install Node.js if you haven't already done so.
2. Run npm install in your project's root folder to install the ESLint and Prettier modules.

Prettier 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 for the full list):

npm run lint