Using ReactJS with Agility CMS

This tutorial was originally written by James Vidler and published on the Agility CMS help pages.

This tutorial requires you to have signed up for an Agility subscription using the Blog template. Don't have it? Sign up now for free (forever)!

Introduction

Create React App is the easiest way to get started with React JS. It's popularity, simplicity, and ease of use make it an ideal candidate for building modern web apps. This is precisely why we've chosen to open-source an Agility CMS Create React App web app to demonstrate the various ways you can incorporate the Agility CMS Content Fetch JS SDK in your React web apps.

Explore the CMS, get the source code, run it locally and deploy your site all in a matter of minutes.

Explore the CMS

Agility has three core components for managing your content, these are Pages, Shared Content, and Media & Documents. 

Pages

Where you can manage and create your pages. They are the main representation of a website's structure.

Adding a page in the CMS will allow your web app to render that page automatically using dynamic routing.

A Page uses a Page Template to define Content Zones where editors can add content. A Content Zone can then have one or many Modules added to it.

Modules are the functional components of a page. They have fields associated with them which allow Editors to input content.

In this React site, each Module corresponds to a React Component:

Which translates to what we see in the browser:

Shared Content

This is where your store your structured content that is NOT specific to a page. In this example, we have a list of Posts, and an item representing our Global Header content.

Media & Documents

This is where you store static assets for your web app. Typically this is used for images, video and pdfs, but can also store whatever you'd like including font assets, etc. Everything stored here is served over a high-availability CDN.

Get the Code

Download a copy of the source code for this site from GitHub:

 git clone https://github.com/agility/agility-create-react-app

Project Setup

You should be able to run the site as-is, but it's not using your API Key and Guid . Let's change that so it's using your API key _and _Guid so you can modify content in the CMS and see the change reflected in your web app.

We've already created two API Keys you can use (you can create more):

1. defaultlive - when using this API Key, only Published content will be returned by the Content Fetch API.

2. defaultpreview - when using this API Key, All the latest content will be returned by the Content Fetch API, regardless of whether it is in Staging or Published

See Authenticating your Content Fetch API Calls for more details on how authentication works.

Retrieving your Fetch API Key and Preview API Key

This React SPA accepts both a fetchAPIKey _and a _previewAPIKey so you can use the same application to both Preview and view Live/Published content.

Please see Retrieving your API Key(s), Guid, and API Url for retrieving these values. The Guid will be the same for both live and preview, but they will have different API Key values. Make sure you take note of the API Key values for both defaultlive and defaultpreview.

Open the file src/agility.config.js and replace the guid and fetchAPIKey/previewAPIKey properties with your values.

Run it Locally

Once you have your agility-config.js values set, install the dependencies using NPM:

npm install

To run the site locally, since this is a Create React App (CRA), we use:

npm start

If all is well, you should see the following:

Deploying your Web App

See Deploying your Agility CMS Create React App Web App for instructions on how you can deploy your site to a static web host.

Learn More

Want to learn more about Create React App? Check out the Getting Started doc for Create React App.