How to deploy the platform UI in IG instead of a Docker container

This is the second article on the platform UI series. In the first article we showed you how to deploy the Platform UI in a Tomcat server. Now we will show you how to deploy it on a ForgeRock Identity Gateway server.

Note that you have to use IG version 7 or newer to be able to use the new handler called ResourceHandler.

ForgeRock delivers the new Platform UI using Docker and that’s the recommended and easier way of doing it, however this is not the only way to deploy it. Docker is the easiest way of building it because the Platform UI is already packed within this container and all you have to do is run it. But we understand that sometimes there is a need to deploy it in a different way whether it’s because of business requirements or personal preferences.

In this article we will show the step by step on how to deploy the Platform UI in a ForgeRock IG server.

Follow the steps below to deploy the platform enduser-ui and the login-ui in IG:

1. Download and build the platform-enduser and the platform-login.

• Clone the platform-ui git repository.
• Adjust all variables found within .env.production.
• Build it by executing the following command: yarn build
• The files that we need should be available under the dist/ directory.

2. Copy the files from the dist directory to a directory in the IG where you would like to host the files. I will use /opt/platform_login and /opt/platform_enduser.

3. Create the following routes under .openig/config/routes in the IG server:

200_platform_login.json

{
   “name”: “200_platform_login”,
   “handler”: {
       “name”: “Platform-Login”,
       “type”: “ResourceHandler”,
       “config”: {
           “directories”: [
               “/opt/platform_login”
           ],
          “basePath”: “/login”,
          “welcomePages”: [
               “index.html”
          ]
       }
   },
   “condition”: “${matches(request.uri.path, ‘^/login’)}”
}

A few things to note:

• I have specified the directory where the file from step 2 above are located. In my example it’s set to /opt/platform_login
• I have set the condition to URI equals to /login. That means this route will be used when the http request has a /login. For example, http://login.example.com:8080/login. So, make sure your platform UI configuration is set to the correct URI, including the redirection URLs in the OAuth clients and the successful URL in the authentication trees.

Create the second route for the enduser UI:

300_platform_enduser.json

{
   “name”: “300_platform_enduser”,
   “handler”: {
       “name”: “Platform-Enduser”,
       “type”: “ResourceHandler”,
       “config”: {
           “directories”: [
               “/opt/platform_enduser”
           ],
           “basePath”: “/enduser”,
           “welcomePages”: [
               “index.html”
           ]
       }
   },
   “condition”: “${matches(request.uri.path, ‘^/enduser’)}”
}

You are done and the platform UIs should be configured to run in IG, except the admin UI which we will dive into it right now.

Platform admin-ui

The platform admin-ui is not a public repository so you will not be able to follow the procedure above to deploy the admin-ui on IG. It is recommended that you run the admin-ui in a Docker environment. However, if you are still interested in running the admin-ui using IG, it is possible to do so by extracting the admin-ui files from the Docker container.

1. Deploy the admin-ui in a Docker environment by following the procedure on the ForgeRock Platform Setup Guide
2. Execute the following commands to list all the docker images and all the running images to get the container’s name:

sudo docker image list

sudo docker ps

3. From the above output we can see that the only docker image running is the happy_leavitt. But if you have multiple images running, match the IMAGE with the IMAGE ID from both outputs to find out which one is the admin ui.
Copy the admin ui files from the container to the host vm by executing the following command:

sudo docker cp -a happy_leavitt:/usr/share/nginx/html .

4. A directory named “html” is created with the files needed to run the admin UI in IG. Copy those files to the directory you picked in the IG server. In my example I will use /opt/platform_admin directory to store the files.

5. Create the following route under .openig/config/routes in the IG server:

400_platform_admin.json

{
   “name”: “400_platform_admin”,
   “handler”: {
       “name”: “Platform-Admin”,
       “type”: “ResourceHandler”,
       “config”: {
           “directories”: [
               “/opt/platform_admin”
           ],
           “basePath”: “/admin”,
           “welcomePages”: [
               “index.html”
           ]
       }
   },
   “condition”: “${matches(request.uri.path, ‘^/admin’)}”
}

You are done with the admin UI setup in IG. You should be able to access the admin UI by navigating to http://admin.example.com:8080/admin, where admin.example.com is pointing to the IG server in your DNS. IG is listening on port 8080 and the URI is /admin as you specified in the IG route.

Congratulations!