Accessing the backend from a remote frontend app

[technolaaji]

I have read the examples provided by the repo and saw that the frontend libraries (web component and react) don't provide a way to pass a url to use the rest backend so I am assuming that both of them should be on the same server (same origin)

Upon doing that, when using react-ssr or nextjs with express, both frontend libraries face an issue that there is no window global variable that would generate the web component since it is server side rendered. Assuming that the frontend won't work unless you have a regular CRA running so there should be a reverse engine like Nginx to serve both entities on the same origin but my case that I don't want to do that because I want both the editor and player to run on a remote CRA app using the react library and just want to communicate with the backend remotely (and I don't want it to be an iframe embed on my remote site)

Care to explain how the frontend should run with the backend although there is no url param on any of the frontend components provided and the documentation is lacking a good portion of content that I have to resolve and read the code examples to understand some of the elements and still facing issues to understand how the workflow works in the first place

There is no documentation on what port the backend should run on, the rest example is not clear on several elements

[sr258]

The React components and webcomponents delegate the actual API access to callbacks (loadContentCallback, saveContentCallback), so it's up to you what URLs you call there. The REST example uses the ContentService for this, but you can (and should) implement your own version of it in which you can change the URLs or even the call how you need them.

While our components will work fine when the server runs on a different domain as the frontend, the underlying H5P core will run into issue. You'll have authentication problems (third-party cookies are becoming more and more of a problem) as H5P relies on cookie auth. There were also CORS issues when we tried this out, which we weren't able to resolve. So in the end I would definitely recommend the NGINX reverse proxy for H5P and serve frontend and backend from the same hostname. I wouldn't rule it out that running the frontend and the backend on different domains will work, but there will be obstacles, which we didn't solve yet.

[technolaaji]

Alright so let's consider the NGINX reverse proxy solution for the overall situation but let me explain how I understood the workflow and correct me if I am wrong here

so I have the backend server that is running with all the configuration and setup as expected (exactly like the example) and there are routes that utilize the h5p editor and player to save/edit/delete content of the h5p content that each user have done

the backend code will return json data that will be consumed by the frontend libraries based on the api calls that are created inside of the ContentService and I have the ability to save content ids on any database and utilize them for later usage that if I want to embed the project in an iframe, I can pass by the content id for the edit or playing

[sr258]

Yes, your understanding is correct.

It's important to note that there are also H5P core AJAX calls and resource requests which are not controlled by our libraries but sent directly by H5P:

[DiegoGonzalezCruz]

Hi guys, thanks for your amazing work.
I was wondering if you did implement H5P with nextjs?
I'm designing a headless WordPress application (nextjs+firebase), that reads content from a LearnDash LMS through rest api + graphQL.

Not only that, but I also have tons of H5P content that I want to show to my users, which I know I'm able to receive through the REST API endpoint the WP plugin offers.

Any lights/example on how to serve the content I receive from my WordPress trough Server Side Rendering?

Thank you very much.

[sr258]

Hi,

No, we haven't used NextJS. The library will probably be compatible, but there's not experience from our side.

If you use our server-side libraries, you can't use the WordPress H5P plugin. It's based on PHP and uses very different internal structures (we don't even support MySQL for example). It might be possible to use the webcomponent with a headless WordPress if you write an adapter for the structures returned by WordPress. But that's not really Server Side Rendering, which you asked for. You have to be aware that H5P generally is really client-centered and server-side rendering will only work for the frame not the actual H5P content. I think the webcomponent might still be a starting point for you own custom server-side rendering, though.

[technolaaji]

@DiegoGonzalezCruz I tried doing it using NextJS with Nodejs and it didn't work out as expected at all. It is that web components are not parsed the same as regular html tags on Nextjs. When providing a web component in a url in the main NextJS script tag or loading the script tag in a useEffect in the index file might work for regular web components, this library tried to extends a class that is visible in the DOM and browser but not supported in server side (not just this but also localstorage, sessionstorage, and much more but it can be fixed by double checking those elements exist in a useEffect after the dom is rendered which is an issue on its own honestly) and since this library extends a class and creates a new instance of this class

this issue might be addressed if the web component is written in a way that it can be hosted on a cdn and use it. @sr258 may I recommend writing that web component in https://direflow.io/ ? it is writting react code that gets parsed into a native web component then you can host it on a cdn and use it

Also Diego's case is that he can't use the WordPress plugin because the plugin doesn't have a rest api and he is not using WordPress as it is intended to be used but rather as a rest backend similar to Strapi or Loopback

[sr258]

The current webcomponent could also be built so that it runs from a CDN or a .js file on a local server. The changes should only be small and effect the build pipeline. I'd certainly accept a PR on this. Obviously the actual webcomponent can't run server-side as H5P lives on the client side and the webcomponent is basically only an initializer for H5P.

If Diego can't use the PHP plugin, it's probably best to run @h5p-server in a microservice and communicate with it through REST. The h5p-rest-example might be a good base for it. I've experimented with a H5P REST microservice that lives in a login union with WordPress: https://github.com/sr258/wp-h5p-shared-state (it only focusses on the shared state functionality, but the auth mechanism might be reused). I have no experience with headless WP, so I can't help more with that.

[DiegoGonzalezCruz]

Hi guys, thanks for your answers. I think I didn't explain myself clearly. So sorry for that.

Question: I have content in a WordPress instance, which I can fetch though REST API (same domain).

Is there any way to use that content in my nextJS front end? Any lights about it? (if not this library, could you suggest readings?)

Thanks in advance.

[sr258]

As I have neither used headless WordPress or NextJS I can't help you. I don't believe that H5P in WordPRess works with the REST, tough.

[DiegoGonzalezCruz]

thanks for your response :)
What do you think it would be my best option if I have around 300 h5p experiences in a wordpress instance, and I would like to use them in react?