Application Development

Overview

Once your product is created in Console, you may proceed to start integrating your web application into Console.

Regardless of whether you are building a new web application, or converting an existing web application, the steps are the same.

For existing products that have onboarded to Console, these are some of the ways they decided to integrate with Console:

• build a new frontend web application for Console, and deprecate the old frontend web application once users migrate over to Console. Backend servers stay the same.
• use the same frontend web application in Console, but depending on the domain/entry into the web application (e.g through Console or through existing web portal), use code to differentiate and render the web application differently

Using Console’s Navbar and Footer web-components

The first step to integrate into Console is to include the Navbar and Footer web-components into your web application. This Navbar and Footer allows us to maintain a consistent UI skeleton across the different products in Console.

The Navbar and Footer guide is located here.

Using SGDS v3

Console uses SGDS v3 for the UI design. You are recommended to use SGDS v3 as well. You can find the SGDS v3 list of UI components and how to install them here.

Console’s primary color set is blue. You may choose to use the same primary colour to align the look and feel of your web application with the rest of the products in Console

  --sgds-product-primary-100: #eef5fa;
  --sgds-product-primary-200: #cee2f1;
  --sgds-product-primary-300: #a0c7e4;
  --sgds-product-primary-400: #71abd7;
  --sgds-product-primary-500: #3c8bc8;
  --sgds-product-primary-600: #0f6eb7;
  --sgds-product-primary-700: #0b558c;
  --sgds-product-primary-800: #083f69;
  --sgds-product-primary-900: #062c49;Copy to clipboardErrorCopied

Logging in to Console in localhost

Most likely, users need to be logged in to use your web application. When developing your web application locally, because you are using <console-navbar> (which comes with a set of session checking functionality), you will get a modal popup requesting you to login to Console before your web application’s pages can be accessed.

Configuring your local web server to handle login to Console

Follow the Navbar and Footer guide to:

1. Add the localhostPort attribute to the <console-navbar>
2. Configure your local web server to proxy requests to the Console domain
3. Ensure your local web server uses localhost as the hostname (not 127.0.0.1)

Next, launch your local app server. You should see a restricted access modal with a login button. Click the login button to test the login flow. After you have logged in successfully, verify that the dev.con.sid.local session cookie is set in your browser.

Temporary Workaround to login to Console

1. Visit the environment that you are using Console in, and perform a regular login there.

   • Stg Environment: https://console.stg.developer.tech.gov.sg/

   • Prod Environment: https://console.developer.tech.gov.sg/

2. Once logged in, open the browser developer tools, navigate to the cookies section, and find the dev.con.sid.local cookie there. Copy the value of the cookie.

3. Navigate back to your localhost page, open the browser developer tools, navigate to the cookies section, and add a new cookie with name dev.con.sid.local and paste the value of the cookie in there.

4. Refresh your localhost page. The <console-navbar> will detect a valid session and allow you to proceed with viewing your web application page.