Build a blog with Anima’s React code + Contentful’s headless CMS
Tags: react, webdev, tutorial, devops
Published: 2022-08-22 08:28:41

---
title: Build a blog with Anima’s React code + Contentful’s headless CMS
published: true
date: 2022-08-07 14:53:00 UTC
tags: react, webdev, tutorial, devops
canonical_url: https://www.animaapp.com/blog/design-to-code/build-a-blog-with-anima-code-and-contentful-cms/
---
![Build a blog with Anima’s React code + Contentful’s headless CMS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lonsfqtm6lpinylhn3yr.png)

In this tutorial, we'll build a completely functional blog by connecting Anima's generated frontend code to @contentful_blog 's headless CMS for dynamic content.

**Before Starting**

1. [Sign up](https://projects.animaapp.com/signup?utm_source=ezbth) to Anima
2. Install the [Anima plugin for Figma](https://www.figma.com/community/plugin/857346721138427857/Export-to-React%2C-HTML-%26-Vue-code-with-Anima)
3. Create your first Anima project on the platform

## Part 1: Get the code from the design

With Anima, we can build complete reusable React components from a Figma design. For this tutorial, we are going to use this [blog template](https://www.figma.com/file/OpRHnZNIRcdO1qwHXGH4jk/Blog-template-with-Anima-components-(Community)-(Copy)?node-id=0%3A1).

Open the [Anima Plugin in Figma](https://www.figma.com/community/plugin/857346721138427857/Export-to-React%2C-HTML-%26-Vue-code-with-Anima). Note: if you've created a project before it should be listed here.

![1_Anima_contentful.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660554581968/SvLeqBwxt.jpeg)

Select **Preview**. You will see this pop-up window when you can check the responsiveness of this template.

![2_anima-figma-preview-in-browser.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660554607956/E318vU0SO.png)

Select the **Get Code** option and choose **React**. From this design, Anima will generate a full list of React components.

This process can take a few minutes, but when it is completed successfully, it will open our project in the Anima web app.

![3_anima-web-app-code-mode.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660554628912/R4zkqAhyZ.png)

As you can see, Anima is generating functional React code for any component you select. You also have the option to change the view to desktop and tablet.

For this tutorial, we will only be working with one breakpoint screen, in this case, the 1440 px screen homepage light. You can navigate to this screen by clicking the dropdown menu in the upper left corner of the platform.

Select **Export Code**. You will see three different options, select **Current Screen** and click **Download screen as ZIP**. Make sure the chosen framework is React.

![4_figma-anima-export-code.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660554639032/8mONCQ3wJ.png)

This will generate a zip file with the codebase ready to open and use in our IDE.

Anima uses Parcel to compile our jsx files, so when your download is ready you just need to install the dependencies with npm install and then run npm start.

If you navigate to `http://localhost:1234` our Anima project should be up and running.

## Lets create content in Contentful

Now that we have our blog running is time to create some content for it.

[Create a Contentful account](https://www.contentful.com/sign-up/) to start.

When we enter the Contentful platform the first thing we need to do is create a new content type, in this case, a new article.

Select **Content Model** in the navigation and then click on **Add content type**.

![5_anima-contentful-content-type-setup.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660554657984/vQp57AkhI.png)

After clicking create it will navigate to our content type settings for adding new fields.

If we review the design we notice that our article has an image, a title, a description, and some other fields. We need to create all of them and select the correct type for each.

After you finish creating all the fields, you should have something similar to this.

![6_anima-contentful-create-content-fields.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660554669234/Vr4pD8brO.png)

Click **Save** and we will have our content type ready to create new articles.

Navigate to **Content** and select **Add Article**. Now it's time to fill up our first article.

![7_anima-create-an-article-in-contentful.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660554680154/pj25qtbb-.png)

## Part 2: Integrate Contentful CMS for dynamic content

Now that we have some articles created and our React project, it's time to integrate both to have a completely functional blog with dynamic content.

Let's create a new .env file at the root of our project to store the Contentful keys we will need. You can find your keys on **Settings > Api Keys**.

![8_create-env-file-contentful.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660554695401/5LZVLuIF2.jpeg)

We also need to install the Contentful dependency npm install Contentful.

Let's use a hook to get a list of articles from Contentful. Create a new services folder and then create a use-articles.jsx file.

![9_anima-install-contentful-dependancy.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660554706976/lT8UZKS36.jpeg)

We are using the [Content Delivery Api](https://www.contentful.com/developers/docs/references/content-delivery-api/#/introduction/common-resource-attributes) to get our articles.

Remember to use the correct content\_type to get the entries, in this case, it is article.

Now that we have a service to get our articles we need to pass it to our components. there are some small tweaks we need to do in the code. Follow the [repo](https://github.com/elisealcala/anima-contentful-blog) for a guide. It's basically cleaning some parts and passing the props properly.

## Part 3: Its time to deploy

We are going to use [Vercel](https://vercel.com/login) to deploy our blog.

We have to previously push our code in GitHub, and grant access to Vercel. After that, you will see the project listed.

![10_vercel-import-git-repository.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660554731301/WIIMy_BdT.png)

Select **Import**.

Before deploying make sure to add the environment variables that we previously set on development.

![11-vercel-add-environment-variables.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660554746116/7akJR6EOb.png)

Now you can deploy the app.

### Connect Anima's frontend code to any backend architecture. [Try it today](https://projects.animaapp.com/signup).

* * *

_The post [Build a blog with Animas React code + Contentful's headless CMS](https://www.animaapp.com/blog/design-to-code/build-a-blog-with-anima-code-and-contentful-cms/) written by Elizabeth Alcal, appeared first on [Anima Blog](https://www.animaapp.com/blog)._