Get Started With Commercetools and Contentful on React Native

This guide will walk you through using TwicPics to optimize your Commercetools and Contentful images.

Our demo project will use:

• Commercetools — to manage the product catalog
• Contentful — for the marketing content
• React Native (and React Native for Web) for the front-end app

This project will also make use Expo to manage the development server. This tutorial requires Node.js 16.15.0.

Setup the demo project

We built a small application with some boilerplate code to retrieve and display data. It contains two pages:

• A page listing products from Commercetools
• A page listing blog posts from Contentful

Let's start by cloning our demo project and installing it dependencies.

git clone https://github.com/TwicPics/react-native-commercetools-contentful-demo.git

Then, cd into your project directory and install its dependencies.

npm install

We will use environment variables to store the credentials and access configuration to the services we will use. Start by copying the existing env.example file as a new .env file.

In the next sections, we will update the values in our .env file using values we will retrieve from TwicPics, Commercetools, and Contentful.

Connecting with Commercetools

Seeding Commercetools data

Commercetools has an utilitary for seeding data in your project named SUNRISE. We will use it in this tutorial.

Start by cloning the SUNRISE data repository that contains our sample data. This should not be a part of the React Native project, so we recommend running the following command outside our app directory.

git clone https://github.com/commercetools/commercetools-SUNRISE-data.git

The newly created commercetools-SUNRISE-data folder contains an .env file. We will update its values to give this utilitary access to our Commercetools project so that it can seed data into it.

If you don't have a Commercetools project yet, create one. Then, create an API client via the Commercetools back-office:

1. Navigate to your Settings > Developer settings.
2. Select the Admin client scope.
3. When creating the API client, choose Environment Variables to store credentials and save them in commercetools-SUNRISE-data/.env.

You're now ready to perform the data seeding.

# Navigate to the utilitary folder
cd commercetools-SUNRISE-data
# Install dependencies
npm install
# Import the SUNRISE data in your project
npm run start

Updating environment variables

Let's plug the cables between our application and our Commercetools project.

We need to update all the env variables that start with CTP_ in our .env file. We can get all these values by creating an API client on Commercetools.

If you don't have credentials yet, you can create a API Client on Commercetools back-office by following these steps:

1. Navigate to your Settings > Developer settings.
2. Select the Admin client scope.
3. When creating the API client, choose Environment Variables to store credentials and save them in your project .env file.

Connecting to Contentful

Seeding Contentful data

As far as I know, Contentful does not have an utilitary to create data. Fortunately, creating sample data is pretty fast.

If you don't have a Contentful project, create one. Then, create a blogPost content type with the following fields: title (text), coverImage (image), and excerpt (text).

Finally, create a few blog post entries that we will be able to retrieve later. For simplicity, fill the text fields with lorem ipsums and the image field with high quality images. Unsplash images in Medium quality should be perfect for this tutorial.

Updating environment variables

In your Contentful project settings, create a content delivery token. This will be our CONTENTFUL_ACCESS_TOKEN variable value. You can retrieve the CONTENTFUL_SPACE_ID from the Contentful back-office URL. Set both these values in our React Native project .env file.

Optimizing images with TwicPics

Now, we only need to configure our TwicPics account to optimize images that come from Commercetools and Contentful.

To do so, connect to your TwicPics dashboard. In your chosen workspace, create two paths on your TwicPics domain:

• A path mapping your Commercetools images storage, e.g. by setting Path to commercetools and Source URL to https://s3-eu-west-1.amazonaws.com/commercetools-maximilian/
• A path mapping your Contentful images storage, eg. contentful mapping https://images.ctfassets.net/YOUR_SPACE_ID/

After configurating these paths in your TwicPics dashboard, you can update the last values in your .env file.

Running the project

If you followed the tutorial until here, you should be ready to run the project.

npm run web

And that's it!

Our project now uses TwicPics to optimize both image sources: those coming from Commercetools and those coming from Contentful. We can use a single API regardless of where the medias are stored. By doing so, we get the best of TwicPics context-aware optimization in all our app:

You can check out how the URLs retrieved from both respective APIs are mapped to your TwicPics domain in the following part of the code:

• In ProductList.jsx for Commercetools images
• In BlogPostList.jsx for Contentful images

If you have any questions, drop us a message in the live chat (at the bottom right of this page!) We'll be happy to help.