Adding Scrivito to Create-React-App

Facebook’s create-react-app 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.

You require Node >= 6, npm >= 5.2, and git for the instructions in this tutorial to work as intended. Needless to say that you need a Scrivito CMS, too.

Create the React app and initialize the repository

Let’s start! In a terminal, change to where your projects are, then create the React app and initialize the repository:

Using environment variables is always a safer option compared to hard-coding sensitive data. When using the Create React App Webpack settings, one must prefix any variable with REACT_APP_ for it to be picked up. For this project, the call to Scrivito.configure would look like this:

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:

Generate and finalize the webpack configuration

In a standard Scrivito-based app the editing interface is available under the “/scrivito” URL. To make this work here, we will instruct webpack to copy the corresponding HTML file included in the SDK (“index.html”) to somewhere else and make “/scrivito” point to this file. We require the copy-webpack-plugin for copying the file, so first run:

Provide some page and widget classes and components

To be able to create pages and widgets, we require Scrivito CMS object and widget classes. Assuming 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 Image widget class in addition to the examples below, as these are commonly used.

Fire up your app!

This opens http://localhost:3000 in your browser. If you specified the ID of a new Scrivito CMS in “src/config/scrivito.js”, or haven’t used this URL before, you will need to authorize it on the “Deployment” tab of the associated CMS tenant's settings.

If your CMS content includes a page object for the “/” URL and at least a text widget (like the example app does), you should see a page with some text. This is the published content, without the Scrivito UI:

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

Homepage (editing mode)

The missing widget classes causing the “application error” messages are included in the Example App you could install to 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.

Final words

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.

This tutorial was written using React 15.6, Webpack 4 and Scrivito SDK 1.3. The directions should work without change with all minor versions going forward, but let us know if you encounter any issue.