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')
})
}, []);