Adopted from Contentful's Product Catalogue demo.
Before you begin, please make sure you have the following:
- Contentful account
- Node v16 or later
The following sections take you through the process of getting this project set up and wired up to Contentful.
Use the create-stackbit-app
command to create a new project:
npx create-stackbit-app@latest --starter angular-starter
This will create a new instance of this project in a angular-starter
directory.
After signing into Contentful, create a new community (free) space. Note that if you already have an active Contentful account, you may want to create an organization to place your new space.
When you're within an organization, you can create a new community space with the web app package.
If you don't already have a management token (or personal access token), you can generate one. To do so, go into your new empty space, then:
- Click Settings
- Chose API Keys
- Select the Content management tokens tab
- Click the button to generate a new token
Your new project already contains the content for the tutorial. You can import this into Contentful by running the setup command.
cd tutorial-contentful
npx cross-env CONTENTFUL_SPACE_ID={...} CONTENTFUL_MANAGEMENT_TOKEN={...} npm run import
Replace the {...}
with the appropriate values:
- Space ID can be found in the URL when inside a space.
- Management token is the token you just created (or referenced).
From the same place you generated the management token, you can now generate API access keys.
- Select the content delivery / preview tokens
- Choose Add API key
In your project, duplicate sample.env
to .env
. Fill in the values of CONTENTFUL_SPACE_ID
and CONTENTFUL_PREVIEW_TOKEN
.
Now you should be able to run the Next.js development server and see your content.
npm run dev
Visit localhost:3000 and you should see the example content you imported into your new Contentful space.
If you get stuck along the way, drop into our Discord server and send a message in the #documentation
or #help
channels.