DEV Community

Cover image for Realtime connector for Strapi
Xen
Xen

Posted on

Realtime connector for Strapi

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)
})
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Step 2

Install the following module inside your Strapi application:

yarn add @floxum/core
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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);
};
Enter fullscreen mode Exit fullscreen mode

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')
  })
}, []);
Enter fullscreen mode Exit fullscreen mode

Discussion (2)

Collapse
dandev95 profile image
DanDev95

I fail to see the realtime part of this.

Collapse
xencodes profile image
Xen Author

the development of this is still in progress, yesterday i added functions to login and register...