Directual + React JS

Find the step-by-step manual and the boilerplate code on GitHub​
Using Directual you can setup the whole backend for your React App in less than 15 minutes, and then, should any change in database or API required, you can make that change almost instantly.
React app with Directual backend scheme
User Interface (UI)
Feel free to build your UI components as you used to: classes, hooks, etc. And there, in your components you can use the following Directual features:
Authentication methods: login, logout, auth context, etc.;
Getting data from the database;
Posting data into the database.
Have a look at these code patterns:
1
import Directual from 'directual-api';
2
import { useAuth } from '../auth' // auth.js is a React-wrapper for directual-api authentication methods
3
//...
4
const api = new Directual({ apiHost: '/' })
5
const auth = useAuth();
6
//...
7
const dataStructure = '' // todo: insert here Sysname of your data structure
8
const endpoint = '' // todo: insert here Method name of your API-endpoint
9
//...
10
// Auth context:
11
auth.user // returns user ID
12
auth.sessionID // returns user session ID
13
auth.isAutorised() // returns true if user is authorised
14
auth.hasRole('role') // returns true if user.role == 'role' (see user management further)
15
//...
16
// GET request:
17
function getData() {
18
    api
19
      // Name of Data structure (table) in the Database
20
      .structure(dataStructure)
21
      // GET request + query params (sessionID)
22
      .getData(endpoint, { sessionID: auth.sessionID})
23
      // other possible query params: page, pageSize, sort and any custom parameter for Filtering
24
      .then((response) => {
25
        // handling response
26
      })
27
      .catch((e) => {
28
        // handling errors
29
      })
30
  }
31
//...
32
// POST-request:
33
let payload = {} // Request payload
34
function postData() {
35
    api
36
      // Name of Data structure (table) in the Database
37
      .structure(dataStructure)
38
      // POST request + payload + query params
39
      .setData(endpoint, payload, { sessionID: auth.sessionID })
40
      .then((response) => {
41
        // handling response
42
      })
43
      .catch((e) => {
44
        // handling errors
45
      })
46
  }
47
//...
Copied!
Directual React module
There are two useful files from Directual React Boilerplate:
auth.js provides methods: .user, .sessionID, .isAutorised(), .hasRole().
setupProxy.js creates middleware proxy to directual-api, for resolving the problem linked with CORS. We need to install http-proxy-middleware.
Also you need to edit the .env file for connecting with Directual app:
APP_ID=_YOUR_APP_ID_
You can find (or create) your App ID in API section:
Live-demo example
Have a look at simple app MyMovieList (and its code on GitHub)
Here is a live-demo of developing process:
​

Reports - Previous

Running a report

Next - Pricing and billing

Pricing plans

Last modified 1yr ago

Copy link

Contents

User Interface (UI)

Directual React module

Live-demo example