You are browsing documentation for an older version. See the latest documentation here.
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
- Kong Gateway 1.3 or later
- 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:
- Clone the kong-portal-templates repo.
- Add any JavaScript files to the
themes/base/js
folder. - 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.