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.

  1. {% layout = "layouts/_base.html" %}
  3. {-main-}
  4.   {(partials/header.html)}
  6.   <div class="page">
  7.     {* blocks.content *}
  8.   </div>
  10.   {(partials/footer.html)}
  11.   <script src="assets/js/third-party/react.min.js"></script>
  13. {-main-}

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