React + Low-code backend. The way to skip infrastructure messing up

#tutorial #react #webdev #database

Hey all! Almost any web app needs both a frontend and a backend parts. React seems to be the best choice for building a user interface. It's clean, flexible and fast. From my experience, development often gets stuck due to the backend part. It takes too long to setup a database, update API-methods, configure RBAC and mess up with an infrastructure.

There is a way how to make it simpler. I'd like to show you the process of developing a React app with backend based on Directual—the visual backend constructor. First, I'll give the general approach overview. Then, you'll find the full live-demo of development (I've built this example app: MyMovieList in 2h 53m). The video may also be considered as a tutorial for beginners.

General overview

User Interface

Feel free to develop your UI as you like–with hooks, classes, etc. Having connected Directual backend you can use the following patterns:

import Directual from 'directual-api';
import { useAuth } from '../auth' // we will look at auth.js further in post
//...
const api = new Directual({ apiHost: '/' })
const auth = useAuth();
//...
const dataStructure = '' // todo: insert here Sysname of your data structure
const endpoint = '' // todo: insert here Method name of your API-endpoint
//...
// Auth context:
auth.user // returns user ID
auth.sessionID // returns user session ID
auth.isAutorised() // returns true if user is authorised
auth.hasRole('role') // returns true if user.role == 'role' (see user management further)
//...
// GET request:
function getData() {
    api
      // Name of Data structure (table) in the Database
      .structure(dataStructure)
      // GET request + query params (sessionID)
      .getData(endpoint, { sessionID: auth.sessionID})
      // other possible query params: page, pageSize, sort and any custom parameter for Filtering
      .then((response) => {
        // handling response
      })
      .catch((e) => {
        // handling errors
      })
  }
//...
// POST-request:
let payload = {} // Request payload
function postData() {
    api
      // Name of Data structure (table) in the Database
      .structure(dataStructure)
      // POST request + payload + query params
      .setData(endpoint, payload, { sessionID: auth.sessionID })
      .then((response) => {
        // handling response
      })
      .catch((e) => {
        // handling errors
      })
  }
//...

Low-code cloud backend

Let's figure out how we can setup database, backend logic and APIs on Directual. You can use the platform for free. There are limits on the load produced by an app in free plan (10k requests per month).

Database
Here it is—a UI for managing database. Folders and tables (data structures):

This is the page for configuring a table (data structure):

Also, there is a system structure – App users (system name WebUser). Its objects are users. These objects from WebUser have the following properties: id (username), password(encrypted) and role:

API-builder
Go to section API, and here you can configure API-endpoint:

Setting up an API method we can add user-based security, filters and sorting. Also we can indicate which fields will be available for GET- and POST-requesting.

Backend logic (scenarios)
There are workflows (Directual scenarios) for processing the data (both in real-time and in scheduled manner). Basic scenario steps are just actions under objects, so these steps are quite universal.

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

The idea of the example app

I wanted my friends to be able to recommend me movies. So, the app solved that problem. There are 'watched' and 'to watch' movie lists and the form for submitting a recommendation (signing in is required). The result is here MyMovieList, find its code on GitHub.

We'll cover:

Bootstrapping React app based on Directual boilerplate-code;
Using React hooks for handling state;
Building authentication and private routing;
Configuring database and required APIs in Directual;
Getting/Posting data from/to the database;
Connecting a third-party API for enriching data;
Building and packing our product into Docker container.

I've recorded the whole development process. It took 2 hours 53 minutes, without any fuzz. Have a look! I tried to compose it as a tutorial for beginners. I didn't cut anything. If you are an experienced frontend-dev, you may consider watching all the details a bit boring, so, use the timestamps on Youtube. :)

What's next

If you, guys, like such a live-tutorial, I can compose more—this simple site may be be developed into movies-related social network with profiles, individual lists, likes, shares, etc. It will be a good exercise. I suppose, it'll take a couple of hours more.