stackblitz / tutorialkit

TutorialKit by StackBlitz - Create interactive tutorials powered by the WebContainer API
https://tutorialkit.dev
MIT License
236 stars 24 forks source link

Easy download of the lesson code merging template + current files #166

Open eric-burel opened 1 month ago

eric-burel commented 1 month ago

Is your feature request related to a problem?

I am crafting a tutorial, and debugging the template application can be a bit tricky. The webcontainer loading time is acceptable for an application that works, but quite slow for a debugging process when it doesn't. Also when modifying the content of "_files" and "_solution" folder, the files may miss some context from the parent template and end up with bad typings (maybe there are solutions to that though), it's easier to work on a complete application. Finally end user may want to do a local run of the code.

Describe the solution you'd like.

Be able to download the full template + _file/_solution code.

Describe alternatives you've considered.

Created a dirty copy script with cp

# Copy an app to test it locally
mkdir -p "./tmp"
cp -R ./src/templates/nextjs/. ./tmp
cp -R ./src/content/tutorial/2-nextjs/2-various/1-streaming/_files/. ./tmp

Then I can debug the app in "tmp", finalize the code, and move it back to the solution.

It does the job making this issue not really dramatic, but we could imagine something built-in, all the more that you probably have merging logic in order to bootup the webcontainer (I didn't dig the codebase yet).

Additional context

No response

sulco commented 1 month ago

Love this idea! We've been also discussing an "open in StackBlitz" functionality — that would allow e.g. for easy reproductions for bugs in lessons, continuing with the lessons, etc — and it looks like both features would benefit from the same ground work (like exposing the fs state to the developer)

AriPerkkio commented 1 month ago

@eric-burel does https://github.com/stackblitz/tutorialkit/pull/219 solve this issue?

You can easily open the current status of TutorialKit's code editor + template in StackBlitz by clicking the button on top bar.

eric-burel commented 1 month ago

Thanks that's perfect for a first iteration! I'd be eager to have a quick way to run a local install too, because at some point you often want learners to be able to run an app on their own computer (that's probably doable via Stackblitz UI but still need 2 actions instead of one). Could also be interesting to be able to see the whole codebase of the template directly within tutorialkit: this way you don't have to boot the webcontainer twice. Anyway I'll close this specific issue as it solves the main issue: seeing the whole app codebase.

eric-burel commented 2 weeks ago

Hi folks, reopening this issue with new insights, there are legitimate scenarios where running the preview is not a good idea and running on StackBlitz is not sufficient.

For instance I want to demo Playwright testing, showing some code, but you probably don't really want to run a browser within a webcontainer within a browser. Actually you probably do want that, but it doesn't seem to work that easily :')

You can still keep the preview around, it will just open the main app without running tests. But you'd want to incitate the user to download the code in this case.