Recently I have introduced Directual on Hackernoon (see ). Now I would like to continue with absolutely practical post. First, I will show the general scheme of combining Directual and React, and then you will find the live-demo of building an app from scratch to production-ready Docker-container. Low-code for hackers Low-code Approach for Building a Backend Quick recap. A development often gets stuck due to the backend part. It takes too long to update API-methods, setup authentication and mess up with an infrastructure. There is a way to make it simpler. provides visual tools for configuring the whole backend for your app. It includes cloud database, API-builder, role-based account control, workflow automation and features for integrations. Such a visual approach is called low-code. Directual Why React? We haven’t use any technology just because ‘it’s trendy’. We should solve the problem quickly and efficiently. There are no-code platforms for building a frontend, but if you need rather complex interface, using React will be the best choice. It's clean, flexible and fast. According to the recent , React is the most trusted JS-library: StateofJS research React + Directual Using Directual you can setup the whole backend , and then, should any change in database or API required, you can make that change almost instantly. in less than 15 minutes 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: Directual ; { useAuth } api = Directual({ : }) auth = useAuth(); dataStructure = endpoint = auth.user auth.sessionID auth.isAutorised() auth.hasRole( ) {
    api .structure(dataStructure) .getData(endpoint, { : auth.sessionID}) .then( { })
      .catch( { })
  } payload = {} {
    api .structure(dataStructure) .setData(endpoint, payload, { : auth.sessionID })
      .then( { })
      .catch( { })
  } import from 'directual-api' import from '../auth' // auth.js is a React-wrapper for directual-api authentication methods //... const new apiHost '/' const //... const '' // todo: insert here Sysname of your data structure const '' // todo: insert here Method name of your API-endpoint //... // Auth context: // returns user ID // returns user session ID // returns true if user is authorised 'role' // returns true if user.role == 'role' (see user management further) //... // GET request: ( ) function getData // Name of Data structure (table) in the Database // GET request + query params (sessionID) sessionID // other possible query params: page, pageSize, sort and any custom parameter for Filtering ( ) => response // handling response ( ) => e // handling errors //... // POST-request: let // Request payload ( ) function postData // Name of Data structure (table) in the Database // POST request + payload + query params sessionID ( ) => response // handling response ( ) => e // handling errors //... Low-code Cloud Backend Now let’s see how to setup database, API-endpoints and workflows on Directual. First, you need an —it’s free until the app does not produce significant load (up to 10k requests/month). account Database There are tables ( ). Each data structure contains . data structures objects Each data structure can be configured with the following field types: string, number, decimal, boolean, json, array, link and arrayLink. There are specific system data structures. The crucial for us at the beginning is App users (system name ). Its objects are the users of your app. Property is a username and is an encrypted user’s password. Property can be used for role-based security and specific features in your app (see method in the code snippet above). WebUsers id password role .hasRole Here is a short video-tutorial about configuring database on Directual: API-builder API layer is an obligatory medium between a database and a UI. Each API-method must provide data following user-based security. For each API-endpoint you are setting up the data structure, and the list of properties available for GET and POST requesting. Workflows (Scenarios) Any significant app requires backend logic. There are for processing the data both in real-time and in scheduled way. Basic scenario steps are just actions under objects, so these steps are quite universal. These scenarios can also integrate your app backend with third-party systems via API. Directual scenarios Directual React Module Directual React Module contains two files: provides methods: , , , . auth.js .user .sessionID .isAutorised() .hasRole() creates middleware proxy to , for resolving the problem linked with CORS. We need to install package. setupProxy.js directual-api http-proxy-middleware Also you need to have the file in root directory. This file has to contain Directual App id: .env APP_ID=_YOUR_APP_ID_ You can find (or create) your App ID in API section on the platform: Live-demo 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 , find its code . MyMovieList on GitHub We will 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. I tried to compose it as a tutorial for beginners, so I didn't cut anything. If you are an experienced frontend-developer, you may consider watching all the details a bit boring, so, use the timestamps on Youtube. Hope that it was useful for you! I will be happy to receive a feedback.

Instantly

YouTube

Let people create!

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Setting Up a Backend for React App in 15 Minutes

Too Long; Didn't Read

Companies Mentioned

Pavel Ershov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Setting Up a Backend for React App in 15 Minutes

Too Long; Didn't Read

Companies Mentioned

Pavel Ershov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES