Up next in 10
Build native React apps using the Salesforce Multi Framework
Apr 30, 2026
Show More Show Less
View Video Transcript
0:07
Hello everyone. In this video, we are
0:09
going to see how to build or develop
0:13
native React applications using the
0:16
Salesforce multi framework. Currently,
0:19
the Salesforce multi framework is in
0:22
beta.
0:23
So make sure you are aware of the beta
0:26
terms and conditions before you try out
0:28
uh this particular uh feature.
0:32
Before this Salesforce multi framework
0:35
in order to show or display a native
0:39
React application within Salesforce
0:42
we have to make use of canvas app or we
0:45
have to make use of I frame in a visual
0:49
force page or in a lightning aura
0:52
component or within Salesforce lightning
0:54
web component we make use of uh I frame
0:57
and then we display the react
0:59
application the canvas also Alo makes
1:02
use of a similar uh uh uh framework to
1:07
display the react application but with
1:10
the help of Salesforce multi uh multi
1:13
framework we can display the react
1:17
application which is natively built
1:20
within the Salesforce platform
1:23
instead of making use of iframe or
1:25
canvas app. In this video, I'm going to
1:29
show all the steps we have to follow so
1:32
that we can build a native React
1:35
application and then we can run it in
1:38
Salesforce platform.
1:44
The first step is go to Salesforce setup
1:46
and search for React development with
1:48
agent force wipes and Salesforce
1:50
multiframe. Currently, it is in beta. If
1:53
it is not beta just search with this uh
1:56
keyword.
1:58
So in Salesforce setup
2:01
I searched for react I I was able to
2:04
select that option and then I have
2:06
enabled Salesforce multi framework.
2:09
So this one is done.
2:11
Since it is in beta if you wanted to try
2:14
it out then make use of uh this
2:17
particular Salesforce uh post. If you
2:20
scroll to the bottom,
2:23
you should see
2:28
start your trial and then you have to
2:30
click try for free. If you try it, you
2:33
will get a Salesforce or and then you
2:36
should be able to do all the steps we
2:39
are going to cover in this video.
2:42
This particular uh
2:45
link is available in my Salesforce uh uh
2:48
blog post.
2:50
I will definitely share this sales uh my
2:53
blog post in the uh video description so
2:57
that you should be able to get this
2:59
particular link where you can make use
3:01
of start your trial and then you should
3:03
be able to try try it out.
3:09
So I was able to enable this. The next
3:11
step is uh okay the next step is we have
3:14
to turn on the Salesforce multif
3:15
framework. We we were able to do it.
3:17
Next we have to search for agent force
3:20
wipes extension in Salesforce setup and
3:22
then we have to confirm whether the
3:24
disable extension is toggled off. We it
3:28
this should be toggled off not toggled
3:30
on. So let's make sure
3:34
this particular uh setup is not toggled
3:39
on. Yeah, it is toggled off. So, we made
3:42
sure it is toggled off.
3:46
Next is uh we have to go to digital
3:49
experiences and then we have to enable
3:51
digital experiences. So, I have already
3:53
enabled it.
3:58
I was able to
4:03
Okay, I have already enabled digital
4:05
experiences and uh in the digital
4:09
experiences
4:11
if you go to the settings
4:14
I have enabled enable experience bundle
4:16
metadata API. So make sure this is
4:20
available uh so that the react app which
4:24
you are going to build can run in
4:27
Salesforce platform using the LW or
4:29
Salesforce lightning web runtime. Okay.
4:32
So make sure this is done. Once it is
4:35
done go to all sites just click new
4:40
and uh don't do any template selection.
4:44
If you click new
4:46
the dependent uh um apex classes, visual
4:50
force pages and other components will be
4:53
created within your Salesforce or so. So
4:56
that's the reason we have to click new
4:57
and then you can click just back to
4:59
setup and then you can just leave it. So
5:02
after enabling digital experiences
5:05
go to digital experience uh settings and
5:08
enable enable experience bundle metadata
5:11
API and then click the new button and
5:14
then click back to setup so that the
5:16
dependencies are created and set up in
5:18
your Salesforce.
5:22
Okay, next step is we have to go to MCP
5:25
servers in Salesforce setup and then we
5:28
have to activate Salesforce API context
5:30
and meta data experts MCP service. We
5:34
are going to enable this MCP service so
5:36
that we can build our uh uh application
5:40
and then we will be able to test it out
5:42
and then we will be able to deploy using
5:43
VS code. If you are using other ID like
5:47
cursor with the help of Salesforce uh um
5:50
extension then you then you have to
5:52
enable this to MCP servers. So let's go
5:56
to MCP servers in Salesforce setup.
6:06
I was able to activate these two. In
6:09
order to activate, you have to just
6:11
select the MCP server
6:13
and then you have to click activate
6:15
button.
6:21
Okay. So you have to make sure these two
6:25
MCP servers and metadata experts
6:27
Salesforce API context are active. Okay.
6:32
The next step is we have to create a
6:34
Salesforce project in VS code and then
6:37
we have to authorize it.
6:40
So I have already created the Salesforce
6:43
uh
6:44
uh project and then I have authorized
6:47
it.
6:49
Okay. Once uh it is done the next step
6:53
is we have to make sure these three MCP
6:56
servers are enabled.
6:59
When you do this step you you will see
7:01
some uh yellow icon or red icon. Make
7:04
sure you are refreshing your MCP server
7:06
so that it will toggle on. In order to
7:09
do that, select manage MCP servers and
7:12
then make sure these three are toggled
7:15
on and also all these three should be in
7:18
green. If you see in yellow or red,
7:21
click the refresh icon uh the restart
7:24
server um uh so that it will restart the
7:27
server. These three should be definitely
7:31
in green. And after that select manage
7:35
agent force rules, workflows, hooks and
7:37
skills. And then make sure all these
7:40
things are
7:43
active.
7:50
So the workflows
7:52
hooks there are nothing but the skills
7:56
should be enabled. Okay. Once this is
8:00
done,
8:03
okay, once this is done, next see the
8:06
next steps. Okay, now we have to run
8:09
this command agent for show welcome page
8:12
in your VS code. So you have to run this
8:16
command.
8:17
I'm using command shift P and then I
8:20
have to select show welcome page. Select
8:23
the react app. Use the create a project.
8:28
Here you can create an application for
8:30
internal users or external users. Select
8:33
it,
8:35
provide a name and then click create
8:38
project. It will create a new project in
8:40
your VS code and then it will open
8:43
within your VS code. Once you once the
8:46
newly created project is created. So
8:49
here I created a project called customer
8:51
management. It it is opened in my VS
8:54
code. Once this is opened, what we have
8:58
to do is
9:01
we have to
9:07
select the authorization which we have
9:10
done. So
9:12
by default it will show no uh default or
9:16
is set. So make sure you click that no
9:19
default or is set and then select the
9:22
Salesforce org or you can reauthorize it
9:26
again also the best option is try to
9:28
select the existing authorization so
9:30
that it will be easy for you to proceed
9:32
further. Okay, next is
9:36
okay. These things are done. Okay, when
9:39
uh you will see see a readme.md file.
9:43
You can go over all these uh content.
9:46
You can also try to add more information
9:48
to it based on your company standards
9:50
and policies.
9:52
Okay. So we have already selected the
9:55
authorization
9:58
and uh we have to again go to agent for
10:02
swipes and then we have to make sure the
10:06
servers are up and running. I definitely
10:09
had issues these two of uh these servers
10:13
were not running. I clicked restart
10:15
server so that the MCP servers again
10:19
started working. We al we also should
10:22
check whether the skills are enabled.
10:28
Okay. So these things are done now.
10:34
Okay. Now set your agent force wipes in
10:39
plan mode. The difference between plan
10:41
and actis. Plan means it will plan. This
10:45
is how I'm going to create an
10:47
application for you. These are all the
10:48
metadata that will be included. This is
10:50
how the application will behave. It will
10:53
give you a highlevel and brief
10:55
information how it is going to proceed.
10:58
If you are fine with uh the uh the with
11:00
the plan that is recommended by the
11:02
agent force wipes then you can click act
11:05
mode so that it will create the meta uh
11:08
metadata file and then it will uh have
11:11
everything in your local VS code in your
11:14
PC. it won't deploy anything to
11:16
Salesforce.
11:18
Okay. So now what you can do is I have
11:22
given this sample prompt vibe coding
11:26
prompt. You can make use of it. You can
11:28
uh tweak it or if you are very good in
11:31
prompting then um you can make use of
11:34
your prompt. You can ask uh here in the
11:38
plan mode hey can you create a native
11:40
react app uh for uh student registration
11:43
uh portal uh it can be multi-pages
11:47
multi-page application or it can be
11:49
single page application like that you
11:50
can give uh the commands here so this is
11:55
the simple uh prompt I have used I have
11:58
asked um the web coding agent to create
12:02
c um case management ment application in
12:05
the case management application they the
12:07
users should be able to enter a case
12:10
number so that they will be able to see
12:12
the status of it uh in this I have said
12:17
to make use of some mock data and I
12:20
don't want to connect it to the database
12:22
or uh use any API as of now so I have
12:26
given all this instruction so just copy
12:28
paste that information here so that it
12:31
will build uh sorry first it will give
12:34
you a plan because we are in plan mode.
12:37
Once you are done with all the
12:39
information whatever it it recommended
12:42
then you can uh select act mode. When
12:45
you click the act mode it will generate
12:47
the metadata and then it will store it
12:49
in your VS code.
12:52
Once the metadata are generated you will
12:55
see so many commands uh it will run. You
12:58
have to approve it. If you want to
12:59
understand each and every command then
13:01
you can make use of this readme.md file
13:04
to understand what is this command for.
13:07
Next if you are if you wanted to preview
13:10
the newly created uh react app then you
13:14
can make use of
13:22
sfdx open in live preview. So here
13:28
you I'm going to use command shift P and
13:32
then I can click open in live preview
13:34
and then I should be able to preview the
13:36
application directly. If you want to
13:39
test it, you can test it.
13:44
Okay. So if you wanted to quickly test
13:46
your application within VS Code, then
13:48
you can make use of this SFDX open in
13:52
live preview command. Okay. Once you you
13:55
have previewed once you are fine with
13:56
the application and then if you wanted
13:58
to deploy all the changes whatever you
14:00
have done so far then in this uh VS code
14:06
again go to agentforce wipes extension
14:09
sorry icon click that and then in the
14:12
type a message you can say please deploy
14:15
all the components to your Salesforce or
14:18
once you type it it will uh run sfdx
14:22
deploy metadata command and then it will
14:24
deploy it. If you go to deployment
14:27
status in Salesforce, you should be able
14:29
to see whether the components are
14:30
getting deployed. If you face any error,
14:33
the WBE also try to fix it. Um if there
14:36
are any manual steps that are required,
14:38
it will list out all the manual steps.
14:40
You have to do it in your Salesforce arc
14:42
so that the deployment can be
14:43
successful. So follow all the
14:46
instructions that are given by the agent
14:47
force wipes and then successfully deploy
14:50
the components. Once these components
14:53
are deployed, you should be able to see
14:58
how to test it. So here it's it told me
15:01
that I can test it
15:06
from my digital experience site. So I
15:08
have to go to customer management site
15:11
and then I have to test it. So I this is
15:16
my site which got uh deployed. The
15:19
framework is React and then it is in
15:22
beta as of now.
15:24
So this is my Salesforce experience
15:26
cloud site.
15:30
So I can test it out.
15:44
So the native react application is run
15:47
is uh running within Salesforce
15:49
platform.
15:52
So with the help of uh
15:56
Salesforce uh multi framework I was able
15:59
to successfully
16:02
create a native React application and
16:05
then I was able to run it in Salesforce
16:08
platform
16:09
with the help of agent force wipes. I
16:12
was able to give prompts so that I was
16:16
able to build an React application from
16:18
the scratch
16:20
without full coding instead of spending
16:22
hours and hours of uh development within
16:26
uh few minutes. I was able to build this
16:28
React uh application and then the React
16:32
application is successfully running in
16:33
my Salesforce uh platform with the help
16:37
of Salesforce multi framework. Please
16:39
note that it is in beta.
16:48
Please check the video description. In
16:50
the video description, I have shared my
16:52
blog post. From the blog post, you
16:54
should be able to get all the steps we
16:57
discussed in this video. And also, I
17:00
have shared the sample prompt which I
17:02
used it in the agent force extension,
17:06
wipes extension. Um I also shared the
17:09
reference articles which I have used it
17:13
uh and then with with the help of those
17:15
articles I was able to successfully uh
17:18
do this uh react application running in
17:21
Salesforce platform. So you can also
17:23
refer these uh articles for further
17:26
information.
17:35
I hope it was helpful.
17:43
Thank you for watching.
#Internet Software