Package manager on experience

Help
1

Hey there,

Is there a way to use a package manager in the experience pages?

In bigger applications its kinda hard to manage all the packages/external lib. we’re using.

2

It’s fairly common for users to build experiences with React and make use of package manager and build system (like Webpack).

Typically, these users will upload the compiled bundle to Application Files, which is automatically hosted behind a CDN. The contents of the Experience Page is reduced to just the wrapping HTML that loads the compiled bundle. To access payload data, I find data attributes work well. You can drop the entire contents of the payload on the React container, which can then be made available by all your components through whatever means you prefer (e.g. Redux).

I generally recommend that templates should only exist in the HTML and that JavaScript should not include templates. Any data required from the payload can be passed to JavaScript using data attributes in the HTML.

<html>
  ...
  <script src="https://files.onlosant.com/<app-id>/path/to/compiled_bundle.js"></script>
  <body>
    <div data-payload='{{jsonEncode pageData}}'>
  </body>
</html>

For the build process itself, it’s common to make use the Losant CLI to upload the new bundle to Files.

3

@Brandon_Cannaday , and for an application without React, how could we do that ?

I have a lot of externals and on my layout (e.g. jquery, bootstrap, leaflet, bootstrap-table, etc…) , and thats making my application slower.

Or maybe a way to improve my application.

Thanks in advance :smiley:

4

If it’s just regular javascript libraries and standard experience pages, I’d recommend using a Layout to hold the main <head> and all the <script> tags. Check out the Bootstrap 4 Layouts template for an example.

All of your libraries should be loaded from a CDN, or you can upload them to your Application Files, which is automatically served by a CDN. For example, JQuery provides a CDN for their library for free.

All of the scripts will be cached by the browser, so in most cases, they’ll only be downloaded once.

Custom JavaScript is a little more difficult, but at the moment, I recommend uploading it to your Application Files and including it in the <head> within your layout.

<script src="https://files.onlosant.com/<app-id>/path/to/script.js"></script>

This will automatically be cached and served by a CDN, making page loads pretty quick.