Hello! I am trying to do the following:
const Airtable = require('airtable-node');
within my index.html file for a new tool but it is not working correctly. I was wondering if anyone else ran into an issue of using require within a script tag in an html file, if so what’s the fix? Thank you!
Hi @Emun13,
If you test your code within a normal safari web-browser, will you get the same error?
The Spatial Toolbox is 100% HTML compatible. It’s running on webkit.
Hi @valentin! I think it may be an issue with html itself. However, I was able to use other work arounds such as using fetch/xml to make patch/post/get calls.
Wonderful. Don’t hesitate to let us know if you run into any other roadblocks.
Hey @valentin, I am working a bit more on the airtable tool so that user can input their api key information on a separate txt file which I would read in through the airtable tool js file. However, when I looked up online on how to read from a txt file, it says I should try to use the fs module by doing const fs = require('fs'). Whenever I try this method, my airtable tool does not seem to work anymore and I believe it may have to do with using “require.” Do you happen to have any advice?
Do you try to use fs in the toolbox or the server? I assume its server. You can also use our settings API that already allows you to store and load settings. It might be a better mechanism. @ben can give more details on that. Let me know if it helps you.
@valentin So I am trying to edit the index.html for the airtable tool (located within the tools folder in the spatial core addon: https://github.com/tuftsceeo/PTC-Toolbox) and I wanted to incorporate some way where I can read in from a .txt file that could be stored in the main vuforia-spatial-edge-server folder so the user can type in their api key, base ID, etc. without having to go into the airtable’s index.html file. I tried to use fs in this index.html file but in order to use it I have to have fs = require('fs') but using require makes the tool not work as expected.
Hi @Emun13, using require in that context only works if the code is being run on a Node.js server. Since the tool’s index.html actually gets rendered within the frontend of the app, it isn’t inside a Node.js environment.
You’ll need to look at other javascript methods that work directly in a web browser, rather than a Node.js server.
The easiest way is if you actually save the apiKey in a very simple javascript file rather than a .txt file.
Try putting this in a file called apiKey.js:
const apiKey = 'TEST_API_KEY';
You can then include this in your index.html and use it directly:
<html lang="en">
<head>
<title>Text Test</title>
<script src="apiKey.js"></script>
</head>
<body></body>
<script>
console.log('apiKey from javascript file: ' + apiKey);
</script>
</html>
If the file needs to be a .txt file, there are some less-direct ways of including it that may or may not work, so let me know if the javascript file works or not.
@Emun13 the other option is to use a build tool like https://webpack.js.org, which can bundle all of your dependencies (like airtable-node) into a single javascript file called bundle.js that you can include into your index.html.
This is how the lego robot motion path tool is built, for example
This worked perfectly, thank you!