Skip to content

Repository files navigation

Uniform Context Contentful starter kit

This is Starter kit with a Next.js app enabled with Uniform Context and Contenful. This starter requires the Uniform Context app to be installed in your Contentful space..

Getting Started

First, you must provide API keys to connect with empty Uniform App project and empty space in Contentful:

  1. Copy .env.example into .env and fill all the keys

  2. Enable SSR or SSG depending on NEXT_USE_SSR env variable, it is set to the SSG mode out of the box. See .env.example:

    NEXT_USE_SSR=0
    
  3. Run the following script to generate the slug page file:

    npm run generate:slug-page
    

Setup Uniform Context

  1. Import the Uniform Context definitions into your Uniform project (make sure your Uniform API key has permissions to write to Uniform Context):

    npm run push:context
    
  2. Generate the Uniform Context manifest file locally by running this script:

    npm run generate:manifest
    

Setup Contentful space

  1. Install the latest Contentful CLI: npm install contentful-cli -g more details here.

  2. Make sure you logged into Contentful CLI with contentful login and have access to the space you are about to import the content to.

  3. Import content model and content entries with assets:

    contentful space import --content-file ./scripts/export.json --space-id <YOUR_CONTENTFUL_SPACE_ID>
    
  4. Install the Uniform app from marketplace

    All configured fields for Context App should be automatically configured in App installation page

  5. Make sure you apply the Uniform app to each field where Uniform is expected to be used:

    1. Open field settings
    2. Open the Appearance tab
    3. Select the Uniform app
    4. Confirm & Save the field changes.

    Repeat the following steps below for each of the models and field combination:

    - Page -> Enrichment Tags
    - Hero -> Personalization Criteria
    - Talk -> Personalization Criteria
    - Talk List -> Personalization Criteria
    

For the security reason all automatically created fields in Content Types needs to manually configured to use Uniform Context in the Appearance section for each field.

  1. Optional: pull latest Typescript types for content types:

    npm run generate:types
    

How to run the app

  1. Run dev server:

    npm run dev
    
  2. Run the production build:

    npm run build
    npm run start
    
  3. Open http://localhost:3000 with your browser to see the result.

Export you local changes in Contentful and Uniform

  1. Export latest Contentful content model and content (you may need to login into Contentful CLI first):

    contentful space export --config .\scripts\export-config.json --space-id <YOUR_CONTENTFUL_SPACE_ID>
    
  2. Export the Uniform Context entities from your project:

    npm run pull:context
    

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!