Continuous Integration Tutorial

To Skip the tutorial and navigate to the code, see the example repo on GitHub.

Introduction

Like handling changes to a database, integrating Contentful into a continuous integration (CI) pipeline enables changes to a content model and migrating data as part of a deployment process. Further, it enables testing content changes and canceling a deploy process thereby preventing interruptions or downtime, in case the tests fail.

Using the Contentful CLI’s space migration command, it is possible to create, delete, and edit content models and entries programmatically entirely in JavaScript. By using the Migrations DSL tool over the Contentful web app, updating a content model becomes a repeatable process. Changes made to a content model can also be tracked by integrating it to the version control.

Space environments are entities within a space that allow a developer to create and maintain multiple versions of space-specific data, and make changes to them in isolation. This promotes teams to work on modifying a Contentful space, as any changes made to an environment do not affect production data. Every time you create a new environment, you’re creating a copy from the current version of your master space. Contentful migration tooling, when combined with space environments, starts integrating Contentful into the CI Pipeline.

A typical continuous integration pipeline creates a build and runs tests against it, before deploying code. You may have different server environments such as production, staging and qa. Integrating content migrations into that pipeline requires a few additional steps.

In the build phase, add a step to programmatically add a new environment, while running any needed migrations as part of deployment on that new environment. During the testing phase, utilize the newly-migrated environment. Assuming everything passes, we’ll create a new environment, run those migrations and update our aliases to target this created environment, and then deploy the code to the correct server.

Pre-requisites

• Understanding of the Contentful CLI to write migration scripts, Space Environments and using Environment Aliases to update an alias. Additionally to optionally deploy to a staging, or qa you’ll need two Custom Aliases named staging and qa in addition to the default master alias. Creating additional custom aliases is only available for Premium/Enterprise customers on current pricing plans.
• A CircleCI account, but it’s possible to modify the project to work with Jenkins, Travis, Buildbot or any other Continuous Integration software.
• A GitHub to host your code and Heroku for the deployment stage of this project.

Setting up Continuous Integration

Step 1: Fork and clone our example repo and configure it to utilize a Contentful space

For this project we’ll be setting up a Continuous Integration pipeline for a barebones Flask App. The tutorial repository includes the Flask site and an export of a Contentful space which has a single content type.

After cloning our tutorial repository, create a new Contentful space and import the tutorial content model.

The Contentful part (required)

• Create a new space using the contentful-cli

$ contentful space create --name "continuous delivery example"

Note: Creation of a space may result in additional charges if the free spaces available in your plan are exhausted.

• Set the newly-created space as the default space for all further CLI operations. This will present a list of all available spaces – choose the one we just created

$ contentful space use

• Import the provided content model (./import/export.json) into the newly-created space

$ contentful space import --content-file ./import/export.json

Next head into your Contentful environments settings and make sure you’ve opted into using environment aliases. If you’re a Premium/Enterprise Contentful customer, create an additional qa and staging alias.

These following steps to get the Flask site up and running are completely optional as it will only be used to test and build in our CI Pipeline. We won’t be making changes to the Python code outside of our tests in this example.

Local development environment (optional)

• Create a virtual environment

$ virtualenv env

• Activate the virtual environment

$ source env/bin/activate

• Install all Python dependencies

$ pip install -r requirements.txt

• Start the Flask app

$ python myapp.py

• Rename config file .env.example to .env and add missing keys

Step 2: Enable CircleCI to create a new Environment

Using CircleCI, we’ll create a list of steps that are run as part of the build, test and deployment phases. For this project, whenever we trigger a build phase, we want CircleCI to create a new environment, run a migration against that environment and then run our tests against that migrated environment. For each of those steps, we’ll need to write code that CircleCI can run to execute that step. Create a folder named scripts and inside it, a Javascript file called migrate.js.

To begin, we’ll need to import our dependencies and connect to Contentful via the content management client library.

1
(async () => {
2
    try {
3
        const { promisify } = require("util");
4
        const { readdir } = require("fs");
5
        const readdirAsync = promisify(readdir);
6
        const path = require("path");
7
        const { createClient } = require("contentful-management");
8
        const { default: runMigration } = require("contentful-migration/built/bin/cli");
9
10
        // utility fns
11
        const getVersionOfFile = (file) => file.replace(".js", "").replace(/_/g, ".");
12
        const getFileOfVersion = (version) => version.replace(/\./g, "_") + ".js";
13
14
        //
15
        // Configuration variables
16
        //
17
        const [, , SPACE_ID, ENVIRONMENT_INPUT, CMA_ACCESS_TOKEN] = process.argv;
18
        const MIGRATIONS_DIR = path.join(".", "migrations");
19
20
        const client = createClient(
21
          { apiAdapter: sdk.cmaAdapter }
22
        )
23
        const space = await client.space.get({
24
          spaceId: SPACE_ID,
25
        });
26
27
        var ENVIRONMENT_ID = "";
28
29
        let environment;
30
        console.log("Running with the following configuration");
31
        console.log(`SPACE_ID: ${SPACE_ID}`);

Next we’ll check if this script is running a feature branch on GitHub or if it’s going to hit one of our deploy stages and need to cause an alias to be updated. In this example we’ve hardcoded our aliases as being labeled master, staging or qa. For any aliases used, we’ll add a UTC timestamp to the name of the environment we’ll be creating.

1
if (
2
  ENVIRONMENT_INPUT == 'master' ||
3
  ENVIRONMENT_INPUT == 'staging' ||
4
  ENVIRONMENT_INPUT == 'qa'
5
) {
6
  console.log(`Running on ${ENVIRONMENT_INPUT}.`);
7
  console.log(`Updating ${ENVIRONMENT_INPUT} alias.`);
8
  ENVIRONMENT_ID = `${ENVIRONMENT_INPUT}-`.concat(getStringDate());
9
} else {
10
  console.log('Running on feature branch');
11
  ENVIRONMENT_ID = ENVIRONMENT_INPUT;
12
}
13
console.log(`ENVIRONMENT_ID: ${ENVIRONMENT_ID}`);

Since enviroment names have strict requirements about allowed characters we’ll need to have a function a that can format our timestamps for us. Given that multiple deployments to master can occur in a day, our timestamp will have granularity down to the minute.

1
function getStringDate() {
2
  var d = new Date();
3
  function pad(n) {
4
    return n < 10 ? '0' + n : n;
5
  }
6
  return (
7
    d.toISOString().substring(0, 10) +
8
    '-' +
9
    pad(d.getUTCHours()) +
10
    pad(d.getUTCMinutes())
11
  );
12
}

Next we’ll check if an environment already exists and if it does, to destroy it. When we call this script, we’ll provide it with the name of the branch that it will use to create the new environment. Then, a new environment that’s a copy of master is created and polled until we received confirmation that it exists.

1
// ---------------------------------------------------------------------------
2
console.log(`Checking for existing versions of environment: ${ENVIRONMENT_ID}`);
3
4
try {
5
  environment = await client.environment.get({
6
    spaceId: space.sys.id,
7
    environmentId: ENVIRONMENT_ID,
8
  });
9
  if (
10
    ENVIRONMENT_ID != 'master' ||
11
    ENVIRONMENT_ID != 'staging' ||
12
    ENVIRONMENT_ID != 'qa'
13
  ) {
14
    await client.environment.delete({
15
      spaceId: space.sys.id,
16
      environmentId: environment.sys.id,
17
    });
18
    console.log('Environment deleted');
19
  }
20
} catch (e) {
21
  console.log('Environment not found');
22
}
23
24
// ---------------------------------------------------------------------------
25
if (
26
  ENVIRONMENT_ID != 'master' ||
27
  ENVIRONMENT_ID != 'staging' ||
28
  ENVIRONMENT_ID != 'qa'
29
) {
30
  console.log(`Creating environment ${ENVIRONMENT_ID}`);
31
  environment = await client.environment.createWithId({
32
    spaceId: space.sys.id,
33
    environmentId: ENVIRONMENT_ID,
34
  });
35
}
36
// ---------------------------------------------------------------------------
37
const DELAY = 3000;
38
const MAX_NUMBER_OF_TRIES = 10;
39
let count = 0;
40
41
console.log('Waiting for environment processing...');
42
43
while (count < MAX_NUMBER_OF_TRIES) {
44
  const status = (await client.environment.get({
45
    spaceId: space.sys.id,
46
    environmentId: environment.sys.id,
47
  })).sys.status.sys.id;
48
49
  if (status === 'ready' || status === 'failed') {
50
    if (status === 'ready') {
51
      console.log(`Successfully processed new environment (${ENVIRONMENT_ID})`);
52
    } else {
53
      console.log('Environment creation failed');
54
    }
55
    break;
56
  }
57
58
  await new Promise((resolve) => setTimeout(resolve, DELAY));
59
  count++;
60
}

Lastly we’ll update our API keys to have access to the newly created environment so that our tests will be able to utilize it with the existing delivery API key we’ll configure later in CircleCI.

1
// ---------------------------------------------------------------------------
2
console.log('Update API keys to allow access to new environment');
3
const newEnv = {
4
  sys: {
5
    type: 'Link',
6
    linkType: 'Environment',
7
    id: ENVIRONMENT_ID,
8
  },
9
};
10
11
const { items: keys } = await client.apiKey.getMany({
12
  spaceId: '<space_id>'
13
});
14
await Promise.all(
15
  keys.map((key) => {
16
    console.log(`Updating - ${key.sys.id}`);
17
    key.environments.push(newEnv);
18
    return key.update();
19
  })
20
);

Step 3: Create a new Content Type named versionTracking

For CircleCI to know which migrations it should run, we’ll need to track which migrations have been run by adding a version number into Contentful. We accomplish this in Contentful by creating a new content model with an ID of versionTracking that has a single short-text-field named version.

You’ll also need to create one entry of your new content model with the value 1. We’ll be using integers in this demo to track migrations.

Step 4: Create migrations

The Contentful Migration DSL allows us to:

• Create, delete and edit content models and content entries all in JavaScript.
• Establish a repeatable process of updating content model (where the Contentful web app does not)
• Track changes by integrating them into our version control; hence implementing CMS as Code.

The provided space in the example repo contains a list of Marvel superheroes; each having a name, GIF, first appearance and slug. For our first migration, we’ll modify the content model to include an author field.

Start by creating a new folder in the root directory named migration—this is where we’ll place all our migrations. We’ll need to create an empty migration file to represent the initial import that we did in step 1. Create 1.js and include the following code:

1
module.exports = function runMigration(migration) {
2
  return;
3
};

Next, create a JavaScript file named 2.js with the following code to add an author field to our content model:

1
module.exports = function runMigration(migration) {
2
  const post = migration.editContentType('post');
3
  post.createField('author').name('author').type('Symbol').required(false);
4
};

Lastly, we’ll create a second migration named 3.js to set the newly created author field of each hero as Stan Lee.

1
module.exports = function (migration) {
2
  migration.transformEntries({
3
    contentType: 'post',
4
    from: ['author'],
5
    to: ['author'],
6
    transformEntryForLocale: function (fromFields, currentLocale) {
7
      const author = 'Stan Lee';
8
      return { author: author };
9
    },
10
  });
11
};

Since we’ve changed our content model, we’ll also need to update our tests. Update the test_content_type_post function in the test_app.py file with the following:

1
def test_content_type_post(self, contentful_client):
2
        """Test content model of a post"""
3
        post_content_type = contentful_client.content_type("post")
4
    # Expect 5 fields in a post now that we've added an author field.
5
        assert len(post_content_type.fields) == 5
6
        title = next(d for d in post_content_type.fields if d.id == "title")
7
        assert title.id == "title"
8
        assert title.type == "Symbol"

And add the following test into our function:

1
        author = next(d for d in post_content_type.fields if d.id == "author")
2
        assert author.id == "author"
3
        assert author.type == "Symbol"

Step 5: Update migrate.js to run our migrations.

Now that we have a directory of migrations to run against our space, we’ll need to update our script so that CircleCI can run those migrations for us.

First we’ll append to migrate.js code to set our default locale, check what migrations we have available and the finally detect what migrations need to be run by looking at our versionTracking entry.

1
// ---------------------------------------------------------------------------
2
console.log('Set default locale to new environment');
3
  const defaultLocale = (
4
    await client.locale.getMany({
5
      spaceId: space.sys.id,
6
      environmentId: environment.sys.id,
7
    })
8
  ).items.find((locale) => locale.default).code;
9
10
// ---------------------------------------------------------------------------
11
console.log('Read all the available migrations from the file system');
12
const availableMigrations = (await readdirAsync(MIGRATIONS_DIR))
13
  .filter((file) => /^\d+?\.js$/.test(file))
14
  .map((file) => getVersionOfFile(file));
15
16
// ---------------------------------------------------------------------------
17
console.log('Figure out latest ran migration of the contentful space');
18
const { items: versions } = client.entry.getMany({
19
  query: {
20
    content_type: "versionTracking",
21
  },
22
  spaceId: space.sys.id,
23
  environmentId: environment.sys.id,
24
});
25
26
if (!versions.length || versions.length > 1) {
27
  throw new Error("There should only be one entry of type 'versionTracking'");
28
}
29
30
let storedVersionEntry = versions[0];
31
const currentVersionString = storedVersionEntry.fields.version[defaultLocale];
32
33
// ---------------------------------------------------------------------------
34
console.log('Evaluate which migrations to run');
35
const currentMigrationIndex = availableMigrations.indexOf(currentVersionString);
36
37
if (currentMigrationIndex === -1) {
38
  throw new Error(
39
    `Version ${currentVersionString} is not matching with any known migration`
40
  );
41
}
42
const migrationsToRun = availableMigrations.slice(currentMigrationIndex + 1);
43
const migrationOptions = {
44
  spaceId: SPACE_ID,
45
  environmentId: ENVIRONMENT_ID,
46
  accessToken: CMA_ACCESS_TOKEN,
47
  yes: true,
48
};

Lastly we’ll run all the migrations that we’ve evaluated as being necessary and update the version number.

1
// ---------------------------------------------------------------------------
2
console.log('Run migrations and update version entry');
3
while ((migrationToRun = migrationsToRun.shift())) {
4
  const filePath = path.join(
5
    __dirname,
6
    '..',
7
    'migrations',
8
    getFileOfVersion(migrationToRun)
9
  );
10
  console.log(`Running ${filePath}`);
11
  await runMigration(
12
    Object.assign(migrationOptions, {
13
      filePath,
14
    })
15
  );
16
  console.log(`${migrationToRun} succeeded`);
17
18
  storedVersionEntry.fields.version[defaultLocale] = migrationToRun;
19
  storedVersionEntry = await client.entry.update(
20
    {
21
      spaceId: space.sys.id,
22
      environmentId: environment.sys.id,
23
      entryId: storedVersionEntry.sys.id,
24
    },
25
    { ...storedVersionEntry }
26
  );
27
  storedVersionEntry = await client.entry.publish(
28
    {
29
      spaceId: space.sys.id,
30
      environmentId: environment.sys.id,
31
      entryId: storedVersionEntry.sys.id,
32
    },
33
    { ...storedVersionEntry }
34
  );
35
36
  console.log(`Updated version entry to ${migrationToRun}`);
37
}

Step 6: Update migrate.js to update our alias during deployment.

If this migration script was called as part of a deployment we’ll have created a new environment. Since this example uses a staging, qa and master, it’ll create a new enviroment with the name of whatever aliases is being updated, a dash and then a timestamp appended to the end. For example if we trigger a deploy out to staging we’ll create something named staging- and the date and time.

Next we’ll need to add some code to update our environment alias with the ID of master to refer to this created enviroment.

1
// ---------------------------------------------------------------------------
2
console.log('Checking if we need to update an alias');
3
if (
4
  ENVIRONMENT_INPUT == 'master' ||
5
  ENVIRONMENT_INPUT == 'staging' ||
6
  ENVIRONMENT_INPUT == 'qa'
7
) {
8
  console.log(`Running on ${ENVIRONMENT_INPUT}.`);
9
  console.log(`Updating ${ENVIRONMENT_INPUT} alias.`);
10
  try {
11
    const environmentAlias = await client.environmentAlias.get({
12
      spaceId: space.sys.id,
13
      environmentAliasId: ENVIRONMENT_INPUT,
14
    });
15
    await client.environmentAlias.update(
16
      {
17
        spaceId: space.sys.id,
18
        environmentAliasId: ENVIRONMENT_INPUT,
19
      },
20
      {
21
        ...environmentAlias,
22
        environment: {
23
          sys: {
24
            type: 'Link',
25
            linkType: 'Environment',
26
            id: ENVIRONMENT_ID,
27
          },
28
        },
29
      }
30
    );
31
    console.log(`alias ${alias.sys.id} updated.`);
32
  } catch (e) {
33
    console.error(e);
34
  }
35
  console.log(`${ENVIRONMENT_INPUT} alias updated.`);
36
} else {
37
  console.log('Running on feature branch');
38
  console.log('No alias changes required');
39
}
40
console.log('All done!');

The finalized migrate.js file should be identical to the version in our completed example.

Step 6: Create CircleCI Config File

The final step before we can push our code to GitHub is to create a CircleCI config file. We’ll start with the default CircleCI config file, which is included in the example directory, and make a few changes. As CircleCI instructs, save, the config.yml file is inside a folder named .circleci on the root directory.

We’ll need to add several modifications to the default config.yml provided by CircleCI.

Start by updating the image to include a version that comes with Node since we’ll need that to use the migration DSL:

1
- image: circleci/python:3.6.5-node

Update the install dependencies step to additionally install the requirements listed in the package.json provided in the repo:

1
- run:
2
    name: install dependencies
3
    command: |
4
      python3 -m venv venv
5
      . venv/bin/activate
6
      pip install -r requirements.txt
7
      npm install

Add a step to prepare the environment for testing immediately after installing dependencies, but before running the tests. This step will utilize the previously created migrate.js file we created in steps 2.

1
- run:
2
    name: Preparing environment for testing
3
    command: |
4
      . venv/bin/activate
5
      scripts/migrate.js $SPACE_ID "CI_$CIRCLE_BRANCH" $MANAGEMENT_API_KEY

Update the test step to utilize the new environment.

1
# run tests!
2
- run:
3
    name: run tests
4
    command: |
5
      . venv/bin/activate
6
      pytest --environment-id="CI_$CIRCLE_BRANCH"

Once completed the config.yml file should look like this.

If we want to optionally include the deployment to Heroku in our initial CI rollout, we can do so utilizing the example deployment config and Heroku setup files that CircleCI provides for Flask deployments.

1
deploy:
2
  docker:
3
    - image: circleci/python:3.6.5-node-browsers
4
  environment:
5
    # Update HEROKU_APP with your application Name.
6
    HEROKU_APP_NAME: 'migration-env-demo'
7
  steps:
8
    - checkout
9
10
    # Download and cache dependencies
11
    - restore_cache:
12
        keys:
13
          - v1-dependencies-{{ checksum "package.json" }}
14
          # fallback to using the latest cache if no exact match is found
15
          - v1-dependencies-
16
17
    - run:
18
        name: install dependencies
19
        command: |
20
          npm install
21
22
    - save_cache:
23
        paths:
24
          - node_modules
25
        key: v1-dependencies-{{ checksum "package.json" }}
26
27
    - run:
28
        name: Creating new master environment and setting master alias
29
        command: |
30
          scripts/migrate.js $SPACE_ID master $MANAGEMENT_API_KEY
31
32
    - run:
33
        name: setup Heroku
34
        command: bash .circleci/setup-heroku.sh
35
36
    - deploy:
37
        name: Deploy Master to Heroku
38
        command: |
39
          if [ "$CIRCLE_BRANCH" == "master" ] || [ "$CIRCLE_BRANCH" == "staging" ] || [ "$CIRCLE_BRANCH" == "qa"]; then
40
            git push heroku $CIRCLE_BRANCH
41
          fi
42
43
workflows:
44
  version: 2
45
  build-deploy:
46
    jobs:
47
      - build
48
      - deploy:
49
          requires:
50
            - build
51
          filters:
52
            branches:
53
              only:
54
                - master
55
                - staging
56
                - qa

Using the workflow section of the config.yml, we’re able to setup a filter that will cause our deploy to only occur whenever we update the master, staging or qa branch on GitHub.

Given that our tests could potentially take upto a few minutes, we’ll be reruning our migration against a clean copy of master to pick up any content changes that might have occured during this process. In the event of any issues our previously enviroment will still exist and we can manually change the enviroment alias back to a previous version.

Step 7: Push code to GitHub and configure CircleCI

Now that we’ve made the changes needed for the project, we can push the code to GitHub on master. After logging in into the CircleCI website, click “Set Up Project” on the repository we’re using.

Click “Start building”—this first build will fail because it’ll be missing environment variables. From this screen, click the gear icon to be taken to the project settings. The project settings page allows us to access the environment variables where we can add the following keys: DELIVERY_API_KEY, MANAGEMENT_API_KEY, SPACE_ID, HEROKU_LOGIN and HEROKU_API_KEY.

Rerun the build and everything should pass!

Going forward when we create any pull request, GitHub will trigger CircleCI. The CircleCI config.yml will evaulated how a PR should be handled. If something is triggered on a feature branch or in a pull request only the build stage will occur. When a branch is merged into master, staging or qa, CircleCI will trigger a build and deploy. The deploy stage will cause the relevant aliases on Contentful to be updated and our code to be deployed out to Heroku.

What’s next?

After following these steps, we’ll have a fully-functional CI pipeline integrated with Contentful. Any time someone make a PR, CircleCI will automatically run tests and create a new environment based on the branch name that will be used to verify code quality. If all our tests pass and a deploy occurs we’ll create a new environment and update our environment alias to the branch that we PR into to target that new environment. While this tutorial most likely won’t match 1 to 1 with your current CI/CD pipeline, hopefully it’ll serve as an inspiration to add Contentful’s migration tooling and alias features into your pipeline. Given the differences in labeling when it comes to pipelines you’ll need to adjust the migration.js file and config.yml file to match the pipeline and branches that you’re using in your own project.

Using this example, to run a migration against Contentful create a new migration file inside the migration folder and bump up the version number. With this method, if we need to revert, it’s simple to do so by updating our enviroment allias to it’s previous iteration. However, any bad migrations should not affect a production space since any failed tests will cause the build phase of this CI pipeline to not trigger, and thus our aliases to stay constant and our code to not deploy. In fact, since CircleCI runs tests and migrations that are part of the PR review process, a bad migration should theoretically never hit production assuming it isn’t accidentally merged on GitHub.