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 Scrivito to such an app, allowing you to freely combine Scrivito-CMS-managed content with whatever content you wish to deliver separately.

Before you begin, you’ll want to verify the current requirements for CRA. This tutorial was last verified with version 4.0.2. For the instructions in this tutorial to work as intended you will need a Scrivito CMS, 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:

Note that Scrivito is not yet compatible with React 17 but will be soon. In the meantime, you can rewrite the “package.json” file to use 16.8.0.

Then run:

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

Replace YOUR-CMS-TENANT-ID with exactly that. Please find the tenant ID of your Scrivito website in your dashboard on the “Settings” tab.

With a single-site setup (as opposed to a multi-site setup), if your Scrivito-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 Scrivito-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 (Scrivito-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 Scrivito CMS object and widget classes. Assuming that you have a fresh Scrivito CMS with the sample content for the Example Application, 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 Scrivito 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 Example 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 Scrivito CMS.

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