How to import third-party JS library into front-end?

Wappler General
1

Hi,

I want to load a third-party JS library in just one or two pages (e.g.: index.ejs). It’s a code highlighter that will colorize <code> blocks in the page.

I’m not sure if I just put the <script> tag at the end of page(s) I want to use, or if there’s a proper way of importing scripts? (note I don’t need the script in every page)

https://highlightjs.org/usage/

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

I tried clicking the “Add Framework” button, but it doesn’t give me the option to input a third-party one. What’s the recommended approach here?

Also, wondering if I want to store the JS file locally instead of using a CDN - do I manually download the JS file into the project folder (e.g.: assets) and manually type the path to it in the <script> tag? Or is there a Wappler picker like you can select images for <img> tags?

Thanks!

Edit: I also need to load a custom stylesheet, I’m not sure where to put the <link> tag to load the CSS (aside from the master page?)

Edit 2: For now, I put the stylesheet in the master page, and I’m loading the script at the end of index.ejs - loading from a CDN. I’m still looking to know if there’s a better approach.

Edit 3: By the way, using this approach above, it seems Wappler is not loading the stylesheet from the master page (browser preview works fine though) while editing index.ejs. I have experienced the same issue with Bootswatch before, the way to solve this was to click the button “Add Framework” and add the Booswatch 5 theme there (on index.ejs), but I can’t do this because there’s no way to insert custom frameworks there.

2

What you are showing is the way to do this, either through a cdn or local file

This is correct, you wouldn't add third party libraries this way.

You can add a <script> tag when in the DOM panel rather than App Structure. Once you have the script tag in, yes you can select its source using a picker.

I just place these in the <head> somewhere -- just remember that the last loaded css will override any prior that has the same selector.

Putting it in the layout like this is fine.

I'll have to leave this for the others including the Wappler team.

1 Like