How I built a Contentful App combined with Commerce.js (II)
Tags: contentful, javascript, cms, commercejs
Published: 2021-09-21 18:20:02

Welcome back :wave:...this is part 2 of this series. If you missed part 1, click the link above :point_up_2:.

## Previously on...

In part one, we saw the what and the why of our App and we finished with our **_App Definition_** configuration on the Contentful web app.

Now we need to install the app in our space/environment and associate it with an entry field.

---

## Installing the app on your Space

Inside your app details, you should be able to install the app in your space by clicking on the proper CTA.

![App Installation: init](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8s5ijv3rjvwly7lap67.png)

Here, you need to define the space and the environment

![App Installation: space and environment setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzivrj5m00w7ntfqing1.png)
######(_Your space and environment could be different_)
&nbsp;
Don't make my mistake, since in our previous episode we defined the frontend location as http://localhost:300, you need to have the app running on your local machine otherwise the installation will fail.

![App Installation: success](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5j72rls4pxwm1j1l7kp.png)

Now click on the Install button and you should see a success message. You just installed the app in your space, now we can use it :partying_face: :partying_face:.

---

## Define the appearance of our field.

As a prerequisite, I'm assuming you are already familiar with Contentful and I'll skip the part of the content type creation.
I have created a sample "Test Commerce Selector" content type in which we are going to define a field of type **JSON object**.

![Field Definition: entry field type selection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ll9ujrd2c40uytkesyq.png)

Selecting the right field type is important, otherwise, our app will not be visible. In part 1, in our App Definition, we defined the Entry Field location as a JSON object so we need to select this type.

Let's define now the name of our field and click on **Create and configure** button.

![Field Definition: entry field name definition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zskwi4zssqxrgnxox0ne.png)

I'm skipping all the possible configurations on this field, our focus is on the Appearance tab.

If the app is installed properly you should see it near the default behaviour/appearance.

We need to select it, define our instance parameter with the Url option selected and finally confirm the configuration. This is how we are saying to Contentful to use our custom app for this specific field.

![Field Definition: entry field appearance and instance parameter definition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mt9yrtr3eqrwlscd5pzk.png)

###### _("Type" is the instance parameter defined in our **App Definition** step.)_
&nbsp;
We can see the result of our setup if we try to create an entry for our content type.

![Entry Field: initial definition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kth646dj8ecdg5y3dw8o.png)

"Hello Entry Field Component" is saying :thinking: :thinking:... If you remember in our components folder we have a bunch of .tsx files, let's open the **Field.tsx** component.

```tsx
import React from "react";
import { Paragraph } from "@contentful/forma-36-react-components";
import { FieldExtensionSDK } from "@contentful/app-sdk";

interface FieldProps {
  sdk: FieldExtensionSDK;
}

const Field = (props: FieldProps) => {
  // If you only want to extend Contentful's default editing experience
  // reuse Contentful's editor components
  // -> https://www.contentful.com/developers/docs/extensibility/field-editors/
  return <Paragraph>Hello Entry Field Component</Paragraph>;
};

export default Field;
```

Let's change the return of the component and see what happens.

```tsx
const Field = (props: FieldProps) => {
  // If you only want to extend Contentful's default editing experience
  // reuse Contentful's editor components
  // -> https://www.contentful.com/developers/docs/extensibility/field-editors/
  return <Paragraph>This is my commerce selector custom field</Paragraph>;
};
```

As soon as you save you'll see the updated output on the Contentful web app.

![Entry Field: update return](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6upya176azefmdqaadv.png)

---

## In the next episode...

Wow...this was very quick but so far so good. We created the app, installed it and defined a field with our custom appearance.
In part 3 we'll talk about Commerce.js, define some dummy products and start working on our App Configuration location.

Stay :radio:
:heart: