Skip to main content

Installation

Integrating your Easybase tables into a React, React Native, Next.js, etc. project is very easy and only requires a few configuration steps to grant secure and authenticated database sessions in your front-end apps.

Setup

First, make sure you have a table with the proper schema for your app.

Easybase installation 1

In the left-hand drawer of Easybase, head to 'Projects โ†’ Create Project'.

Easybase installation 2

Go to Permissions. Click your table's name and enable 'Users not signed in โ†’ Read, Write' for the table you would like to access. Click Save.

Easybase installation 3

Follow the steps in the Installation tab. The configurations for various frameworks are available below. Easybase installation 4

Configuration

After following the steps in the installation tab, you will be instructed to wrap your components with the <EasybaseProvider /> component and with your ebconfig.js token prop.

The provided instructions are specifically for React. There are slight variations for other frameworks.

tip

For React and React-based projects, be sure to have installed the easybase-react library in your project with npm install easybase-react

React

โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ node_modules/
โ”œโ”€โ”€ package.json
โ”œโ”€โ”€ public/
โ””โ”€โ”€ src/
โ”œโ”€โ”€ ebconfig.js โ†
โ”œโ”€โ”€ App.js
โ”œโ”€โ”€ index.js
โ””โ”€โ”€ ...

src/App.js:

// src/App.js
import './App.css';
import { EasybaseProvider } from 'easybase-react';
import ebconfig from './ebconfig';

function App() {
return (
<EasybaseProvider ebconfig={ebconfig}>
<div className="App">
{/* etc... */}
</div>
</EasybaseProvider>
);
}

export default App;

React Native

โ”œโ”€โ”€ android/
โ”œโ”€โ”€ ios/
โ”œโ”€โ”€ node_modules/
โ”œโ”€โ”€ App.js
โ”œโ”€โ”€ ebconfig.js โ†
โ”œโ”€โ”€ index.js
โ””โ”€โ”€ ...

App.js:

// App.js
import { EasybaseProvider } from 'easybase-react';
import ebconfig from './ebconfig';

function App() {
return (
<EasybaseProvider ebconfig={ebconfig}>
{/* etc... */}
</EasybaseProvider>
);
}

export default App;

Next.js

โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ node_modules/
โ”œโ”€โ”€ package.json
โ”œโ”€โ”€ public/
โ””โ”€โ”€ pages/
โ”œโ”€โ”€ ebconfig.js โ†
โ”œโ”€โ”€ _app.js
โ”œโ”€โ”€ index.js
โ””โ”€โ”€ ...

pages/_app.js:

// pages/_app.js
import '../styles/globals.css'
import { EasybaseProvider } from 'easybase-react';
import ebconfig from './ebconfig';

function MyApp({ Component, pageProps }) {
return (
<EasybaseProvider ebconfig={ebconfig}>
<Component {...pageProps} />
</EasybaseProvider>
)
}

export default MyApp

Javascript

caution

For a Javascript project, be sure to have installed the easybasejs library in your project with npm install easybasejs. Do not use the easybase-react library for pure Javascript projects.

โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ node_modules/
โ”œโ”€โ”€ ebconfig.js โ†
โ”œโ”€โ”€ index.js
โ””โ”€โ”€ ...

index.js:

import Easybase from "easybasejs";
import ebconfig from "./ebconfig.js";

const eb = Easybase.EasybaseProvider({ ebconfig, options: { logging: true } });
// The eb object contains the same functions as useEasybase
const table = eb.db('EXAMPLE');

Moving Forward

Now, all children components of <EasybaseProvider /> will have secure access to the useEasybase hook.

This hook is your primary method to statefully use Easybase functions from within your components.

Congrats! You're ready to go. Head to the next page to start using Easybase.