Facebook’s create-react-app (CRA) offers an easy and well-documented way of bootstrapping a React app. In this tutorial, we will show you how to add the Web Builder to such an app, allowing you to freely combine Web-Builder-managed content with whatever content you wish to deliver separately.

Before you begin, you’ll want to verify the current requirements for create-react-app. This tutorial was last verified with version 4.0.2. For the instructions in this tutorial to work as intended you will need a Web Builder instance, too.

Let’s start! In a terminal, change to where your projects are, then create the React app and initialize the repository. Here we are naming our application “react-scrivito”, but you could use what ever name you wish:

Run:

Now create the Web Builder’s configuration file, “src/config/scrivito.js” and set its contents to:

Replace YOUR-CMS-INSTANCE-ID with exactly that. Please find the instance ID in your JustRelate account at console.justrelate.com.

With a single-site setup (as opposed to a multi-site setup), if your Web-Builder-based content is not served from “/”, add the corresponding routingBasePath to your call to Scrivito.configure.

Then, add imports for Scrivito-related files to “src/index.js” like so:

In addition to the configuration we provided above, the (not yet existing) CMS object and widget class definitions are imported. We’ll provide a couple of basic CMS classes later on.

What you render here, in this case via the App component, depends on where you started off. For a fresh React app without any relevant content (like ours), it makes sense to render just the Web-Builder-based content, while a fully fledged React app probably requires some kind of routing. There’s a dedicated tutorial on implementing routing using React Router.

To have the app render the current (Web-Builder-based) page (in addition to the default header), change “src/App.js” to the following:

To be able to create pages and widgets, we require object and widget classes. Assuming that you have a fresh Web Builder, all we need to get started are a Homepage and an Image object class as well as two widget classes, SectionWidget and TextWidget. These classes will suffice to display at least a small portion of the homepage content.

Our “src/index.js” file above imports object classes from “src/Objs” and widget classes from “src/Widgets”. After creating these directories, we will add the following “index.js” file to each of them to have the contents of the class subdirectories imported automatically.

Alternatively, you can download the files as an archive and uncompress it to the “src” directory if you don’t want to create them all manually. The download includes a Page object class and an ImageWidget class in addition to the examples below, as these are commonly used.

To have the Web Builder UI displayed, add ”/scrivito” to the URL: http://localhost:3000/scrivito:

Remember that we defined only two widget classes (section and text), so only content from widgets of these types will be displayed. Now, after clicking “Edit” on the top bar, you will see errors from all the other (not defined) widgets on the page:

The missing widget classes causing the “application error” messages are included in the Portal App. You could install it or transfer and adapt the classes as needed. As this tutorial is based on the idea of starting from scratch, you might want to delete the sample content from your Web Builder instance.

You now have the Web Builder integrated with Facebook’s create-react-app and can start developing your app further. Add page and widget classes for handling Web-Builder-based content, include some styling, and implement routing if you plan to deliver mixed-source content. If you are new to the Web Builder, take a look at the other guides and tutorials we have available.