Skip to content
Kong Logo | Kong Docs Logo
search
  • We're Hiring!
  • Docs
    • Kong Gateway
    • Kong Konnect
    • Kong Mesh
    • Plugin Hub
    • decK
    • Kong Ingress Controller
    • Insomnia
    • Kuma

    • Docs contribution guidelines
  • Plugin Hub
  • Support
  • Community
  • Kong Academy
Get a Demo Start Free Trial
  • Kong Gateway
  • Kong Konnect
  • Kong Mesh
  • Plugin Hub
  • decK
  • Kong Ingress Controller
  • Insomnia
  • Kuma

  • Docs contribution guidelines
  • 3.3.x (latest)
  • 3.2.x
  • 3.1.x
  • 3.0.x
  • 2.8.x
  • 2.7.x
  • 2.6.x
  • Older Enterprise versions (2.1-2.5)
  • Older OSS versions (2.1-2.5)
  • Archive (pre-2.1)

github-edit-pageEdit this page

report-issueReport an issue

enterprise-switcher-iconSwitch to OSS

On this pageOn this page
  • Prerequisites
  • Adding JS Assets
  • Loading JS Assets
Kong Gateway
3.3.x (latest)
  • Home
  • Kong Gateway
  • Kong Enterprise
  • Dev Portal
  • Customize
  • Adding and Using JavaScript Assets in Kong Dev Portal

Adding and Using JavaScript Assets in Kong Dev Portal

The Kong Dev 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 Dev 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. 2023