Monawwar Abdullah
Monawwar Abdullah

Monawwar Abdullah

Add Realtime to Strapi and React

Add Realtime to Strapi and React

Realtime connector for Strapi

Monawwar Abdullah's photo
Monawwar Abdullah
·Sep 8, 2021·

2 min read

I've been using Strapi in many of my projects, and I love using it. So, to make it easier for Strapi developer to build awesome apps using React, I've made Floxum which can add an extra layer to Strapi, and that is Realtime.

Floxum uses Socket.IO in the background to communicate with Strapi server, and from the client side, a user can execute Strapi services. Here is an example:

floxum.services('todo', 'find', { _limit: 1 }).then((data) => {
   console.log(data)
})

This is an async function, which will execute find method on the Strapi server and returns the output using a Promise. This is just like you're execute a Strapi's server functions directly from React application.

This way, it's easier to build React apps connected with Strapi without making about HTTP requests, like we use axios or fetch.

Installation

The installation will also work for the projects which are already using Strapi.

Step 1

Install the following module inside your React project:

yarn add @floxum/react

Step 2

Install the following module inside your Strapi application:

yarn add @floxum/core

Step 3

Create a new file inside your React application to setup Floxum at src/providers (or anywhere you'd want) named floxum.js, and paste the following code.

import Floxum from '@floxum/react'

const floxum = Floxum('http://localhost:1337')

export default floxum

Change the host string to your Strapi host.

Step 4

Inside your Strapi applicaiton, go to config/functions/bootstrap.js, and import Floxum then call it inside the export module with strapi parameters:

"use strict";
const folxum = require("@floxum/core");

module.exports = async () => {
  folxum(strapi);
};

You're now good to go!

Step 5

Inside your Rect project (in any component) import Floxum and and test it by calling ping function, like this:

useEffect(() => {
  floxum.ping().then(() => {
    console.log('working')
  })
}, []);
 
Share this