Navigation bar for the preview frame

[noam-honig]

Hi, I'm the creator or remult, a full stack fully typed framework - and I'm working on transforming my existing tutorials Build a Full-Stack React Application
to use this tutorial kit - so you'll probably hear a lot of question from me in the near future :)

Anyhow - as part of explaining the full stack application, I want to ask the students to look at different urls, for example:
/api/tasks
/api/admin
etc...

Currently the preview panel doesn't have a url and doesn't have a back and reload buttons - Is there a way to add them?

[AriPerkkio]

Interesting idea! Currently we don't have any ways how to do this out-of-the-box.

What you could do now, is to create virtual navigation bar in your src/templates/** that is shown for each lesson. Simply rendering the window.location.pathname and creating buttons for controlling History API should be enough.

Having the preview's navigation bar to be part of TutorialKit's UI as built-in component might be difficult to implement. It's not simple to control the preview ifream outside it.

[noam-honig]

Hi @AriPerkkio, thanks for getting back to me.

I thought of creating a virtual navigation bar, the challange is that I want it to navigate to urls that are outside the hot reload of vite (an api url, or other server urls) - As soon as I navigate to these, I'll be outside of that navigation panel that'll be in the app.tsx ( I think) or would you recommend opening another IFrame there?
p.s
Really appreceate your work and responsiveness on this.

p.s.2
I there a showcase of existing tutorials - both to learn from and to post mine as soon as its ready?

[noam-honig]

Hi @AriPerkkio

I just had another look at the sveltekit tutorial, and they do have that feature:

Can we take it from there?

[Nemikolh]

Hey @noam-honig! The way svelte implement this is by having the iframe send a message to the parent page. You can view the logic here. So the rendered page is in charge of informing of the current URL to the parent.

This only works if the iframe is rendering html. If the content is an image or any non-text/html mime type then this cannot be used.

We should be able to do something though at the WebContainer level though. This has been mentioned several times in the past and it keeps coming up.

In the meantime, we could expose a way to customise the rendered Preview component so that you could render a custom path and update the path manually ala svelte using a postmessage or any other way (an alternative would be a server printing the current path in its output and read this to update the path).

[noam-honig]

Hi @Nemikolh, sounds more complex than I intended - sorry for that.
For my use case, I don't really need to read the existing url in the iframe, I just need to set the url, allow the user to reload (for cases where hot reload doesn't exist) and click back in the iframe. Are these operations supported by IFrame?

For my use case, probably #192 + a reload button in the tab title, would do the trick

[Nemikolh]

No need to be sorry! 🤗 Hearing your feedback on this is extremely important for us! 😃

We're really looking to provide the best experience, so we will eventually provide a full solution to this.

A reload button should be definitely doable and #192 is on the roadmap for 1.0.