Page Builder Video Series
Watch the Page Builder Video Series to learn more about getting up and running with Beefree SDK's Page Builder inside your application.
Page Builder Video Series
This video series includes the following tutorials:
Introduction (Part 1)
PART 1: Learn how to embed the Beefree SDK Page Builder into your app step by step. If you’ve already integrated the Beefree SDK Email Editor in React, Angular, or Vue.js, you’re almost there! In this quick start guide (4 videos), we’ll walk through the key configuration changes and steps needed to launch a fully functional no-code landing page builder your users will love. 🔗 Links to demo projects and SDK documentation are available in the description below:
(1) React: https://github.com/BeefreeSDK/beefree...
(2) Angular: https://github.com/BeefreeSDK/beefree...
(3) Vue.js: https://github.com/BeefreeSDK/beefree...
(4) Page Builder Docs: https://docs.beefree.io/beefree-sdk/v...
(5) Developer Resources on GitHub: https://github.com/BeefreeSDK
(6) NPM package: https://github.com/BeefreeSDK/beefree...
📘 What you’ll learn:
Installation and Authorization
Embedding the SDK in your application
Running locally on your machine
🚀 Don't have Beefree SDK yet? Get started for free at: https://developers.beefree.io/
The following text includes the complete transcript for this video.
1
00:00:02,880 --> 00:00:07,920
Hi developers. In our previous videos, we talked
about how to embed the Beefree SDK email editor
2
00:00:07,920 --> 00:00:12,800
in React, Angular, and Vue.js applications. In
this video, we’ll take it a step further and
3
00:00:12,800 --> 00:00:17,600
explore how to embed another powerful tool in
the Beefree SDK ecosystem — the Page Builder.
4
00:00:17,600 --> 00:00:20,240
The great news is, if you’re already
familiar with the email editor process,
5
00:00:20,240 --> 00:00:24,640
you’re about 95% of the way there. In this
video, we’ll cover the key configuration changes
6
00:00:24,640 --> 00:00:28,560
you’ll need to help your users start creating
beautiful landing pages as quickly as possible.
7
00:00:28,560 --> 00:00:29,840
Now, let’s get started.Installation & Authorization (Part 2)
PART 2: In this video, we’ll show you how to embed the Beefree SDK Page Builder into your React, Angular, or Vue application. Whether you’re building from scratch or extending an existing app, this quick start guide walks you through everything you need to install, authenticate, and run the SDK securely. ✨ The best part? The installation process is identical across all three frameworks — so once you’ve learned it, you can apply it anywhere. 🔗 Links to demo projects and SDK documentation are available in the description below:
(1) React: https://github.com/BeefreeSDK/beefree...
(2) Angular: https://github.com/BeefreeSDK/beefree...
(3) Vue.js: https://github.com/BeefreeSDK/beefree...
(4) Page Builder Docs: https://docs.beefree.io/beefree-sdk/v...
(5) Developer Resources on GitHub: https://github.com/BeefreeSDK
(6) NPM package: https://github.com/BeefreeSDK/beefree...
📘 What you’ll learn:
How to install the Beefree SDK for the Page Builder using npm install @befree.io/sdk
How to set up authorization without exposing your client ID or secret
How to configure a proxy server for secure API calls
How to initialize and run the Page Builder inside React, Angular, and Vue projects
How to generate and use access tokens for authentication
🚀 Don't have Beefree SDK yet? Get started for free at: https://developers.beefree.io/
The following text includes the complete transcript for this video.
1
00:00:01,360 --> 00:00:06,720
To get started, we’re going to use the same base
applications we used in the email builder videos.
2
00:00:06,720 --> 00:00:11,200
If you’d prefer to use your own sample application
instead, that’s perfectly fine. We have demos
3
00:00:11,200 --> 00:00:17,920
available in React, Angular, and Vue, and you’ll
find the links for these in the description below.
4
00:00:17,920 --> 00:00:22,960
From here, we’ll jump into one of the
projects — for example, the React demo.
5
00:00:22,960 --> 00:00:27,040
The great news is that the installation step
for the Beefree SDK is exactly the same,
6
00:00:27,040 --> 00:00:30,480
no matter which JavaScript framework
you’re using. You’ll simply run...
7
00:00:36,320 --> 00:00:40,720
That step applies to all three frameworks
for the Page Builder application.
8
00:00:40,720 --> 00:00:44,560
Now, let’s talk about authorization. As
we mentioned in the email builder videos,
9
00:00:44,560 --> 00:00:48,160
it’s important not to expose your client
ID or secret in the front-end application
10
00:00:48,160 --> 00:00:52,480
itself. To handle this securely with
the Page Builder — across React,
11
00:00:52,480 --> 00:00:56,480
Angular, and Vue — we’ll use a proxy server.
12
00:00:57,280 --> 00:01:02,960
First, in your developer console, make sure you
have the client ID and secret for the Page Builder
13
00:01:02,960 --> 00:01:07,600
application you’ve activated. We’ll look at that
in just a moment. Then, we’ll use a proxy server
14
00:01:07,600 --> 00:01:13,600
for each framework to fetch an authorization
token using that client ID and secret.
15
00:01:13,600 --> 00:01:14,960
Let’s see how that works in practice.Embedding (Part 3)
PART 3: In this tutorial, we’ll guide you step-by-step on embedding the Beefree SDK Page Builder into your React, Angular, or Vue.js application. Learn how to securely integrate the SDK, initialize it, and configure it to run smoothly inside your app, while keeping your client ID and secret protected. We’ll walk through real examples in all three frameworks, showing you how to mount the editor, handle authentication tokens, and configure your application for seamless page building. 🔗 Links to demo projects and SDK documentation are available in the description below:
(1) React: https://github.com/BeefreeSDK/beefree...
(2) Angular: https://github.com/BeefreeSDK/beefree...
(3) Vue.js: https://github.com/BeefreeSDK/beefree...
(4) Page Builder Docs: https://docs.beefree.io/beefree-sdk/v...
(5) Developer Resources on GitHub: https://github.com/BeefreeSDK
(6) NPM package: https://github.com/BeefreeSDK/beefree...
📘 What you’ll learn:
How to activate the Page Builder application in the developer console
How to retrieve your client ID and secret for authentication
How to embed the Page Builder inside a React app using useRef and useEffect
How to initialize the Beefree SDK and run the editor with configuration objects
How to integrate the SDK in Angular and Vue, using their respective lifecycle hooks
How to handle the onSave callback to capture page JSON and HTML cleanly
Best practices for securely managing tokens and keeping your app safe
🚀 Don't have Beefree yet? Get started for free at: https://beefree.io/
The following text includes the complete transcript for this video.
1
00:00:01,200 --> 00:00:05,200
[Music]Okay, now let’s talk about embedding
the Page Builder application within your app.
2
00:00:05,200 --> 00:00:10,640
First, from the developer console (as shown
here), navigate to Page Builder Application
3
00:00:10,640 --> 00:00:16,720
and click Activate. If this were for the Email
Builder, you’d activate the one just above it.
4
00:00:16,720 --> 00:00:21,120
Once activated, go into the details,
just as we did for the Email Builder.
5
00:00:21,120 --> 00:00:25,680
Here’s where you’ll find two key
pieces of information — your Client
6
00:00:25,680 --> 00:00:29,920
ID and Client Secret. We’ll need
both of these in just a moment.
7
00:00:29,920 --> 00:00:34,800
Now, let’s move on to embedding the Beefree SDK
into your application. We’ll start with the React
8
00:00:34,800 --> 00:00:41,040
example to show how the Page Builder application
fits neatly within a div inside your React app.
9
00:00:41,040 --> 00:00:48,000
To begin, we use the useRef hook to reference
the div that will contain the editor. Then,
10
00:00:48,000 --> 00:00:53,720
once the component mounts, our core
logic runs inside the useEffect hook.
11
00:00:53,720 --> 00:00:59,760
Scrolling down a bit — once we have our
token and configuration object ready — we
12
00:00:59,760 --> 00:01:05,600
create a new instance of the Beefree SDK, which
we’re calling bee for convenience. From there,
13
00:01:05,600 --> 00:01:12,560
we call the start() method on the bee
instance, passing in two important arguments:
14
00:01:13,120 --> 00:01:15,600
Our configuration object (defined earlier)
15
00:01:16,560 --> 00:01:23,200
The specific code referencing the Page
Builder application — simply set type: "page"
16
00:01:23,200 --> 00:01:27,120
There are additional configurations
you can include inside this JSON
17
00:01:27,120 --> 00:01:30,560
object, and we’ll link to
that documentation below.
18
00:01:30,560 --> 00:01:35,360
Embedding the Page Builder in an Angular
or Vue app follows a very similar process,
19
00:01:35,360 --> 00:01:38,960
using each framework’s respective
lifecycle hooks and component structures.
20
00:01:38,960 --> 00:01:44,000
For Angular, we use the ViewChild
decorator to get the container
21
00:01:44,000 --> 00:01:50,800
element. Inside the ngOnInit lifecycle
hook, we place our core logic — fetching
22
00:01:54,320 --> 00:01:56,560
the token, instantiating a new Beefree
SDK instance, and then calling the
23
00:01:56,560 --> 00:02:06,640
start() method. As before, we include
a key-value pair setting type: "page".
24
00:02:08,720 --> 00:02:13,600
For our Vue developers, the pattern will feel
very familiar. Inside the BeeEditor component,
25
00:02:13,600 --> 00:02:20,560
we place all our main logic in the onMounted
lifecycle hook. In the configuration object,
26
00:02:20,560 --> 00:02:27,840
you’ll notice a simplified onSave callback —
the Page Builder provides just the essential
27
00:02:27,840 --> 00:02:33,200
page JSON and HTML, keeping our code
clean and focused for this example.
28
00:02:34,320 --> 00:02:42,400
Finally, after fetching the token, we initialize
the Beefree SDK, call start(), and — just as
29
00:02:42,400 --> 00:02:48,160
before — pass in the configuration
object and set the type to "page".Running Locally (Part 4)
PART 4: Now it’s time to see your Beefree SDK Page Builder in action! In this video, we’ll walk you through running your application locally using React, Angular, or Vue. Learn how to start both your proxy server and development server to securely fetch tokens, serve your app, and view the Page Builder fully embedded and ready for use. Whether you’re testing in React, Angular, or Vue, this guide ensures your Page Builder application runs seamlessly on localhost, with content blocks and settings tailored for webpages. 🔗 Links to demo projects and SDK documentation are available in the description below:
(1) React: https://github.com/BeefreeSDK/beefree...
(2) Angular: https://github.com/BeefreeSDK/beefree...
(3) Vue.js: https://github.com/BeefreeSDK/beefree...
(4) Page Builder Docs: https://docs.beefree.io/beefree-sdk/v...
(5) Developer Resources on GitHub: https://github.com/BeefreeSDK
(6) NPM package: https://github.com/BeefreeSDK/beefree...
📘 What you’ll learn:
How to run a proxy server to securely manage credentials and tokens
How to start your development server for React, Angular, and Vue apps
How to view the Page Builder running locally on your machine
How to verify the application interface and different content blocks for web pages
How to troubleshoot common setup issues for local development
A recap of installation, authentication, and embedding steps from the series
🚀 Don't have Beefree yet? Get started for free at: https://beefree.io/
The following text includes the complete transcript for this video.
0:00:01.200,0:00:05.840
Now comes the fun part. Let's see our application
running in action. Instead of trying to run this
0:00:05.840,0:00:10.720
from the editor, I'm going to use two terminal
windows. The proxy server in the first terminal
0:00:10.720,0:00:14.960
will handle our secure credentials to
safely fetch the auth token from Beefree.
0:00:14.960,0:00:20.400
The development server in the second terminal will
build and serve our actual front-end application.
0:00:20.400,0:00:26.880
So in the first terminal, we'll run
node proxy-server.js. Once we see that
0:00:26.880,0:00:30.400
it’s listening, we'll go to our second
terminal. And for our React application,
0:00:30.400,0:00:38.400
we'll run npm run dev. We can see our application
being served at localhost:5173. Let's navigate
0:00:38.400,0:00:46.080
there to see our application running. Going to
localhost:5173, we'll give it just a second,
0:00:46.080,0:00:50.720
and there we see the Page Builder application
up and running inside our React application.
0:00:50.720,0:00:54.320
You'll notice that the interface is tailored
for web pages, with slightly different content
0:00:54.320,0:00:59.600
blocks and settings than the Email Builder. The
commands to run the application for Angular and
0:00:59.600,0:01:04.880
Vue are the same. We'll use the same configuration
of two terminal windows — in the first, we'll run
0:01:04.880,0:01:14.480
our proxy server, and in the second, we'll simply
run ng serve to start the development application.
0:01:15.600,0:01:19.440
Again, that works for both
Angular and Vue applications.
0:01:20.720,0:01:24.080
We can see our app being served at
localhost:4200, so let's go there in
0:01:24.080,0:01:33.520
our browser, and once again, we see the
Page Builder application up and running.
0:01:34.960,0:01:38.080
Let’s recap our steps. We installed the SDK,
0:01:38.080,0:01:43.440
secured authentication with a server-side
proxy, then embedded the SDK in React, Angular,
0:01:43.440,0:01:47.600
and Vue applications. That allowed
us to run our application locally.
0:01:47.600,0:01:52.320
That’s it. We hope you found this series helpful.
If you have any questions, ask us in the comments
0:01:52.320,0:01:58.720
below. We’ll also include documentation links
to help you get started. Happy building.
Last updated
Was this helpful?