How do I reference a local CSS/JS file from within an HTML?

I am attempting to upload an HTML and js file. the HTML will reference the js file held in the assets folder.

can anyone tell me how to reference an asset from within the HTML file.

I have no problem making a single HTML with all CSS and JS included, but it’s so big :frowning: and makes working with the actual HTML harder.

Any thoughts or insights on this?

So, I’m actually having a hard time with this. When I preview the app in chrome on my laptop, works just fine! the webviewer loads the local HTML file and runs perfectly!

when i try to run the app on the companion app on my phone, no luck. until i host the HTML file on the web… then the same file hosted on my server loads just fine in the webviewer. when i run the same file phone, no luck.

it’s a simple HTML file requiring some external CSS and JS. so i included them in the HTML file. runs in the browser, not the companion. I haven’t tried downloading the app to test it out. i cant wait 40 minutes between downloads to test due to being on an iOS device, that’s the wait.

So im wondering if I am doing something wrong. seems like something funny going on.

I’m also wondering if this is a potential issue where the web viewer is trying to load a local asset. But maybe the web viewer is confused. Perhaps it’s trying to load a local asset from the phone and perhaps the assets aren’t being passed to the phone at the same time as the app. So it thinks that it should be there but it’s actually not?

Tagging an admin as it’s not a beginner issue:
@Steven

In the html file, inside the “head” tags, insert all the lines of the .css between the statements:
style type = “text / css”

lines of your .css

/style

For the .js, the same but inside the “body” tags with the statement:

script type = “text / javascript”

lines of your .js

/script

Check this out: here is a working example of the issues


check out these weird results.

here are the files I am using

packaged together works close to what I need. BUT, the CSS is messed up. can anyone provide guidance there?

[SOLVED]
I was not removing the original tags. the packaged CSS tag was incorrect also

<style type="text/javascript"></style>
//instead of
<style type="text/css"></style>

here’s a working copy
the only thing I cant make work is to include the css/js files as their own asset. I don’t really want to package everything together.

so the question is, how do i reference a local asset?

1 Like

Hi,

Just wanted to let you know that I’ve seen this question but don’t yet have an answer for you. I feel like it is something that should be supported but I’ll have to dig into some documentation to see what is needed to make it work. I’ll follow up when I have more information.

In addition to just writing the js inside of the html file as you mentioned, you could also host the js file on a server/cdn and reference it in a script tag. Might also not be ideal for your use case but is another potential temporary workaround while we look for a better solution.

1 Like

Thank you, as always you come with a good answer! I’ll package them together if needed for now!

Currently I’m using a few CDNs. The goal is to permit offline data collection and visualization. I appreciate the support!!

Hi all,

I tried a few different potential solutions and I’m not sure that what you’re asking about is possible in the platform today unfortunately. It is something I can add to our to do list but I’m not sure on when it would get done to be honest. So it seems your best bet at the moment is one of the workarounds we discussed previously.

One thing you can do if you’re comfortable writing js is to write a small script which can combine different files into a single html asset that you can use in your project. This can help to keep each individual file smaller when you need to work on them but then generate a single asset for you to use in your project once it is all complete.

I know it isn’t ideal so I apologize for that but it is all we have available to us at the moment.

3 Likes