Exporting and importing custom themes and site configuration by using the Portal Admin API

The platform REST APIs for IBM® API Connect provide complete access to the capability of the platform. So, you can use the Developer Portal command-line tool, cli, to replicate changes from one Developer Portal instance to another. However, if the Developer Portal cli was unavailable for some reason, you can use the Portal Admin API.

Before you begin

To complete this scenario, you must have a staging Developer Portal and a production Developer Portal enabled. You must have administrator access, or the permission settings:manage, to both to complete this scenario. The tutorial Creating the Portal explains how to enable the portal if you have not already done so.

Also, you must have downloaded and installed the toolkit. For more information, see Installing the toolkit.

About this scenario

In this scenario, you use the toolkit to obtain some authentication. Then, on your staging Developer Portal, you create a theme and make some configuration changes. Then, you use the Portal Admin API to replicate the changes on your production Developer Portal.

Obtaining the client ID and secret, and a bearer token.

From your toolkit:
  1. Obtaining the client ID and secret.
    1. Obtain the list of administrator scoped providers to determine the correct realm to use:
      apic identity-providers:list --scope admin --server <management_server>
      For example,
      apic identity-providers:list --scope admin --server api.stagingexample.com
      Here is an example of some possible output:
      default-idp-1
    2. Run apic login, complete the details:
      apic login --server management_server --realm cloud_realm --username admin_username --password admin_password
      For example,
      apic login -s api.stagingexample.com --realm provider/default-idp-1 --username admin --password Qwerty123£
    3. Log in to cloud manager, and register an app. Make a new file locally and call it app1.json. Then, copy into it the following code snippet:
      {
        "name": "app1",
        "client_id": "app1id", 
        "client_secret": "app1secret",
        "client_type": "toolkit"
      }
    4. Run the registration create command:
      apic registrations:create --server management_server app1.json
      For example,
      apic registrations:create --server api.stagingexample.com app1.json
      Here is an example of some possible output:
      app1    [state: enabled]   https://api.stagingexample.com/api/cloud/registrations/d2b7572f-3406-42a7-bdcc-85f177860df7
  2. Now, you can get a bearer token from the provider org.
    1. To obtain a list of provider realms:
      apic identity-providers:list --scope provider --server management_server
      For example,
      apic identity-providers:list --scope provider --server api.stagingexample.com
      Here is an example of some possible output:
      default-idp-2
    2. Run apic login, complete the details:
      apic login --server management_server --realm provider_realm --username org_username --password org_password
      For example,
      apic login -s api.stagingexample.com --realm provider/default-idp-2 --username ibm --password Qwerty123£
    3. Create an HTTP request to obtain an access token:
      curl -k -X POST -d '{"username": "org_username", "password": "org_password", "realm": "provider/default-idp-2", "client_id": "app_id", "client_secret": "app_secret", "grant_type": "password"}' -H 'Content-Type: application/json' -H 'Accept: application/json' https://management_server/api/token
      For example,
      curl -k -X POST -d '{"username": "steve", "password": "T****8", "realm": "provider/default-idp-2", "client_id": "app1id", "client_secret": "app1secret", "grant_type": "password"}' -H 'Content-Type: application/json' -H 'Accept: application/json' https://api.stagingexample.com/api/token
      Here is an example of some possible output:
      {
          "access_token": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IjBDQkI2Mjg5MkU4QUNFNEIzNDZCQzcyNDMxMUY0QzE4NTU2MUE4NjkifQ.eyJqdGkiOiJlNDY2M2U4MC0wMzlkLTRiNDUtYmFjZC04NjA2MDcwZDIwODIiLCJuYW1lc3BhY2UiOiJiMTU4YjdhYy1kMTEzLTQxNDctODE1OS05ZDliNGViZjE3ZGE6ZjdhY2IwNzMtYzU4ZC00ZjhkLWIwZDYtMGNlM2YwYjIyYmNmOmZjMWRlOTE2LWI1NDAtNDE4MS1iZTJiLWM4ZGU0NGVlYTMzZiIsImF1ZCI6Ii9hcGkvY2xvdWQvcmVnaXN0cmF0aW9ucy9kMmI3NTcyZi0zNDA2LTQyYTctYmRjYy04NWYxNzc4NjBkZjciLCJzdWIiOiIvYXBpL3VzZXItcmVnaXN0cmllcy9iMTU4YjdhYy1kMTEzLTQxNDctODE1OS05ZDliNGViZjE3ZGEvZjdhY2IwNzMtYzU4ZC00ZjhkLWIwZDYtMGNlM2YwYjIyYmNmL3VzZXJzL2ZjMWRlOTE2LWI1NDAtNDE4MS1iZTJiLWM4ZGU0NGVlYTMzZiIsImlzcyI6IklCTSBBUEkgQ29ubmVjdCIsImV4cCI6MTU5MTcyMzU5NSwiaWF0IjoxNTkxNjk0Nzk1LCJncmFudF90eXBlIjoicGFzc3dvcmQiLCJ1c2VyX3JlZ2lzdHJ5X3VybCI6Ii9hcGkvdXNlci1yZWdpc3RyaWVzL2IxNThiN2FjLWQxMTMtNDE0Ny04MTU5LTlkOWI0ZWJmMTdkYS9mN2FjYjA3My1jNThkLTRmOGQtYjBkNi0wY2UzZjBiMjJiY2YiLCJyZWFsbSI6InByb3ZpZGVyL2RlZmF1bHQtaWRwLTIiLCJ1c2VybmFtZSI6InRqIiwiaWRfdG9rZW4iOiJleUpoYkdjaU9pSlNVekkxTmlJc0luUjVjQ0k2SWtwWFZDSXNJbXRwWkNJNklqVXhRamN4T0RCRU9ESkRNME5HUXpWQlFrSkZPREZHUkRjd05VWTFOekl3TkRBek5FTXpNalFpZlEuZXlKbWFYSnpkRjl1WVcxbElqb2lWR1ZxWVhOMmFXNXBJaXdpYkdGemRGOXVZVzFsSWpvaVUyRnFhWFFpTENKMWMyVnlYMmxrSWpvaVl6aG1NREF4T1RjdFlqQXhZaTAwWkRnd0xXSXhObUl0TURjMk1UUTNaR0pqT1RFMklpd2lkWE5sY201aGJXVWlPaUowYWlJc0ltVnRZV2xzSWpvaWRHVnFZWE4yYVc1cExuTmhhbWwwUUdsaWJTNWpiMjBpTENKcFlYUWlPakUxT1RFMk9UUTNPVFY5LlVuRWhRaTFMTDFzcmlrUE9ReGR0Tkx3SG5iQ24yNnF1U2F5Y2N4WFh0SWstc2YxZEp0T2RaM2k5c2lZdWxkZ0QxV2dueG0wT0UwaVhrRE1kLThsUFVuVzJqc3NaYno4ak5faXlJVWhmVEZsNmVUNER6WTV6WkJiUmJjYzJZUXlneXQxYnBOOFZnRlJKbm01S2xidUhTXzBkV3BJbVdJeU51em5ndjlhTk9VaVFMVTdCdlpNS0xLQmt6US1tMGRVSFdzZi1mRlB2cVE5MVUxTy14MVZ4MDBnSHFEQXZlM0VyWExlZm14dGYwalVTY0prcUdjUXVvcE9yNDRNdGcyVUJIRXJhUWpadmlMb0JwUlNja25uX1hnRXpZVXdzeUUzQ2d6SC1sRjhJa2Q4VGtqT0tELUc3YmJoRWlZcUhxdnJxVTk0Z18tZ05KbEE0MEZ2b2xnV25GQSIsInNjb3BlcyI6WyJjbG91ZDp2aWV3IiwiY2xvdWQ6bWFuYWdlIiwicHJvdmlkZXItb3JnOnZpZXciLCJwcm92aWRlci1vcmc6bWFuYWdlIiwib3JnOnZpZXciLCJvcmc6bWFuYWdlIiwicHJvZHVjdC1kcmFmdHM6dmlldyIsInByb2R1Y3QtZHJhZnRzOmVkaXQiLCJhcGktZHJhZnRzOnZpZXciLCJhcGktZHJhZnRzOmVkaXQiLCJjaGlsZDp2aWV3IiwiY2hpbGQ6Y3JlYXRlIiwiY2hpbGQ6bWFuYWdlIiwicHJvZHVjdDp2aWV3IiwicHJvZHVjdDpzdGFnZSIsInByb2R1Y3Q6bWFuYWdlIiwiYXBwcm92YWw6dmlldyIsImFwcHJvdmFsOm1hbmFnZSIsImFwaS1hbmFseXRpY3M6dmlldyIsImFwaS1hbmFseXRpY3M6bWFuYWdlIiwiY29uc3VtZXItb3JnOnZpZXciLCJjb25zdW1lci1vcmc6bWFuYWdlIiwiYXBwOnZpZXc6YWxsIiwiYXBwOm1hbmFnZTphbGwiLCJteTp2aWV3IiwibXk6bWFuYWdlIiwid2ViaG9vazp2aWV3Il19.LjfCGN7ymxERSlezc4NhApPj_UDAnSP_N17kDgWwQb_5vjmROu4sDa_VlrbjUMM8jiTv2kqFZdHFtn9c3zgY4aDyqC_AAmhqT3HCVu_9SQCYK9cVTANxswxBfIRDHArqzJ4MiEw_lSfK8pZnd_XjQ5sg9B-vKUgJwrB7Bk6X2N6Cm3_QvCQtMCgTevBmwIzE9SIQiOV2041uRj5O0E3NASfacJsWOS4AzSPOMjgxMnWHIgP98MsU0u8v1Hf1VEn1wtrCO7FLiU7DeKYEa1-1EbqUB0sejwQoKvSYHMFwnh3K8Y97g21bdjkAcSwVOk02FpUMIIz4aeInYqwlUdzqww",
          "token_type": "Bearer",
          "expires_in": 28800
      }
    4. Save the token in a variable in your terminal:
      TOKEN="<paste the access token that you obtained>"
      You can now authenticate yourself when you invoke the Portal Admin CLI by using the REST API.

Create a custom theme on the staging Developer Portal

  1. Log in to your staging Developer Portal as an administrator.
  2. If the administrator dashboard isn’t displayed, click Manage to display it.
  3. Click Appearance > Generate sub-theme. The Generate sub-theme window is displayed.
  4. Enter a Sub-theme name, and select CSS for the Sub-theme type. (If you prefer, you can select SCSS, but this extension to CSS is for advanced theme developers, and isn’t covered by this scenario.)
    Generate subtheme window.
  5. Select the Default template to base your sub-theme on. You can create a sub-theme based on a color template. However, for this scenario you use the default connect_theme template.
  6. Click Generate.
  7. Download the generated sub-theme to a location of your choice, and extract all the files from the .zip file.

On your computer, navigate to the files that you extracted. Find the overrides.css file in here banka_theme/banka_theme/css/overrides.css. You can now customize the overrides.css file.

  1. Open the overrides.css file in your chosen editor.
  2. Customize your sub-theme by entering the following elements into the overrides.css file:
    /* Body of the home page */
    body.path-frontpage.contexthome {
      color: #152935;
      background-color: #d1f0f7;
    }
    
    /* Header of the home page */
    .navbar {
      background-color: #a0a0a0;
    }
    
    /* Footer of the home page */
    footer.footer {
    background-color: #dee0e2;
    }
    
    footer.footer ul.nav > li > a {
    color: #454A4C;
    }
    Copy the given code block into your css file
  3. Save the overrides.css file.

You can now install and enable your customized theme.

  1. After you finish updating the overrides.css file, compress all the theme files back into the .zip sub-theme file that you downloaded originally.
  2. In the Developer Portal, click Appearance > Install new theme. The Install new theme window is displayed.
  3. In Upload a module or theme archive to install click Browse, and navigate to your newly updated compressed theme file.
  4. Click Install to install the theme onto your site.
  5. Click Enable newly added themes, and find your new theme in the list of Disabled themes. Click Enable and set as default to set your new custom sub-theme as the default theme for your site.
  6. Return to the Developer Portal home page by clicking Back to site. You can now see your custom theme.
    The home page with the updated theme

Add a field to an application content type to change the site-config on the staging Developer Portal

  1. Log in to your staging Developer Portal as an administrator.
  2. If the administrator dashboard isn’t displayed, click Manage to display it.
  3. Click Structure > Content types > Application > Manage fields.
  4. Click + Add field.
  5. In Add a new field, select Text (plain, long). Enter Company name as the label title.

    A screen shot of the add field page

  6. Click Save and continue.
  7. Leave the Allowed number of values set to 1 and click Save field settings.
  8. Click Save field settings. You can now see your new field.

    New field now showing in list

Use the Portal Admin API to export the custom themes and site-config on the staging Developer Portal

  1. Export your custom themes.
    1. Create the export job by using this command:
      curl -k -X 'POST' -H "Authorization: bearer $TOKEN" -H 'Accept: application/yaml' 'https://<management_server>/portal/catalogs/<org>/<catalog>/custom-theme/export'
      For example,
      curl -k -X 'POST' -H "Authorization: bearer $TOKEN" -H 'Accept: application/yaml' 'https://api.stagingexample.com/portal/catalogs/ibm/staging/custom-theme/export'
      Here is an example of some possible output:
      
      status: 201
      message:
        stdout: >-
          /catalogs/75cfdc05-e818-408e-8ce6-fd3fd61c8756/f09602a2-a0e4-40dc-a82d-d1af326ad092/custom-theme/export/85z2m39znojolv2s/status
        stderr: ''
      errors: []
    2. You can check the status of the export job by invoking the /status endpoint.
      curl -k -X 'GET' -H "Authorization: bearer $TOKEN"  -H 'Accept: application/yaml' 'https://<management_server>/portal/catalogs/<org>/<catalog>/custom-theme/export/<task_id>/status'
      For example,
      curl -k -X 'GET' -H "Authorization: bearer $TOKEN" -H 'Accept: application/yaml' 'https://api.stagingexample.com/portal/catalogs/ibm/staging/custom-theme/export/85z2m39znojolv2s/status'
      Here is an example of some possible output:
      {
        "status": 200,
        "message": {
          "stdout": "The status of this task is: FINISHED and the artifact can now be streamed"
        },
        "errors": []
      }
    3. You can now download the custom theme file onto your machine.
      curl -k -X 'GET' -H "Authorization: bearer $TOKEN" -H 'Accept: application/octet-stream' 'https://<management_server>/portal/catalogs/<org>/<catalog>/custom-theme/export/<task_id>' -o <theme_name>
      For example,
      curl -k -X 'GET' -H "Authorization: bearer $TOKEN" -H 'Accept: application/octet-stream' 'https://api.stagingexample.com/portal/catalogs/ibm/staging/custom-theme/export/85z2m39znojolv2s' -o mytheme.tgz
      Note: When you use the curl commands to download files, if you do not specify an output with -o, it incorrectly prints the output as binary onto the terminal screen.
    4. On Mac and Linux® machines, you can verify that you have a valid theme export .tgz file by invoking the tar t --list argument.
      tar -tvf <theme_name>
      For example,
      tar -tvf mytheme.tgz
      Here is an example of some possible output:
      
      drwxrwsr-x  0 aegir  aegir       0  9 Jun 13:40 ./
      drwxr-sr-x  0 aegir  aegir       0  9 Jun 13:40 emerald_theme_css/
      -rw-r--r--  0 aegir  aegir       7  9 Jun 13:40 emerald_theme_css/emerald_theme_css.theme
      -rw-r--r--  0 aegir  aegir   29224  9 Jun 13:40 emerald_theme_css/screenshot.png
      -rw-r--r--  0 aegir  aegir     442  9 Jun 13:40 emerald_theme_css/composer.json
      -rw-r--r--  0 aegir  aegir     599  9 Jun 13:40 emerald_theme_css/emerald_theme_css.info.yml
      -rw-r--r--  0 aegir  aegir    1150  9 Jun 13:40 emerald_theme_css/favicon.ico
      -rw-r--r--  0 aegir  aegir    5932  9 Jun 13:40 emerald_theme_css/logo.svg
      -rw-r--r--  0 aegir  aegir      61  9 Jun 13:40 emerald_theme_css/emerald_theme_css.libraries.yml
      drwxr-sr-x  0 aegir  aegir       0  9 Jun 13:40 emerald_theme_css/css/
      -rw-r--r--  0 aegir  aegir   47249  9 Jun 13:40 emerald_theme_css/css/overrides.css
  2. Export your site config.
    1. Create the export job by using this command:
      curl -k -X 'POST' -H "Authorization: bearer $TOKEN" -H 'Accept: application/json' 'https://<management_server>/portal/catalogs/<org>/<catalog>/config/export'
      For example,
      curl -k -X 'POST' -H "Authorization: bearer $TOKEN" -H 'Accept: application/json' 'https://api.stagingexample.com/portal/catalogs/ibm/staging/config/export'
      Here is an example of some possible output:
      {
          "status": 201,
          "message": {
              "stdout": "/catalogs/75cfdc05-e818-408e-8ce6-fd3fd61c8756/f09602a2-a0e4-40dc-a82d-d1af326ad092/config/export/5cy1gk55ciiwn190/status",
              "stderr": ""
          },
          "errors": []
      }
    2. You can check the status of the export job by invoking the /status endpoint.
      curl -k -X 'GET' -H "Authorization: bearer $TOKEN" -H 'Accept: application/json' 'https://<management_server>/portal/catalogs/<org>/<catalog>/config/export/<task_id>/status'
      For example,
      curl -k -X 'GET' -H "Authorization: bearer $TOKEN" -H 'Accept: application/json' 'https://api.stagingexample.com/portal/catalogs/ibm/staging/config/export/5cy1gk55ciiwn190/status'
      Here is an example of some possible output:
      {
        "status": 200,
        "message": {
          "stdout": "The status of this task is: FINISHED and the artifact can now be streamed"
        },
        "errors": []
      }
    3. You can now download the site-config file onto your machine.
      curl -k -X 'GET' -H "Authorization: bearer $TOKEN" -H 'Accept: application/octet-stream' 'https://<management_server>/portal/catalogs/<org>/<catalog>/config/export/<task_id>' -o <config_name>
      For example,
      curl -k -X 'GET' -H "Authorization: bearer $TOKEN" -H 'Accept: application/octet-stream' 'https://api.stagingexample.com/portal/catalogs/ibm/staging/config/export/5cy1gk55ciiwn190' -o myconfig.tgz
      Note: When you use the curl commands to download files, if you do not specify an output with -o, it incorrectly prints the output as binary onto the terminal screen.
    4. On Mac and Linux machines, you can verify that you have a valid theme export .tgz file by invoking the tar t --list argument. The head -n 10 option returns the first 10 lines of the result.
      tar -tvf <config_name> | head -n 10
      For example,
      tar -tvf myconfig.tgz | head -n 10
      Here is an example of some possible output, which should be a list of yaml files:
      -rw-rw-r--  0 aegir  aegir 393 11 Jun 15:54 block.block.bartik_page_title.yml
      -rw-rw-r--  0 aegir  aegir 577 11 Jun 15:54 filter.format.plain_text.yml
      -rw-rw-r--  0 aegir  aegir 256 11 Jun 15:54 captcha.captcha_point.consumerorg_invite_user_form.yml
      -rw-rw-r--  0 aegir  aegir 741 11 Jun 15:54 block.block.emerald_theme_css_account_menu.yml
      -rw-rw-r--  0 aegir  aegir 488 11 Jun 15:54 field.field.node.application.apic_hostname.yml
      -rw-rw-r--  0 aegir  aegir 460 11 Jun 15:54 field.storage.node.apic_catalog_id.yml
      -rw-rw-r--  0 aegir  aegir 545 11 Jun 15:54 field.field.user.user.apic_user_registry_url.yml
      -rw-rw-r--  0 aegir  aegir 427 11 Jun 15:54 language.content_settings.shortcut.default.yml
      -rw-rw-r--  0 aegir  aegir 460 11 Jun 15:54 field.storage.node.api_soapversion.yml
      -rw-rw-r--  0 aegir  aegir 148 11 Jun 15:54 captcha.captcha_point.node_product_form.yml

Use the Portal Admin API to import the custom themes and site-config on the production Developer Portal

Note: If you are importing your custom theme onto a new server, then before you continue, follow step 1 of this tutorial to obtain a new token to authenticate with your second server. If you are using the same server, and are importing the theme into a new catalog, then the current TOKEN remains valid for the rest of the steps.
Note: You must import the custom theme before you import the site config. This order is because the site config contains information about the default theme, and so your custom theme must exist on the portal when the site config is imported so that it can be set upon import.
  1. Import your custom themes.
    1. On the production catalog, import the custom theme onto the production catalog prod by using this command:
      curl -k -X 'POST' -H "Authorization: bearer $TOKEN" -H 'Accept: application/yaml' -H 'Content-Type: application/octet-stream' 'https://<management_server>/portal/catalogs/<org>/<catalog>/custom-theme/import' --data-binary @<path_to_theme_file>
      For example,
      curl -k -X 'POST' -H "Authorization: bearer $TOKEN" -H 'Accept: application/yaml' -H 'Content-Type: application/octet-stream' 'https://api.productionexample.com/portal/catalogs/ibm/prod/custom-theme/import' --data-binary @/Users/steve/PortaladminCLI/mytheme.tgz
      Here is an example of some possible output:
      status: 201
      message:
        stdout: >-
          /catalogs/75cfdc05-e818-408e-8ce6-fd3fd61c8756/56f3d4ca-8be2-48f7-8f91-3d654c2b91f2/custom-theme/import/vtscpucj08i0hfo6/status
        stderr: ''
      errors: []
    2. You can check the status of the import job by invoking the /status endpoint on this command:
      curl -k -X 'GET' -H "Authorization: bearer $TOKEN" -H 'Accept: application/yaml' 'https://<management_server>/portal/catalogs/<org>/<catalog>/custom-theme/import/<task_id>/status'
      For example,
      curl -k -X 'GET' -H "Authorization: bearer $TOKEN" -H 'Accept: application/yaml' 'https://api.productionexample.com/portal/catalogs/ibm/prod/custom-theme/import/vtscpucj08i0hfo6/status'
      Here is an example of some possible output:
      {
        "status": 200,
        "message": {
          "stdout": "2020-06-09 13:00:59: CLI task (custom_theme:import) starting.\n2020-06-09 13:00:59: Importing custom theme emerald_theme_css\n2020-06-09 13:01:18: CLI task (custom_theme:import) completed successfully.",
          "stderr": ""
        },
        "errors": []
      }
  2. Import your site config.
    1. Import the existing site-config onto the production catalog prod by using this command:
      curl -k -X 'POST' -H "Authorization: bearer $TOKEN" -H 'Accept: application/json' -H 'Content-Type: application/octet-stream' 'https://<management_server>/portal/catalogs/<org>/<catalog>/config/import' --data-binary @<path_to_config_import>
      For example,
      curl -k -X 'POST' -H "Authorization: bearer $TOKEN" -H 'Accept: application/json' -H 'Content-Type: application/octet-stream' 'https://api.productionexample.com/portal/catalogs/ibm/prod/config/import' --data-binary @/Users/steve/PortaladminCLI/myconfig.tgz
      Here is an example of some possible output:
      {
        "status": 201,
        "message": {
            "stdout": "/catalogs/75cfdc05-e818-408e-8ce6-fd3fd61c8756/56f3d4ca-8be2-48f7-8f91-3d654c2b91f2/config/import/kzyozx4v5sfa8la5/status",
            "stderr": ""
        },
        "errors": []
      }
    2. You can check the status of the config import job by invoking the /status endpoint:
      curl -k -X 'GET' -H "Authorization: bearer $TOKEN" -H 'Accept: application/json' 'https://<management_server>/portal/catalogs/<org>/<catalog>/config/import/<task_id>/status'
      For example,
      curl -k -X 'GET' -H "Authorization: bearer $TOKEN" -H 'Accept: application/json' 'https://api.productionexample.com/portal/catalogs/ibm/prod/config/import/kzyozx4v5sfa8la5/status'
      Here is an example of some possible output:
      {
        "status": 200,
        "message": {
            "stdout": "2020-06-11 15:42:55: CLI task (site_config:import) starting.\n2020-06-11 15:43:29: CLI task (site_config:import) completed successfully.",
            "stderr": ""
        },
        "errors": []
      }

What you did in this scenario

In this scenario, you created a theme and changed the configuration on your staging Developer Portal. Then, you used the Portal Admin API to replicate the changes on to your production Developer Portal.

You can now see the changes that you made on your production Developer Portal.