📘

This section assumes you already have a project set up in Onboardbase Dashboard. If you don't, please create an account and get started!

📘

To make integration faster the team at Onboardbase has released an open-source react starter kit you can check it out here

Create a React Project

We would be deploying the demo version of the CRA project.

From anywhere comfortable in your terminal, run:

// Create a new React App using Create React App if you don't have one
npx create-react-app onboardbase-react --template typescript 

// Or

yarn create react-app onboardbase-react --template typescript

Then, change into the project folder cd onboardbase-react and add a remote git URL.

git remote add origin [REMOTE_GIT_URL]

git push --set-upstream origin main

Finally, start the project with:

yarn start

// or

npm start

Install Onboardbase CLI

Follow the installation guide to set up Onboardbase CLI for your machine.

Verify installation with onboardbase --version which would output the version of the CLI you just installed.

Authenticate Onboardbase CLI

From anywhere in your terminal, run onboardbase login, and accept to open the page in a browser.

On the authorization page, enter your email, a confirmation link would be sent to the email, click on the link, and your CLI should be authorized. Check your terminal to confirm.

Setup Onboardbase CLI

After successful installation, from the React Project directory in your terminal, run:

onboardbase setup

This would list all your projects, select the react project, select the development environment and accept to add .onboardbase.yaml to your .gitignore file.

This would create an .onboardbase.yaml file that has all the details you selected during the setup and that would be used by the build script to know which secrets to pull into your react project.

Building with Onboardbase CLI

Since we have all our secrets on Onboardbase, we would be using the build tool from Onboardbase to load secrets into the project.

To do this, modify your start script inside the package.json instead of having this:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

To this:

"scripts": {
    "start": "onboardbase run --command=\"react-scripts start"",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

Notice how we now use onboardbase run to run the start and build process, instead of the base react-scripts.

To test this, start the development server with:

yarn start

Which should import all your Onboardbase projects.

The secrets are available through: process.env.REACT_APP_STORED_IN_ONBOARDBASE

Awesome!