Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Investigate deploying react-admin as soul extension #5

Open
IanMayo opened this issue Dec 1, 2022 · 5 comments
Open

Investigate deploying react-admin as soul extension #5

IanMayo opened this issue Dec 1, 2022 · 5 comments
Assignees

Comments

@IanMayo
Copy link
Contributor

IanMayo commented Dec 1, 2022

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
Copy link
Collaborator

AbegaM commented Dec 10, 2022

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
Copy link
Contributor Author

IanMayo commented Dec 10, 2022

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

@AbegaM
Copy link
Collaborator

AbegaM commented Dec 10, 2022

ok, i will create an issue

@AbegaM
Copy link
Collaborator

AbegaM commented Dec 10, 2022

I have submitted the issue here

@AbegaM
Copy link
Collaborator

AbegaM commented Dec 11, 2022

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.

f758e9b

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants