Navbar and footer

Overview

To maintain a consistent UI across different product web applications in Console, you are required to use the Console navbar and footer in your application.

Adding the web components

Console provides a web-component version of the navbar and footer that you can easily load into your application. To include these components, add the following script tag in your application:

<script
    type="module"
    id="console-components-gateway"
    src="{{file}}"
></script>Copy to clipboardErrorCopied

Staging and production files

Staging environment file: https://assets.console.stg.developer.tech.gov.sg/console-components/gateway.js

Production environment file: https://assets.console.developer.tech.gov.sg/console-components/gateway.js

This script will initialise and make the <console-navbar> and <console-footer> available.Wi Within your application code, you can then use the <console-navbar> and <console-footer> web components. These components work out of the box and should appear as expected when your application runs.

Examples

• A Sample React application including script file in the index.html
• A Sample React application using navbar and footer in App.tsx

Configuring the navbar for local development

CORS issue

When using the navbar in staging or production environments, login and session features work as expected. However, when developing locally on localhost, CORS issues may occur. This is because the navbar sends requests to staging or production domains, which may be blocked due to CORS.

Workaround

Most local development setups use a web server such as Webpack or Vite. You can configure these servers to proxy requests from localhost to the Console domain.

1. Add the localhostPort attribute to the <console-navbar> when running your web application locally.

<console-navbar localhostPort="3000"></console-navbar>Copy to clipboardErrorCopied

2. Configure your local web server to proxy requests to the Console domain.

Webpack example:

proxy: [{
    context: ["/core-sec"],
    target: "https://console.stg.developer.tech.gov.sg",
    changeOrigin: true,
    secure: true,
    // Optional: rewrite domain if required
    cookieDomainRewrite: "console.stg.developer.tech.gov.sg",
}]Copy to clipboardErrorCopied

Vite example:

proxy: {
    "/core-sec": {
        target: "https://console.stg.developer.tech.gov.sg",
        changeOrigin: true,
        secure: true,
    }
}Copy to clipboardErrorCopied