Approach to integrate content in "public" folder

Hello again,

Some may be familiarized with my project but I will explain it for the new members around and see if someone can help me. My project is a menu/catalog of songs/scores that I have in Firestore, and it uses some external resource/software that I place in the “public” folder of the project. It is basically a “Javascript” app that runs after the user has selected some song to play in the menu. It is that with that interaction, the user will go to a “local” url like “./follow/follow.html?[url to the selected song]”.

This works just fine, but I have some inconvenience that I feel now that I should solve with a different approach. For example, when the user goes to play one song in that local url, the autheticated user is lost and it has to login again when coming back to the Menu. Also, I find some issues trying to share data or information between both the RS menu and the external resource.

I believe the most logical thing would be to have a screen component where the external resource would be loaded with appropriate parameter. When I take a look at the RS menu I see this may be possible in the routing section:

Where it asks for the URL path component could I say something like “./follow/follow.html” and then add the specific url to the song in the parameters?

Other than this, I have been pointed to JWT but what I have reading I believe this would be a little bit tricky for something that is a resource within the project. I am not sure.

Thank you in advance!

Perhaps the “Embed Content” component would work for you? ie. you embed the “./follow/follow.html” inside the Embed Content component so it loads / plays within the same web page. That way, the user is not leaving your website environment.

I did something like that to add a leaflet map onto one of my web pages.

BTW, my other project I was referring to - the leaflet map was also running in the “public” folder as well so it’s quite similar to what you’re doing

Thank you so much for your answer and your suggestion of the embedded content. That would be the logical and easy approach but… the app that I would embed uses MIDI signals through the browser. So that solution would work in a Desktop or an Android device but on iOS it wouldn’t work. I use an iPad myself and some of my students to use my project and Apple has some limitations to allow the MIDI communication in Safari or Chrome, so the solution is to run the app in a particular web browser named “Web MIDI Browser”. In that one it works.

If I embed content in a screen, it will be loaded with the integrated web browser from the iOS even though I run the app in the previously mentioned Web MIDI Browser. And for that reason I cannot use that approach which I have already tried.

By the way, I tried again this option the other day although it didn’t work some time ago when I first approached the issue, and I was not able to embed any content at all. Clearly I was doing something wrong because no matter the web url that I would write, I just saw the text of the html address that I indicated in React Studio. Is there any specific format to write the HTML address?

There are “web content” and “embed content” default components. Are you sure you used the “embed content” one?

I just tried it with a new project. Dragged the “embed content” component onto a screen. Pasted the code I referred to in the other post. And voila!

I read your question again. I probably didn’t answer it. The above was for embedding static code.

To embed the other html in your public folder, you should paste the following into the embed content component HTML content field:

<iframe width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\"\nsrc=\"http://localhost:3000/follow/follow.html"

Thank you so much for your answer. I used the “Embed content” component and I was pasting basically an url. I tried with the url for the local app in the public folder, which would be “./follow/follow.html”, and I also tried with different urls like “https://www.google.com/” but none was working for me. I understand that giving an url is suitable with the “Web content” component and this option is to give RS some HTML code.

I tried with the <iframe code that you gave me but it doesn’t work. However, I have used:

<iframe src="/follow/follow.html" width="600" height="450" frameborder="0" style="border:0"></iframe>

That is working fine. I am now in the process to check if that option allows the MIDI data to work. If it does, it would be awesome! But one more thing, how could I make that html iframe to be responsive? I mean, to fill the screen depending if it is loaded in an phone, tablet or desktop?

Thank you!

Ok. Nevermind. I found the way to make the iframe responsive:

But I just checked if that approach allowed the MIDI signals to work and it doesn’t work. It is true that when I tried some time ago I used the “Web content” component and this time I have checked the “Embed content” option for the first time, but the result turns out to be the same. It is a shame because it would have solved the issue quite easily.

So as I said in the first post, I have been pointed to use JWT but I am not sure how to integrate it into the Firestore plugin. I guess I would have to edit the plugin. Is anyone familiar with incorporating JWT into a React Studio and Firestore project?

Thank you!