DeepBlueCLtd / Soul4ReactAdmin

Demonstrator for using Soul database wrapper with ReactAdmin
Eclipse Public License 2.0
1 stars 0 forks source link

Investigate deploying `react-admin` as `soul` extension #5

Open IanMayo opened 1 year ago

IanMayo commented 1 year ago

We currently have to configure soul to overcome CORS requests.

But, if we served the static built react-admin as a soul extension, all requests would come from the host url.

Extensions are documented here: https://github.com/thevahidal/soul/blob/main/docs/extensions-examples.md

The big-picture is to:

  1. build a production release of the react-admin app, yarn build . The compiled app will end up in the build folder
  2. copy this built folder into a sub-directory of Soul
  3. create a Soul extension to open index.html on the built app
  4. call the Soul extension API, and check it: a) serves our app b) connects to Soul API

For that deployment strategy, we can probably even simplify the react-admin setup, since we don't need to specify the IP/Port for the soul server - it's the current one 🙂

AbegaM commented 1 year ago

I have created an extension inside the souls core folder, and i am now able to render the react app i built from the dist folder and everything is working fine, but there is some issue with soul and i had to modify the soul source code to make this work, here is the extension.

//soul/core/_extensions/api.js 
const path = require("path");
const express = require("express");

const reactAdminClient = {
  method: "GET",
  path: "/api/client",
  handler: (req, res, db) => {
    const clientPath = path.join(__dirname, "dist", "index.html");
    res.app.use(express.static(path.join(__dirname, "dist")));
    res.sendFile(path.join(clientPath));
  },
};

module.exports = {
  reactAdminClient,
};

The issue

Soul expects us to create our extension API inside the _extensions folder and it expects us to provide the path of the folder by using the EXTENSIONS environment variable, but as you see in here in line 9 the code is reading the _extensions folder and then it will require the /api.js file in line 12, this is not reading the path correctly in development so i have to edit line 12 like this.

- const apiExtensions = require(`${extensionsPath}/${extension}`);

+ const apiExtensions = require(`../${extensionsPath}/${extension}`);

I am still trying to make it work without editing the source code, but even if i change the location of my _extensions folder to other directories i keep getting the error.

IanMayo commented 1 year ago

if you are sure about that issue, post it on Soul, please.

AbegaM commented 1 year ago

ok, i will create an issue

AbegaM commented 1 year ago

I have submitted the issue here

AbegaM commented 1 year ago

The maintainer has answered my question, the issue was that I was supposed to pass the Absolute path of the _extensions folder to my .env file, everything is working fine now. please check the instructions i pushed in the Readme file and let me know if there is anything i have to fix.

https://github.com/DeepBlueCLtd/Soul4ReactAdmin/pull/7/commits/f758e9bf22c541d5a5b19baa4bf77f6b871f7aaf