All the code shown in the tutorial can be found here.
1. A Webiny Project
Make sure your Webiny project is set up. This will be needed to create your
Content Models in order to
Publish your content.
When setting up a new project, we have two project templates that you can choose from. The
cmstemplates both include Headless CMS app by default.
2. Content Delivery API URL
The Headless CMS app exposes data via the Content Delivery API, which is a simple GraphQL API that dynamically updates its schema on content model changes that you make.
Once you've deployed your API stack (using the
yarn webiny deploy api command), you should be able to find the Content Delivery API URL in the console output:
3. Content Delivery API Access Token
In order to access the data via the Content Delivery API, we'll need a valid Access Token. These can be created via the Access Tokens form, which you can reach via the main menu:
We'll be creating a token called
Library access in order to let users coming to our site access our books we'll be publishing.
Creating our first Content Model Group
Now that we have those pieces setup, let's create a Group called
Library. Let's open the Groups section of the Headless CMS app.
Once we add all the information we want in the form, let's click on the save content model group button.
Creating a Book Content Model
Now that we have a base group to associate our model with, let's create the Book Content Model. We'll open the Models section of the Headless CMS app.
Afterwards let's click on the + button on the bottom right of the page.
Let's call our Content Model
Book, and let's put it as part of the
Library Group we created before. After we are done, let's press the Create button.
Next we should click the Edit button under the Models section.
Next we should use the drag&drop in order to create the form we want to include the following fields:
Description which includes a summary of the book. After you drag&drop you will be able to edit the field to make it look like this:
After you are done, you can click on the Preview button in order to see what the form will look like. Otherwise you can click the Save button in the top-right corner to save the Book Model.
Now that we created our Book Content Model, let's go fill it with books for our Library! Let's head here:
Afterwards we use the following form to fill out what we need for our Library:
Make sure you press the Save button for each entry!
The next and final step is to publish the blog post, which will make it actually visible in the Content Delivery API. To do that, click on the Publish icon, found at the right side in the form header.
Now that we've covered the basics of creating content models and managing content, we can move on to the React part of this tutorial.
Creating a new React app
Let's setup our React application using create react app:
Ideally, you should create your React project in a folder outside of the Webiny project.
yarn startwill have the React application built and has hot re-loading enabled so we can see our changes while we are coding them.
Next we need to install some of our extra dependencies:
We are adding
react-router if you want more than one route in your application, and
node-sass is for us to be able to use SCSS.
You can run this command, or manually delete all the files in your
This will clean your src folder so we can start fresh.
Now let's create a
src/index.js file with the following code:
Next we'll need to create an actual
Main component to render. First we should organize our components by splitting them between
Let's create a directory under
components/containers and our
Main.js will be stored there.
You'll notice that this is referencing an
App component, which we will define next.
Let's write this in our
We'll define our
Library component once we finish the Apollo Client integration of the code.
Next we'll create a
components/containers/index.js file to make exporting these components much easier:
After the React portion is set up, we have to configure our stylesheets for SCSS. Let's create a folder called
src. The file should look be at this directory
src/stylesheets/styles.scss and look like this:
We'll create a folder called
partials, where we will add our styling. To make things simpler just copy and paste the following into
Note: You can always change these 4 colors to another palette that might interest you more. If you want to learn more about SCSS, look here.
Now you can copy below into the following file
With the initial setup done for React and SCSS, we can start on the Apollo Client side. First is to install the dependencies we are going to use:
After that we should add the following code to our
There is a lot going on here, so let's explain it step-by-step: We are setting up the configuration required to create our ApolloClient, we use the
new ApolloClient constructor which requires us to give it a
cache, and the
credentials. For this tutorial we will focus on the
link variable, for information on this topic, I'd recommend heading here. For us, our GraphQL endpoint is behind a protected layer where only if you provide the Access Token created earlier, will you be granted access to the Content Models (in our case, Books) we defined.
You probably also noticed that we were defining variables from
process.env, these will be variables taken from a
.env file which we will now define:
If you completed the pre-requisites and have these values at the ready, put them in the
.env file. This is so that our application doesn't have our tokens and keys hardcoded into the project.
Now let's get to defining our GraphQL queries so that we can actually pull the Book information that we made earlier.
Let's create a folder under
graphql. There we will create a file called
queries.js and we'll fill it with this code:
You might be wondering where we created this query from, if you navigate to the same URL as
REACT_APP_GRAPHQL_URL, you should be able to now query the information you created before, see below:
Note: To see the drop-down, type CTRL + Space in between two curly braces to see the list of queries accessible to you.
Now that we have our GraphQL query created, we should create the
Library component as well as the
Let's head to
src/components/presentation/ and create
Library.js like this:
The Library we are going to create will have many books, so we will render each of them that get returned from our GraphQL api endpoint under the
Now let's create
Book.js in this folder
Book component is wrapping each book in it's own div container and displaying the information we want to display on our site.
Now we need to create a
index.js file in
src/components/presentation/ like this to export our created components:
Lastly we need to import the
Library component we created, let's head to the
src/components/containers/App.js and edit it so it looks like this:
Voila! Now when we look at our react application we should find our site like this:
Note: Make sure you are running
yarn startinside the
react-projectdirectory so your site is running.
Congrats, we now completed a e-library for our books with React, Apollo Client, and Webiny Headless CMS.