Package manager on experience

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.

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.