Skip to main content

Quick Start

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

info

Using React or Ember? Check out our Integrations.

  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/stencil-components Demo</title>
  </head>
  <body></body>
</html>
  1. Include @globus/stencil-components. We'll update the <head> to include a <script> tag that references the latest version of @globus/stencil-components 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 this example.
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@globus/stencil-components Demo</title>
    <script
      type="module"
      src="https://unpkg.com/@globus/stencil-components"
    ></script>
  </head>
  <body></body>
</html>
  1. Create a Context Most Globus UI components require access to a shared state. For example, the <globus-auth-context> component is used to wrap components that require specific Globus Auth state.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@globus/stencil-components Demo</title>
    <script
      type="module"
      src="https://unpkg.com/@globus/stencil-components"
    ></script>
  </head>
  <body>
    <globus-auth-context
      client-id="bb8b1927-8b64-4c68-a025-dd7daca20cbd"
      redirect-uri="https://localhost/index.html"
      scopes="urn:globus:auth:scope:transfer.api.globus.org:all"
    >
      <gac-authenticated>
        <p>Thanks for visiting!</p>
        <button id="logout">Log Out</button>
      </gac-authenticated>

      <gac-authenticated state="false">
        <p>In order to access this resource, you'll need to login in.</p>
        <button id="login">Log In</button>
      </gac-authenticated>

      <script>
        document.querySelector("#login").addEventListener("click", () => {
          const context = document.querySelector("globus-auth-context");
          context.dispatchEvent(new Event("authenticate"));
        });

        document.querySelector("#logout").addEventListener("click", () => {
          const context = document.querySelector("globus-auth-context");
          context.dispatchEvent(new Event("revoke"));
        });
      </script>
    </globus-auth-context>
  </body>
</html>
  1. Add more Globus UI functionality!