Skip to main content

Quick Start in a browser

Get started by including our production-ready JavaScript via CDN without the need for any build steps.

info

If your application is bundled for the browser using a precompile step you can use our npm package directly.

npm install @globus/sdk

If you are using Typescript, see our Typescript documentation.

  1. Create a new index.html file in your project.
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@globus/sdk Demo</title>
  </head>
  <body>
    <h1>@globus/sdk</h1>
  </body>
</html>
  1. Include @globus/sdk. We'll update the <head> to include a <script> tag that references the latest version of @globus/sdk from the unpkg CDN. If a specific version is required, we could specify that in the URL, but we'll use the latest version for now.
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@globus/sdk Demo</title>
    <script src="https://unpkg.com/@globus/sdk/umd/globus.production.js"></script>
  </head>
  <body>
    <h1>@globus/sdk</h1>
  </body>
</html>
  1. Add some functionality! Including the @globus/sdk package will add a globus object to the global scope. In this example, we'll do a basic Transfer Endpoint Search.
caution

For brevity, this example assumes you have obtained a valid access token for use with Transfer's endpoint search. See Authorization in a Browser for more details on how to obtain a token for your application.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@globus/sdk Demo</title>
    <script src="https://unpkg.com/@globus/sdk/umd/globus.production.js"></script>
    <script>
      const GLOBUS_AUTHORIZATION_TOKEN = '';
      async function main() {
        const result = await (
          await globus.transfer.endpointSearch(
            { 
              query: { filter_fulltext: "Globus Tutorial" },
              headers: {
                Authorization: "Bearer " + GLOBUS_AUTHORIZATION_TOKEN
              }
            }
          )
        ).json();

        const collections = result.DATA.map((collection) => {
          return `<li>${collection.display_name}</li>`;
        });

        document.getElementById("collections").innerHTML = collections.join("");
      }
      main();
    </script>
  </head>
  <body>
    <h1>@globus/sdk</h1>
    <ul id="collections">
  </body>
</html>

Next Steps​