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
        • Getting Started
        • Advanced Usage
          • Environment Variables
          • AWS Secrets Manager
          • Hashicorp Vault
        • Reference Format
      • 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
        • 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
      • Portal 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
        • Migrating Templates Between Workspaces
        • Markdown Rendering Module
        • Customizing Portal Emails
        • Adding and Using JavaScript Assets
        • Single Page App in Dev Portal
        • Alternate OpenAPI Renderer
      • Helpers CLI
    • Configure gRPC Plugins
    • GraphQL Quickstart
    • Logging Reference
    • Network and Firewall
      • Metrics
      • Reports
      • Vitals with InfluxDB
      • Vitals with Prometheus
      • Estimate Vitals Storage in PostgreSQL
    • 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
      • Vaults Beta
        • Licenses Reference
        • Licenses Examples
        • Workspaces Reference
        • Workspace Examples
        • RBAC Reference
        • RBAC Examples
        • API Reference
        • Examples
      • Developers
        • 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
      • kong.vault
      • 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
  • Adding JS Assets
  • Loading JS Assets
Kong Gateway
2.8.x (latest)
  • Kong Konnect Platform
  • Kong Gateway
  • Developer portal
  • Theme customization

Adding and Using JavaScript Assets in Kong Dev Portal

The Kong Developer Portal ships with Vue, React, and jQuery already loaded. You may want to make use of these libraries to write custom interactive webpages or load additional JavaScript.

Note: This guide is for adding/using JavaScript assets without changing server-side routing. Learn more about a SPA to the Dev Portal.

Prerequisites

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

Adding JS Assets

Warning: Due to compatibility issues, avoid using any React version other than React 15 on the layouts/system/spec-render.html layout. We recommend using the version of React included by the default base theme.

To add JavaScript assets:

  1. Clone the kong-portal-templates repo.
  2. Add any JavaScript files to the themes/base/js folder.
  3. Deploy using the kong-portal-cli-tool.

Loading JS Assets

You can make use of the existing Vue and jQuery in any layout/partial that includes partials/theme/required-scripts.html where these scripts are loaded.

By default, React is only loaded on layouts/system/spec-render.html.

If you want to load React or any custom JavaScript asset on all pages, you can edit themes/partial/foot.html.

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

{-main-}
  {(partials/header.html)}

  <div class="page">
    {* blocks.content *}
  </div>

  {(partials/footer.html)}
  <script src="assets/js/third-party/react.min.js"></script>

{-main-}

Alternatively, you can load the script you need on the specific layout for each content page as needed.

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