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.
- Create a custom theme on the staging Developer Portal.
- Add a field
to an application content type to change the
site-config
on the staging Developer Portal. - Use
the Portal Admin API to export the custom themes and
site-config
on the staging Developer Portal. - Use
the Portal Admin API to import the custom themes and
site-config
on the production Developer Portal.
Obtaining the client ID and secret, and a bearer token.
- Obtaining the client ID and secret.
- Obtain the list of administrator scoped providers to determine the correct realm to
use:
For example,apic identity-providers:list --scope admin --server <management_server>
Here is an example of some possible output:apic identity-providers:list --scope admin --server api.stagingexample.com
default-idp-1
- Run
apic login
, complete the details:
For example,apic login --server management_server --realm cloud_realm --username admin_username --password admin_password
apic login -s api.stagingexample.com --realm provider/default-idp-1 --username admin --password Qwerty123£
- 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" }
- Run the registration create
command:
For example,apic registrations:create --server management_server app1.json
Here is an example of some possible output:apic registrations:create --server api.stagingexample.com app1.json
app1 [state: enabled] https://api.stagingexample.com/api/cloud/registrations/d2b7572f-3406-42a7-bdcc-85f177860df7
- Obtain the list of administrator scoped providers to determine the correct realm to
use:
- Now, you can get a bearer token from the provider org.
- To obtain a list of provider realms:
For example,apic identity-providers:list --scope provider --server management_server
Here is an example of some possible output:apic identity-providers:list --scope provider --server api.stagingexample.com
default-idp-2
- Run
apic login
, complete the details:
For example,apic login --server management_server --realm provider_realm --username org_username --password org_password
apic login -s api.stagingexample.com --realm provider/default-idp-2 --username ibm --password Qwerty123£
- Create an HTTP request to obtain an access
token:
For example,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
Here is an example of some possible output: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
{ "access_token": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IjBDQkI2Mjg5MkU4QUNFNEIzNDZCQzcyNDMxMUY0QzE4NTU2MUE4NjkifQ.eyJqdGkiOiJlNDY2M2U4MC0wMzlkLTRiNDUtYmFjZC04NjA2MDcwZDIwODIiLCJuYW1lc3BhY2UiOiJiMTU4YjdhYy1kMTEzLTQxNDctODE1OS05ZDliNGViZjE3ZGE6ZjdhY2IwNzMtYzU4ZC00ZjhkLWIwZDYtMGNlM2YwYjIyYmNmOmZjMWRlOTE2LWI1NDAtNDE4MS1iZTJiLWM4ZGU0NGVlYTMzZiIsImF1ZCI6Ii9hcGkvY2xvdWQvcmVnaXN0cmF0aW9ucy9kMmI3NTcyZi0zNDA2LTQyYTctYmRjYy04NWYxNzc4NjBkZjciLCJzdWIiOiIvYXBpL3VzZXItcmVnaXN0cmllcy9iMTU4YjdhYy1kMTEzLTQxNDctODE1OS05ZDliNGViZjE3ZGEvZjdhY2IwNzMtYzU4ZC00ZjhkLWIwZDYtMGNlM2YwYjIyYmNmL3VzZXJzL2ZjMWRlOTE2LWI1NDAtNDE4MS1iZTJiLWM4ZGU0NGVlYTMzZiIsImlzcyI6IklCTSBBUEkgQ29ubmVjdCIsImV4cCI6MTU5MTcyMzU5NSwiaWF0IjoxNTkxNjk0Nzk1LCJncmFudF90eXBlIjoicGFzc3dvcmQiLCJ1c2VyX3JlZ2lzdHJ5X3VybCI6Ii9hcGkvdXNlci1yZWdpc3RyaWVzL2IxNThiN2FjLWQxMTMtNDE0Ny04MTU5LTlkOWI0ZWJmMTdkYS9mN2FjYjA3My1jNThkLTRmOGQtYjBkNi0wY2UzZjBiMjJiY2YiLCJyZWFsbSI6InByb3ZpZGVyL2RlZmF1bHQtaWRwLTIiLCJ1c2VybmFtZSI6InRqIiwiaWRfdG9rZW4iOiJleUpoYkdjaU9pSlNVekkxTmlJc0luUjVjQ0k2SWtwWFZDSXNJbXRwWkNJNklqVXhRamN4T0RCRU9ESkRNME5HUXpWQlFrSkZPREZHUkRjd05VWTFOekl3TkRBek5FTXpNalFpZlEuZXlKbWFYSnpkRjl1WVcxbElqb2lWR1ZxWVhOMmFXNXBJaXdpYkdGemRGOXVZVzFsSWpvaVUyRnFhWFFpTENKMWMyVnlYMmxrSWpvaVl6aG1NREF4T1RjdFlqQXhZaTAwWkRnd0xXSXhObUl0TURjMk1UUTNaR0pqT1RFMklpd2lkWE5sY201aGJXVWlPaUowYWlJc0ltVnRZV2xzSWpvaWRHVnFZWE4yYVc1cExuTmhhbWwwUUdsaWJTNWpiMjBpTENKcFlYUWlPakUxT1RFMk9UUTNPVFY5LlVuRWhRaTFMTDFzcmlrUE9ReGR0Tkx3SG5iQ24yNnF1U2F5Y2N4WFh0SWstc2YxZEp0T2RaM2k5c2lZdWxkZ0QxV2dueG0wT0UwaVhrRE1kLThsUFVuVzJqc3NaYno4ak5faXlJVWhmVEZsNmVUNER6WTV6WkJiUmJjYzJZUXlneXQxYnBOOFZnRlJKbm01S2xidUhTXzBkV3BJbVdJeU51em5ndjlhTk9VaVFMVTdCdlpNS0xLQmt6US1tMGRVSFdzZi1mRlB2cVE5MVUxTy14MVZ4MDBnSHFEQXZlM0VyWExlZm14dGYwalVTY0prcUdjUXVvcE9yNDRNdGcyVUJIRXJhUWpadmlMb0JwUlNja25uX1hnRXpZVXdzeUUzQ2d6SC1sRjhJa2Q4VGtqT0tELUc3YmJoRWlZcUhxdnJxVTk0Z18tZ05KbEE0MEZ2b2xnV25GQSIsInNjb3BlcyI6WyJjbG91ZDp2aWV3IiwiY2xvdWQ6bWFuYWdlIiwicHJvdmlkZXItb3JnOnZpZXciLCJwcm92aWRlci1vcmc6bWFuYWdlIiwib3JnOnZpZXciLCJvcmc6bWFuYWdlIiwicHJvZHVjdC1kcmFmdHM6dmlldyIsInByb2R1Y3QtZHJhZnRzOmVkaXQiLCJhcGktZHJhZnRzOnZpZXciLCJhcGktZHJhZnRzOmVkaXQiLCJjaGlsZDp2aWV3IiwiY2hpbGQ6Y3JlYXRlIiwiY2hpbGQ6bWFuYWdlIiwicHJvZHVjdDp2aWV3IiwicHJvZHVjdDpzdGFnZSIsInByb2R1Y3Q6bWFuYWdlIiwiYXBwcm92YWw6dmlldyIsImFwcHJvdmFsOm1hbmFnZSIsImFwaS1hbmFseXRpY3M6dmlldyIsImFwaS1hbmFseXRpY3M6bWFuYWdlIiwiY29uc3VtZXItb3JnOnZpZXciLCJjb25zdW1lci1vcmc6bWFuYWdlIiwiYXBwOnZpZXc6YWxsIiwiYXBwOm1hbmFnZTphbGwiLCJteTp2aWV3IiwibXk6bWFuYWdlIiwid2ViaG9vazp2aWV3Il19.LjfCGN7ymxERSlezc4NhApPj_UDAnSP_N17kDgWwQb_5vjmROu4sDa_VlrbjUMM8jiTv2kqFZdHFtn9c3zgY4aDyqC_AAmhqT3HCVu_9SQCYK9cVTANxswxBfIRDHArqzJ4MiEw_lSfK8pZnd_XjQ5sg9B-vKUgJwrB7Bk6X2N6Cm3_QvCQtMCgTevBmwIzE9SIQiOV2041uRj5O0E3NASfacJsWOS4AzSPOMjgxMnWHIgP98MsU0u8v1Hf1VEn1wtrCO7FLiU7DeKYEa1-1EbqUB0sejwQoKvSYHMFwnh3K8Y97g21bdjkAcSwVOk02FpUMIIz4aeInYqwlUdzqww", "token_type": "Bearer", "expires_in": 28800 }
- Save the token in a variable in your terminal:
You can now authenticate yourself when you invoke the Portal Admin CLI by using the REST API.TOKEN="<paste the access token that you obtained>"
- To obtain a list of provider realms:
Create a custom theme on the staging Developer Portal
- Log in to your staging Developer Portal as an administrator.
- If the administrator dashboard isn’t displayed, click Manage to display it.
- Click
Generate sub-theme
window is displayed.
. The - 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.)
- Select the Default template to base your
sub-theme
on. You can create asub-theme
based on a color template. However, for this scenario you use the default connect_theme template. - Click Generate.
- 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.
- Open the overrides.css file in your chosen editor.
- 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; }
- Save the overrides.css file.
You can now install and enable your customized theme.
- After you finish updating the overrides.css file, compress all the theme
files back into the .zip
sub-theme
file that you downloaded originally. - In the Developer Portal,
click . The
Install new theme
window is displayed. - In Upload a module or theme archive to install click Browse, and navigate to your newly updated compressed theme file.
- Click Install to install the theme onto your site.
- 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 customsub-theme
as the default theme for your site. - Return to the Developer Portal home
page by clicking Back to site. You can now see your custom theme.
Add a field to an application content type to change the site-config
on the
staging Developer Portal
- Log in to your staging Developer Portal as an administrator.
- If the administrator dashboard isn’t displayed, click Manage to display it.
- Click .
- Click + Add field.
- In
Add a new field
, select Text (plain, long). Enter Company name as the label title. - Click Save and continue.
- Leave the
Allowed number of values
set to 1 and click Save field settings. - Click Save field settings. You can now see your new field.
Use the Portal Admin API to export the custom themes and site-config
on the
staging Developer Portal
- Export your custom themes.
- Create the export job by using this command:
For example,curl -k -X 'POST' -H "Authorization: bearer $TOKEN" -H 'Accept: application/yaml' 'https://<management_server>/portal/catalogs/<org>/<catalog>/custom-theme/export'
Here is an example of some possible output:curl -k -X 'POST' -H "Authorization: bearer $TOKEN" -H 'Accept: application/yaml' 'https://api.stagingexample.com/portal/catalogs/ibm/staging/custom-theme/export'
status: 201 message: stdout: >- /catalogs/75cfdc05-e818-408e-8ce6-fd3fd61c8756/f09602a2-a0e4-40dc-a82d-d1af326ad092/custom-theme/export/85z2m39znojolv2s/status stderr: '' errors: []
- You can check the status of the export job by invoking the
/status
endpoint.
For example,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'
Here is an example of some possible output: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'
{ "status": 200, "message": { "stdout": "The status of this task is: FINISHED and the artifact can now be streamed" }, "errors": [] }
- You can now download the custom theme file onto your machine.
For example,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>
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 thecurl
commands to download files, if you do not specify an output with-o
, it incorrectly prints the output as binary onto the terminal screen. - On Mac and Linux® machines, you can
verify that you have a valid theme export
.tgz
file by invoking the tart --list
argument.
For example,tar -tvf <theme_name>
Here is an example of some possible output:tar -tvf mytheme.tgz
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
- Create the export job by using this command:
- Export your site config.
- Create the export job by using this command:
For example,curl -k -X 'POST' -H "Authorization: bearer $TOKEN" -H 'Accept: application/json' 'https://<management_server>/portal/catalogs/<org>/<catalog>/config/export'
Here is an example of some possible output:curl -k -X 'POST' -H "Authorization: bearer $TOKEN" -H 'Accept: application/json' 'https://api.stagingexample.com/portal/catalogs/ibm/staging/config/export'
{ "status": 201, "message": { "stdout": "/catalogs/75cfdc05-e818-408e-8ce6-fd3fd61c8756/f09602a2-a0e4-40dc-a82d-d1af326ad092/config/export/5cy1gk55ciiwn190/status", "stderr": "" }, "errors": [] }
- You can check the status of the export job by invoking the
/status
endpoint.
For example,curl -k -X 'GET' -H "Authorization: bearer $TOKEN" -H 'Accept: application/json' 'https://<management_server>/portal/catalogs/<org>/<catalog>/config/export/<task_id>/status'
Here is an example of some possible output:curl -k -X 'GET' -H "Authorization: bearer $TOKEN" -H 'Accept: application/json' 'https://api.stagingexample.com/portal/catalogs/ibm/staging/config/export/5cy1gk55ciiwn190/status'
{ "status": 200, "message": { "stdout": "The status of this task is: FINISHED and the artifact can now be streamed" }, "errors": [] }
- You can now download the site-config file onto your machine.
For example,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>
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 thecurl
commands to download files, if you do not specify an output with-o
, it incorrectly prints the output as binary onto the terminal screen. - On Mac and Linux machines, you can
verify that you have a valid theme export
.tgz
file by invoking the tart --list
argument. Thehead -n 10
option returns the first 10 lines of the result.
For example,tar -tvf <config_name> | head -n 10
Here is an example of some possible output, which should be a list of yaml files:tar -tvf myconfig.tgz | head -n 10
-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
- Create the export job by using this command:
Use the Portal Admin API to import the custom themes and site-config
on the
production Developer Portal
- Import your custom themes.
- On the production catalog, import the custom theme onto the production catalog
prod
by using this command:
For example,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>
Here is an example of some possible output: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
status: 201 message: stdout: >- /catalogs/75cfdc05-e818-408e-8ce6-fd3fd61c8756/56f3d4ca-8be2-48f7-8f91-3d654c2b91f2/custom-theme/import/vtscpucj08i0hfo6/status stderr: '' errors: []
- You can check the status of the import job by invoking the
/status
endpoint on this command:
For example,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'
Here is an example of some possible output: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'
{ "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": [] }
- On the production catalog, import the custom theme onto the production catalog
- Import your site config.
- Import the existing site-config onto the production catalog
prod
by using this command:
For example,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>
Here is an example of some possible output: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
{ "status": 201, "message": { "stdout": "/catalogs/75cfdc05-e818-408e-8ce6-fd3fd61c8756/56f3d4ca-8be2-48f7-8f91-3d654c2b91f2/config/import/kzyozx4v5sfa8la5/status", "stderr": "" }, "errors": [] }
- You can check the status of the config import job by invoking the
/status
endpoint:
For example,curl -k -X 'GET' -H "Authorization: bearer $TOKEN" -H 'Accept: application/json' 'https://<management_server>/portal/catalogs/<org>/<catalog>/config/import/<task_id>/status'
Here is an example of some possible output:curl -k -X 'GET' -H "Authorization: bearer $TOKEN" -H 'Accept: application/json' 'https://api.productionexample.com/portal/catalogs/ibm/prod/config/import/kzyozx4v5sfa8la5/status'
{ "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": [] }
- Import the existing site-config onto the production catalog
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.