Use Box TS SDK in browser based projects
In my previous post, I explored our newly released Box TS and used it in a simple Node.js app. As we get more and more questions regarding the usage of this SDK in a browser-based project, here is a very quick tutorial. No frameworks, no bundlers — just a simple static page enhanced with the capabilities of Box Platform.
Firstly, let’s make sure our Box app is ready to be used with this project. If you don’t have a Box account yet, please do so to follow along*.
*Due to a recent incident with free developer accounts, Box had to limit the options for new free developer accounts.
If you have an existing Enterprise account, follow the instructions and create a sandbox.
Otherwise, create a free Box individual account; no credit card is required. Once you sign up and confirm your email address, navigate to this link: https://app.box.com/developers/console.
Let’s go to the Box Developer Console and create an app. If you have already created the Box app, follow the steps to check your app settings.
Create a custom app and choose user authentication (OAuth 2.0). Fill in the necessary information related to your project, like the app name and a short description.
Go to the Configuration tab and add the CORS Domains section. For local development purposes, that will be your local host. Once you deploy your app, add your final project URL as well.
⚠️ Important: Remove the trailing slash at the end of the Allowed origins!
Lastly, generate the developer token; it’ll be needed while interacting with our app.
⚠️ Important: The developer token is valid for one hour; refresh it once it’s no longer active.
If you’d like to preserve the ability to download files through the custom browser-based app, please mark the option called “Write all files and folders stored in Box”.
Now that the Box app is up and running, let’s write a simple static HTML page. For serving the app locally, I’m going to use the command npx serve . If you haven’t used serve previously, install it on your machine and check out their documentation page for more details.
npm i serveLet’s install and next import the TS SDK in the index.html file.
npm install box-typescript-sdk-gen<script src="./node_modules/box-typescript-sdk-gen/lib/bundle.js"></script>
Next, add meta tags in the document head, just like in the example below, to prevent caching.
<meta
http-equiv="Cache-Control"
content="no-cache, no-store, must-revalidate"
/>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />Finally, create an additional script to import BoxClient and BoxDeveloperTokenAuth and add a try-catch block to fetch your Box user name. Here is a complete working sample index.html file.
<!DOCTYPE html>
<html>
<head>
<title>Sample Website</title>
<!-- Meta tags to prevent caching -->
<meta
http-equiv="Cache-Control"
content="no-cache, no-store, must-revalidate"
/>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
<script src="./node_modules/box-typescript-sdk-gen/lib/bundle.js"></script>
<script>
const { BoxClient, BoxDeveloperTokenAuth } =
window['box-typescript-sdk-gen'];
async function main(token) {
try {
const client = new BoxClient({
auth: new BoxDeveloperTokenAuth({ token }),
});
const { name } = await client.users.getUserMe();
alert(`Hello ${name}!`);
} catch (e) {
alert(String(e));
console.error(e);
}
}
main(prompt('Provide the developer token'));
</script>
</body>
</html>Run the app using and navigate in your browser to http://localhost:3000.
npx serve
Provide your developer token and authenticate.
Done! You should be successfully integrated with the Box TS SDK in your browser in no time.
Just with one more simple function, you can display a greeting message to the app user.
<body>
<script>
[...]
function addElement(text) {
const newDiv = document.createElement("div");
const newContent = document.createTextNode(text);
newDiv.appendChild(newContent);
// Get container with ID app
const app = document.getElementById("app");
document.body.insertBefore(newDiv, app);
}
async function main(token) {
try {
const client = new BoxClient({
auth: new BoxDeveloperTokenAuth({ token }),
});
const { name } = await client.users.getUserMe();
// Add dynamically user name to your app
addElement(`Welcome ${name}`);
} catch (e) {
alert(String(e));
console.error(e);
}
}
main(prompt('Provide the developer token'));
</script>
[...]
<!-- Add the container with app ID -->
<main id="app"></main>
</body>After providing the token, the greeting message is added dynamically to our page.
And here the journey begins, be sure to check TS SDK docs for further information about available methods. Visit the Box API reference page to see all available endpoints!
In my next post I’ll dig into using the TS SDK in a React app! Stay tuned and follow for more tutorials and Box Platform updates!
Join our Box Developer Community for support and knowledge sharing!
Cheers!
