React Video Series
Video series on how to get started with Beefree SDK in a React application.
React Video Series
This video series includes the following tutorials:
Quickstart Guide: No-code Email Builder for Beefree SDK (Part 1)
This video walkthroughs how to create an application within the Beefree SDK Developer Console.
PART 1: This quickstart guide provides a step by step walkthrough of:
How to sign up for an account in the Beefree SDK Developer Console
How to navigate the SDK Developer Console
How to create an application
How to obtain your Client ID and Client Secret.
The following text includes the complete transcript for this video.
1
00:00:01,600 --> 00:00:07,200
To get started, navigate to developers.beefree.io.
This will be your essential hub for everything
2
00:00:07,200 --> 00:00:12,240
related to the Beefree SDK. In the top-right
corner of the window, click Create a Developer
3
00:00:12,240 --> 00:00:15,840
Account, then fill out the form to create
your first developer account with Beefree.
4
00:00:16,720 --> 00:00:20,800
You’ll notice there’s also a link
to the Beefree app as a standalone
5
00:00:20,800 --> 00:00:25,920
tool. However, this video series focuses on
the Beefree SDK as an embeddable solution.
6
00:00:26,720 --> 00:00:29,760
Once you’ve created your account and logged
in, you’ll be taken to a screen that looks
7
00:00:29,760 --> 00:00:35,760
something like this. At the top-right, you’ll
find links to support and documentation.
8
00:00:35,760 --> 00:00:38,880
In the main section, you’ll see the
type of subscription you’ve chosen,
9
00:00:39,840 --> 00:00:45,520
along with four activation options: Email Builder,
Page Builder, Popup Builder, and File Manager.
10
00:00:46,560 --> 00:00:54,160
This is where you’ll activate the SDK instance
that will later run within your application.
11
00:00:54,160 --> 00:01:02,160
Let’s do that now by clicking Activate
for the Email Builder application.
12
00:01:02,160 --> 00:01:04,880
On the next screen, you’ll be prompted
to name your application. I’ll call
13
00:01:04,880 --> 00:01:10,240
mine Test Email 1. You can choose any
name you like. Once you click Create,
14
00:01:10,240 --> 00:01:14,000
you’ll see your running SDK instance.
Here, you’ll find the application name,
15
00:01:14,800 --> 00:01:21,040
client ID, subscription type, and a Details
button. Let’s go ahead and click on Details.
16
00:01:21,040 --> 00:01:25,680
Inside the details screen, you’ll see important
information such as the environment type,
17
00:01:26,240 --> 00:01:32,480
creation and update dates, and configuration
options. From here, you can change themes,
18
00:01:32,480 --> 00:01:38,320
manage roles, and manage add-ons.
One of the key features of the SDK
19
00:01:38,320 --> 00:01:42,400
is that it provides two critical pieces of
information: your Client ID and Client Secret.
20
00:01:42,400 --> 00:01:45,120
Don’t worry—we’ll delete these
credentials after this video. You’ll
21
00:01:45,120 --> 00:01:50,480
also see references to some of our APIs,
like the HTML Importer, Content Services,
22
00:01:50,480 --> 00:01:58,000
and the Template Catalog API. All of these
can be accessed from this single screen.
23
00:02:00,080 --> 00:02:03,600
This area is known as the Beefree
Developer Console. As mentioned,
24
00:02:03,600 --> 00:02:11,520
this is where you’ll find your Client ID and
Client Secret, which are used for authorization.
25
00:02:11,520 --> 00:02:15,040
Since they’re sensitive credentials, you
should never share them. If necessary,
26
00:02:15,040 --> 00:02:18,640
you can regenerate them using the
Regenerate button on this screen.
27
00:02:18,640 --> 00:02:21,200
Finally, in this video series, we’ll demonstrate
28
00:02:22,480 --> 00:02:26,240
a client-side authorization process for
simplicity. But when moving to production,
29
00:02:26,240 --> 00:02:31,280
you’ll want to implement server-side
authorization for added security.Quickstart Guide: React No-code Email Builder for Beefree SDK (Part 2)
This quickstart video series provides a step by step walkthrough of how to embed the Beefree SDK’s Email Builder inside a React application. You’ll see the full process in action — from creating a React app to running the builder live in your browser.
PART 2: introduction to installing the Beefree SDK with a React Application
The following text includes the complete transcript for this video.
1
00:00:03,040 --> 00:00:06,960
Once you've set up your Beefree account,
you're ready to install the Beefree SDK.
2
00:00:06,960 --> 00:00:10,160
This video will teach you how to do
just that with a React application.
3
00:00:10,160 --> 00:00:14,080
We’ll also have other videos available
if you’re working with Angular or Vue.js.
4
00:00:14,080 --> 00:00:18,240
In this video, we’ll first walk you
through cloning a sample React demo that
5
00:00:18,240 --> 00:00:23,840
we’ve made available in a GitHub repo. Then, we’ll
cover the SDK installation process, including
6
00:00:23,840 --> 00:00:29,040
installing with NPM, setting up authorization,
and configuring your first BeeConfig.
7
00:00:29,040 --> 00:00:32,640
Finally, we’ll show you how
to run your first Beefree SDK
8
00:00:32,640 --> 00:00:35,082
app locally on your machine. Let’s get started.Quickstart Guide: React No-code Email Builder for Beefree SDK (Part 3)
This Quickstart Guide shows you step by step how to embed Beefree SDK’s Email Builder into a React application. By the end of the guide, you'll have a functional React app running locally, with Beefree SDK's no-code email builder integrated and properly authenticated—following best practices for React development.
PART 3: in this video, you'll learn how to:
Project Setup: How to clone the Beefree React demo from GitHub
How to configure environment variables by renaming a file and adding your client ID and secret
An overview of the sample React application
An explanation of the secure authentication process using a local proxy server
Launch the application locally to see the embedded Beefree editor in action
The following text includes the complete transcript for this video.
1
00:00:01,200 --> 00:00:04,400
Let's get started with installation. These
instructions will work the same whether
2
00:00:04,400 --> 00:00:08,320
you're on a Windows or Mac computer. The only
assumptions are that you have set up your account,
3
00:00:08,320 --> 00:00:13,600
have your client ID and client secret, and
have Node version 14 or greater. You'll go
4
00:00:13,600 --> 00:00:18,480
to GitHub to the Beefree SDK account
and find the Beefree React demo repo.
5
00:00:18,480 --> 00:00:25,920
We'll include a link for that below
as well. Let's go ahead and clone it.
6
00:00:31,960 --> 00:00:32,960
Okay,
7
00:00:32,960 --> 00:00:37,280
that didn't take long at all. By the way, if you
get lost during any of these steps or need more
8
00:00:37,280 --> 00:00:44,720
detail, the README for this repo contains complete
step-by-step instructions. From here, let's cd
9
00:00:44,720 --> 00:00:53,040
into our project and run npm install to update
our dependencies. Once that's complete, we'll run
10
00:00:53,040 --> 00:01:02,880
npm install beefree.io-sdk to install the official
NPM package. Again, that didn't take long at all.
11
00:01:02,880 --> 00:01:08,400
Now, from either your terminal or your
editor, let's list the files, and you'll see
12
00:01:08,400 --> 00:01:16,640
a .env.example file provided for you. Let's rename
that to simply .env for proper configuration.
13
00:01:16,640 --> 00:01:22,080
When you open it, you'll notice that we have
your Client ID and Client Secret typed out
14
00:01:22,080 --> 00:01:26,880
as text. You'll want to go to your developer
console, copy your Client ID and Client Secret,
15
00:01:26,880 --> 00:01:32,560
and replace that text here. Make sure to leave
the single quotes so it’s captured properly.
16
00:01:32,560 --> 00:01:37,600
Next, let's look at some of the files available
in the simple React app. Navigate to the src
17
00:01:37,600 --> 00:01:42,720
directory and open App.tsx. You'll find
a React function describing a button,
18
00:01:42,720 --> 00:01:45,840
and that button links to a convenient URL:
19
00:01:45,840 --> 00:01:50,800
our documentation. Feel free to replace the URL
with one of your choice, or replace this entire
20
00:01:50,800 --> 00:01:55,520
function with a component that better matches
what you’ll have in a production environment.
21
00:01:55,520 --> 00:02:01,040
All right, that last button represented a sample
component you might have in your app. Now let's
22
00:02:01,040 --> 00:02:06,800
look at the component for the Beefree SDK itself.
Open BeefreeEditor.tsx, a TypeScript file in the
23
00:02:06,800 --> 00:02:10,701
src directory. You'll see an example that
uses both the useEffect and useRef hooks.
24
00:02:10,701 --> 00:02:17,600
The useEffect hook manages the
lifecycle of the SDK component,
25
00:02:17,600 --> 00:02:22,320
and the useRef hook provides a reference
to the HTML element where the editor will
26
00:02:22,320 --> 00:02:27,520
live. You'll see that right here as an
HTML element using the useRef.
27
00:02:27,520 --> 00:02:32,160
Next is our useEffect hook, which is
critical. We'll pass an empty array
28
00:02:32,160 --> 00:02:36,240
as the second argument to tell
React: run this code just once,
29
00:02:36,240 --> 00:02:40,000
right after the component first mounts.
This prevents the editor from trying
30
00:02:40,000 --> 00:02:44,560
to reinitialize every time the component
re-renders, which is exactly what we want.
31
00:02:44,560 --> 00:02:46,800
Inside the useEffect, we have an async function
32
00:02:46,800 --> 00:02:53,280
called initializeEditor. The first
part is the BConfig object itself,
33
00:02:53,280 --> 00:02:57,680
where we configure the SDK's behavior. The
most critical property here is container,
34
00:02:58,400 --> 00:03:03,280
which is set to beefree-react-demo, matching the
ID of the where the editor will render.
35
00:03:04,000 --> 00:03:07,440
We also have callbacks like onSave and onError,
36
00:03:08,320 --> 00:03:12,800
letting us react to events from the
editor, such as when a user hits save.
37
00:03:12,800 --> 00:03:18,640
Now look at this fetch call. Remember our
discussion on security? Here's that in action.
38
00:03:18,640 --> 00:03:24,960
We're making a fetch call to localhost:3001. This
isn’t a direct call to the Beefree SDK API—it goes
39
00:03:24,960 --> 00:03:30,240
through our local proxy server, which we'll
set up in a separate file. The proxy handles
40
00:03:30,240 --> 00:03:35,600
secure authentication and returns a temporary
access token that the client can safely use.
41
00:03:36,320 --> 00:03:47,520
With that token, we can create a new instance of
the Beefree SDK and call its start method. This
42
00:03:47,520 --> 00:03:52,720
is the moment the editor is initialized
and rendered inside our container.
43
00:03:53,520 --> 00:03:59,920
The component’s return statement simply
renders the HTML structure. The has
44
00:03:59,920 --> 00:04:04,000
the matching ID beefree-react-demo,
and the ref attribute is set to our
45
00:04:04,000 --> 00:04:09,680
container ref. This completes the circle
and tells the SDK exactly where to render.
46
00:04:25,920 --> 00:04:29,760
In summary, this file uses
a ref to get a DOM element,
47
00:04:29,760 --> 00:04:35,440
a useEffect hook to safely run the code once,
a secure fetch to get an authorization token,
48
00:04:35,440 --> 00:04:38,080
and then uses that token to initialize the Beefree
49
00:04:38,080 --> 00:04:44,000
SDK. This is a production-ready pattern for
embedding the editor in your React application.
50
00:04:44,000 --> 00:04:51,680
Earlier, you added your Client ID and Client
Secret to the .env file. To complete authorization
51
00:04:51,680 --> 00:04:59,600
and authentication, we use the loginV2 method. An
example is provided in proxyServer.js in the root
52
00:04:59,600 --> 00:05:02,400
directory. You’ll want to do something
similar in your production application.
53
00:05:03,280 --> 00:05:08,080
This handles the critical authentication process
for running the Beefree SDK in your React app.
54
00:05:08,080 --> 00:05:19,360
The Beefree SDK requires passing the Client ID
and Client Secret server-side. On lines 14 and 15,
55
00:05:19,360 --> 00:05:24,960
you define BE_CLIENT_ID and BE_CLIENT_SECRET
to reference the values you pasted earlier.
56
00:05:25,680 --> 00:05:30,560
These are used in an Axios POST method
for secure server-side authorization.
57
00:05:30,560 --> 00:05:38,240
Now comes one of the most fun parts: running your
Beefree SDK instance locally. Open two terminal
58
00:05:38,240 --> 00:05:45,920
windows. In the first, run node proxyServer.js
to handle backend authorization. In the other,
59
00:05:45,920 --> 00:05:53,200
run npm run dev to start the React app.
The app is served at localhost:5173.
60
00:05:53,200 --> 00:05:59,280
Open your browser and navigate there.
61
00:05:59,280 --> 00:06:04,800
You’ll see the portion of the React app we built:
"Welcome to Beefree Demo" and the "Read the Docs"
62
00:06:04,800 --> 00:06:10,240
button from earlier. Here, you can
interact with the Beefree SDK editor,
63
00:06:10,240 --> 00:06:17,280
which is now fully embedded in your React
application. From here, feel free to click
64
00:06:17,280 --> 00:06:28,888
on different content blocks and explore the
editor’s functionality—it’s a powerful tool.Last updated
Was this helpful?