Skip to content
Kong Gateway 2.8 Increases Security and Simplifies API Management.  —Learn More →
Kong Logo | Kong Docs Logo
search
  • We're Hiring!
  • Docs
    • Kong Gateway
    • Konnect Cloud
    • Kong Mesh
    • Plugin Hub
    • decK
    • Kubernetes Ingress Controller
    • Insomnia
    • Kuma

    • Kong Konnect Platform

    • Docs contribution guidelines
  • Plugin Hub
  • Support
  • Community
  • Kong Academy
Request Demo
  • Kong Gateway
  • Konnect Cloud
  • Kong Mesh
  • Plugin Hub
  • decK
  • Kubernetes Ingress Controller
  • Insomnia
  • Kuma

  • Kong Konnect Platform

  • Docs contribution guidelines
  • 2.8.x (latest)
  • 2.7.x
  • 2.6.x
  • Older Enterprise versions (0.31-2.5)
  • Older OSS versions (0.13-2.5)
  • Archive (pre-0.13)
    • Version Support Policy
    • Changelog
    • Kubernetes
    • Helm
    • OpenShift with Helm
    • Docker
    • Amazon Linux
    • CentOS
    • macOS
    • Debian
    • RHEL
    • Ubuntu
    • Migrating from OSS to EE
    • Upgrade Kong Gateway
    • Upgrade Kong Gateway OSS
      • Configuring a Service
      • Configuring a gRPC Service
      • Enabling Plugins
      • Adding Consumers
      • Prepare to Administer
      • Expose your Services
      • Protect your Services
      • Improve Performance
      • Secure Services
      • Set Up Intelligent Load Balancing
      • Manage Administrative Teams
      • Publish, Locate, and Consume Services
    • Running Kong as a Non-Root User
    • Resource Sizing Guidelines
      • Deploy Kong Gateway in Hybrid Mode
    • Kubernetes Deployment Options
    • Control Kong Gateway through systemd
    • Performance Testing Framework
    • DNS Considerations
    • Default Ports
      • Access Your License
      • Deploy Your License
      • Monitor License Usage
      • Start Kong Gateway Securely
      • Keyring and Data Encryption
      • Kong Security Update Process
      • Authentication Reference
        • OpenID Connect with Curity
        • OpenID Connect with Azure AD
        • OpenID Connect with Google
        • OpenID Connect with Okta
        • OpenID Connect with Auth0
        • OpenID Connect with Cognito
        • OIDC Authenticated Group Mapping
        • OpenID Connect Plugin Reference
      • Allowing Multiple Authentication Methods
        • Create a Super Admin
        • Configure Networking
        • Configure Kong Manager to Send Email
        • Reset Passwords and RBAC Tokens
        • Configure Workspaces
        • Basic Auth
        • LDAP
        • OIDC
        • Sessions
        • Add a Role
        • Add a User
        • Add an Admin
      • Mapping LDAP Service Directory Groups to Kong Roles
      • Enable the Dev Portal
      • Structure and File Types
      • Using the Portal Files API
      • Working with Templates
      • Using the Editor
          • Basic Auth
          • Key Auth
          • OIDC
          • Sessions
          • Adding Custom Registration Fields
        • SMTP
        • Workspaces
        • Manage Developers
        • Developer Roles and Content Permissions
          • Authorization Provider Strategy
          • Enable Application Registration
          • Enable Key Authentication for Application Registration
          • External OAuth2 Support
          • Set up Okta and Kong for external OAuth
          • Set Up Azure AD and Kong for External Authentication
          • Manage Applications
        • Easy Theme Editing
        • Markdown Rendering Module
        • Customizing Portal Emails
        • Adding and Using JavaScript Assets
        • Single Page App in Dev Portal
      • Helpers CLI
    • Configure gRPC Plugins
    • GraphQL Quickstart
    • Logging Reference
    • Network and Firewall
      • Metrics
      • Reports
      • Vitals with InfluxDB
      • Vitals with Prometheus
    • Prometheus plugin
    • Zipkin plugin
      • DB-less Mode
      • Declarative Configuration
      • Supported Content Types
      • Information Routes
      • Health Routes
      • Tags
      • Service Object
      • Route Object
      • Consumer Object
      • Plugin Object
      • Certificate Object
      • CA Certificate Object
      • SNI Object
      • Upstream Object
      • Target Object
        • Licenses Reference
        • Licenses Examples
        • Workspaces Reference
        • Workspace Examples
        • RBAC Reference
        • RBAC Examples
        • API Reference
        • Examples
        • Event Hooks Reference
        • Examples
      • Audit Logging
      • Keyring and Data Encryption
      • Securing the Admin API
    • DB-less and Declarative Configuration
    • Configuration Reference
    • CLI Reference
    • Load Balancing Reference
    • Proxy Reference
    • Rate Limiting Library
    • Health Checks and Circuit Breakers Reference
    • Clustering Reference
      • kong.client
      • kong.client.tls
      • kong.cluster
      • kong.ctx
      • kong.ip
      • kong.log
      • kong.nginx
      • kong.node
      • kong.request
      • kong.response
      • kong.router
      • kong.service
      • kong.service.request
      • kong.service.response
      • kong.table
      • Introduction
      • File structure
      • Implementing custom logic
      • Plugin configuration
      • Accessing the datastore
      • Storing custom entities
      • Caching custom entities
      • Extending the Admin API
      • Writing tests
      • (un)Installing your plugin
    • Plugins in Other Languages

github-edit-pageEdit this page

report-issueReport an issue

enterprise-switcher-iconSwitch to OSS

On this page
  • Prerequisites
  • What is a SPA
  • Making Choices
  • Getting Started
    • Create your SPA
    • Mounting an SPA
    • Loading your layout
    • Deploy the Portal
Kong Gateway
2.6.x
  • Kong Konnect Platform
  • Kong Gateway
  • Developer portal
  • Theme customization
You are browsing documentation for an outdated version. See the latest documentation here.

Hosting Single Page App out of Kong Dev Portal

The Kong Developer Portal ships with a default server-side rendered theme; however, it is possible to replace this with a Single Page App (SPA). This example is in Angular using the Angular CLI Tool, but you can follow along with any other JavaScript framework with just a few tweaks.

To view the basic example Angular template from this guide, visit the example/spa-angular branch from the kong-portal-templates branch.

Prerequisites

  • Kong Gateway 1.3 or later
  • Portal Legacy is turned off
  • The Developer Portal is enabled and running
  • kong-portal-cli tool is installed locally

What is a SPA

A Single Page App (SPA) is a website that loads all HTML, JavaScript, and CSS on the first load. Instead of loading subsequent pages from the server, JavaScript is used to dynamically change the page content. You may want to use an SPA in Dev Portal if you have a preexisting SPA you want to integrate with the portal, or you are trying to achieve a more application-like experience across many pages. An SPA takes control of routing from the server, and handles it client-side instead.

Custom JavaScript can also be added to run only on specific layouts, allowing you to maintain server-side rendering. Learn more about adding JavaScript to a layout without implementing an SPA.

Making Choices

We recommend Catalog and Spec routes not be handled by SPA. If you are using Authentication, then you probably also want to leave server-side rendering for any account pages.

Getting Started

Clone the portal-templates repo

Create a file called router.conf.yaml in workspaces/default This file will override the default routing, allowing you to control routing via JavaScript.

router.conf.yaml must be a yaml file, where the key is each route, and the value a content or spec path. /* Is a catch-all wildcard for all routes not specified in router.conf.yaml, it will overwrite all default routing set by collections or set in headmatter.

In the router.conf.yaml example below, we are hardcoding routing for all kong related functionality and deferring to SPA routing for all other routes. The /* route at the bottom of the file is a wildcard route. The wildcard route, in this case, tells Kong to serve content/index.txt for any request that is not handled by the route declarations above.

/login: content/login.txt
/logout: content/logout.txt
/register: content/register.txt
/settings: content/settings.txt
/reset-password: content/reset-password.txt
/account/invalidate-verification: content/account/invalidate-verification.txt
/account/resend-verification: content/account/resend-verification.txt
/account/verify: content/account/resend-verification.txt
/documentation: content/documentation/index.txt
/documentation/httpbin: specs/httpbin.json
/documentation/petstore: specs/petstore.yaml
/*: content/index.txt

Create your SPA

Create an SPA app in the JavaScript framework of your choice. This example uses angular.

ng new

Make sure to include a 404 route, as well as all routes you want to have on the Portal (excluding the routes handled by server-side rendering excluded above).

Run the build process

For angular:

ng build

Copy the build output JS and CSS files to a folder inside workspaces/default/themes/assets/js.

For this example, place the angular build inside a workspaces/default/themes/assets/js/ng.

Mounting an SPA

In order to load our js we need to mount the JS, to do this let’s create a new layout page, for this example, call it spa.html.

Create a file called spa.html in workspaces/default/themes/layouts.

This file will need to contain the html element that the SPA will mount to as well as the scripts necessary to do this. For reference, view the index.html inside the build folder created by the build step of the SPA.

The example uses layouts/_base.html as the base for the layout template. By doing so, the <head> element is handled the same way as other pages in the portal, as well as the same CSS and scripts.

If you want to have the top nav bar and bottom nav bar, be sure to include them in your layout.

This is the resulting layout:

{% layout = "layouts/_base.html" %}
{-main-}

    {(partials/header.html)}
    <div class="page">
        <app-root></app-root>
    </div>
    {(partials/footer.html)}


    <script src="assets/js/ng/runtime-es2015.js" type="module"></script>
    <script src="assets/js/ng/runtime-es5.js" nomodule defer></script>
    <script src="assets/js/ng/polyfills-es5.js" nomodule defer></script>
    <script src="assets/js/ng/polyfills-es2015.js" type="module"></script>
    <script src="assets/js/ng/styles-es2015.js" type="module"></script>
    <script src="assets/js/ng/styles-es5.js" nomodule defer></script>
    <script src="assets/js/ng/vendor-es2015.js" type="module"></script>
    <script src="assets/js/ng/vendor-es5.js" nomodule defer></script>
    <script src="assets/js/ng/main-es2015.js" type="module"></script>
    <script src="assets/js/ng/main-es5.js" nomodule defer></script>

{-main-}

If the SPA build process creates a css file, edit the head.html partial to include your css file.

Loading your layout

Modify workspaces/default/content/index.txt to use your layout. The title you set here will be the one that displays until the JS set title loads.

---
layout: spa.html
title: Home
---

Deploy the Portal

Now using the kong-portal-cli tool, deploy the portal.

From the root folder of the templates repo:

portal deploy default
Thank you for your feedback.
Was this page useful?
  • Kong
    THE CLOUD CONNECTIVITY COMPANY

    Kong powers reliable digital connections across APIs, hybrid and multi-cloud environments.

    • Company
    • Customers
    • Events
    • Investors
    • Careers Hiring!
    • Partners
    • Press
    • Contact
  • Products
    • Kong Konnect
    • Kong Gateway
    • Kong Mesh
    • Get Started
    • Pricing
  • Resources
    • eBooks
    • Webinars
    • Briefs
    • Blog
    • API Gateway
    • Microservices
  • Open Source
    • Install Kong Gateway
    • Kong Community
    • Kubernetes Ingress
    • Kuma
    • Insomnia
  • Solutions
    • Decentralize
    • Secure & Govern
    • Create a Dev Platform
    • API Gateway
    • Kubernetes
    • Service Mesh
Star
  • Terms•Privacy
© Kong Inc. 2022