Create Contentful App
Apps allow you to embed single page applications inside the Contentful web app and extend the Contentful experience. To make the process of creating a new app simpler, the
create-contentful-app CLI supports creating an app template, creating an
AppDefinition, and gives instructions on how to install the app into a space environment.
This article explains how to create and develop an app from scratch using
Watch our overview video on how to use the create-contentful-app CLI
In order to use this command line tool, you'll need Node.Js version 8.10 or newer, and NPM version 5.6 or newer installed on your machine. You will also need a Contentful account with an organization management role. Organization management roles are owners, admins or developers.
Create a new app
To get started, initialize an app template:
npx @contentful/create-contentful-app init my-first-app
This command generates your app project and installs all required dependencies.
src ├── components │ ├── ConfigScreen.spec.tsx │ ├── ConfigScreen.tsx │ ├── Dialog.spec.tsx │ ├── Dialog.tsx │ ├── EntryEditor.spec.tsx │ ├── EntryEditor.tsx │ ├── Field.spec.tsx │ ├── Field.tsx │ ├── LocalhostWarning.tsx │ ├── Page.spec.tsx │ ├── Page.tsx │ ├── Sidebar.spec.tsx │ └── Sidebar.tsx ├── index.css ├── index.tsx ├── react-app-env.d.ts └── setupTests.ts
This step may take a while. When the command finishes it will have created a new directory called
Note: The created
package.json contains all packages needed for creating your app together with a field called
homepage referring to the local directory.
What this does is, all the links in your build will be relative to the location of the
To find out more you can read here
You need to create an
AppDefinition for your app in order to use it on Contentful. This can either be done through the Contentful web application or through
To do this using
create-contentful-app, open your project folder and configure your app:
cd my-first-app npx @contentful/create-contentful-app create-definition
create-definition command will walk you through the process of configuring your app, and creating an
AppDefinition. If necessary the command will also walk you through the process of authenticating with Contentful.
The configuration created in this step can easily be changed by following this link.
Once the configuration is complete, run the app:
This command starts the development server and will walk you through installing your app into a Contentful space environment. The extension will automatically reload if you make changes to the code.
Note: As Contentful runs in an HTTPS environment, temporarily disable the security checks in the browser. For example, enable "Load unsafe scripts" in Chrome.
Programmatic app management
To manage an app programmatically, refer the Content Management SDKs.
Not what you’re looking for? Try our FAQ.