Bearer

The Bearer Documentation Hub

Welcome to the Bearer documentation hub. You'll find comprehensive guides and documentation to help you start working with Bearer as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    Changelog

Hello World!

Let’s create a first Scenario based on Github's API!

Bearer Examples

This Scenario is part of a list of examples we built for you to inspect & run. You can find the source code of this one here.

1. Bearer new

npm 6 or yarn

The following examples require you to have npm 6 or yarn installed.

Let's generate the integration structure:

# Using yarn
yarn create bearer helloWorld --authType=OAUTH2

# Using npm
npm init bearer helloWorld --authType=OAUTH2

# Using npx
npx create-bearer helloWorld --authType=OAUTH2

# later you can remove --authType argument to get a prompt and choose your authentication mechanism



 ________________________________
   _
  | |__   ___  __ _ _ __ ___ _ __
  | '_ \ / _ \/ _` | '__/ _ \ '__|
  | |_) |  __/ (_| | | |  __/ |
  |_.__/ \___|\__,_|_|  \___|_|
________________________________
bearer cli runner.

Links:
* documentation: https://docs.bearer.sh
* portal: https://app.bearer.sh
________________________________
  ✔ Generating setup components
  ✔ Generating setup intents
  ✔ Generating scenario structure
  ✔ Create auth files
  ✔ Create setup files
  ✔ Create scenario specification file
  ✔ Create intial components
  ✔ Install dependencies
    create: helloWorld/LICENSE
    create: helloWorld/.gitignore
    create: helloWorld/.scenariorc
    create: helloWorld/package.json
    create: helloWorld/spec.ts
    create: helloWorld/tsconfig.json
    create: helloWorld/intents/tsconfig.json
    create: helloWorld/views/index.html
    create: helloWorld/views/index.ts
    create: helloWorld/views/openapi.json
    create: helloWorld/auth.config.json
    create: helloWorld/config.dev.js.example
    create: helloWorld/intents/client.ts
Scenario initialized, name: helloWorld, authentication type: OAuth2

What's next?

* read the bearer documentation at https://docs.bearer.sh

* start your local development environement by running:

   cd helloWorld && bearer start

From the output you can see that new command generated an helloWorld/ folder and bootstrapped many files.

API Authentication Support

Bearer support out-of-the box four kinds of API authentication, more info Here

2. Folder Structure

At this point the Integration structure should look like this:

$ tree -L 2 -I node_modules                                         beta4-
.
├── LICENSE
├── auth.config.json
├── config.dev.js.example
├── intents
│   ├── client.ts
│   ├── retrieveSetup.ts
│   ├── saveSetup.ts
│   └── tsconfig.json
├── package.json
├── spec.ts
├── tsconfig.json
├── views
│   ├── feature-action.tsx
│   ├── feature-display.tsx
│   ├── feature.css
│   ├── index.html
│   ├── index.ts
│   ├── openapi.json
│   ├── setup-action.tsx
│   ├── setup-display.tsx
│   └── setup.css
└── yarn.lock

2 directories, 20 files

Two main folders have been created at the root of the project:

  • intents/: Represents the backend of the scenario, in charge of communicating with the Service API and the Scenario frontend components.
  • views/: Represents the UI of the Scenario (aka components).

Let's dig into the views/ folder:

$ tree
.
├── feature-action.tsx
├── feature-display.tsx
├── feature.css
├── index.html
├── index.ts
├── openapi.json
├── setup-action.tsx
├── setup-display.tsx
└── setup.css

0 directories, 9 files

Inside the src folder we can find:

  • feature-action.tsx: Represents the "action" Root Component
  • feature-display.tsx: Represents the "display" Root Component
  • feature.css: Represents the Root Components CSS
  • index.html: HTML file embedding the Root Components for testing purpose

Scenario Anatomy

Learn more about the anatomy of a Scenario and the underlying component structure.

3. Running it!

We can run the Scenario locally using yarn start command, let's see what it looks like:

$ yarn start

At that point your browser should have opened itself and serve: http://localhost:3333

🎉Hooray, you successfully bootstrapped your first integration, it's now time to code an actual implementation 🎉