Losant-cli - losant files upload command is slower than losant experience upload command

Bug Report
1

Hi there,

I’m using losant-cli to upload experiences and files after modifying them locally. After executing losant files upload I get the confirmation that modified file has been uploaded.
imagen
But when checking the file at its location I see the old version.

While writing this I realized that it’s a timing issue. Files under /files are uploaded slower than files under /experience.

2

@nahuel

Hi, this is because Losant Files are cached. They live behind a CDN.

Generally, there are two common solutions here:

  • Use a hashed file name. This would cause a new file to get generated each time. But, doing this would require adding some sort of build step to your application before you upload the file to Losant. Here is an article talking about doing this in Webpack.
  • In your HTML, add a query param to the URL that’s updated every time you deploy. Like so https://files.onlonsant.com/files/js/jspage.js?v1. This would cache bust the file.

Another route you can take is to store your JS in components. You also get the added benefit of being able to version your JS with your Experience.

3

Thanks @anaptfox for your quick response!

Also I’d like you to ask how to access context variables such as globals from a separate JS file.
For example when running the following,
imagen
I get in the console,
{{globals}}
instead of its content.

4

No problem :slight_smile:

What you want to do is this:

var myGlobal = {{jsonEncode globals}}

Here is where you can read more about this in the docs:

and

:slight_smile:

5

@nahuel

Actually, another team member just pointed out something to me.

If you are using Losant Files for your javascript, they don’t have access to the page data. Experience Views are rendered server-side. So, the templates will already be parsed by time JS in Losant Files gets loaded to the page. (this is why you see {{global}} in your console )

If you would like to use the method above, I’d recommend storing your JS in components. This would allow them to be server-side rendered, thus you will have access to the page data.

6

Here is an example of what you could do:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script>
      // Bring specific page data into JavaScript so it can be used by scripts (e.g. Google maps).
      // Using a "kanarra" top-level name to remove any potential name conflicts.
      var kanarra = {
        selectedGroups: {{jsonEncode pageData.selectedGroups}}
      };
    </script>

    <script>
      {{component "js-device-block"}}
      {{component "js-experience-groups-list"}}
    </script>

    <style>
      {{component "css-global-reset"}}
      {{component "css-global-styles"}}
      {{component "css-sidebar"}}
      {{component "css-experience-groups-list"}}
      {{component "css-device-groups"}}
    </style>
  </head>
  <body>
    <div style="display:flex; flex-direction:row; height:100%;">
      {{component "sidebar"}}
      {{component "device-groups"}}
    </div>
  </body>
</html>

Also, if you’re interested, we are going to walkthough the building of an Experience in a webinar on June 11th.

1 Like
7

Great! I’ve moved my JS file to a /component folder and it worked :clap: :smile:

A note about relocation. When moving JS file to /component location it’s necessary to change file extension from *.js to *.hbs. In consequence you have to tell the code editor that what it sees as a hbs file is a JS file. Here an explanation on how to do it in VSCode.

8

Woo hoo! Thank you for that tip! I’m happy it worked out.