Easy download of the lesson code merging template + current files

[eric-burel]

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]

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]

@eric-burel does #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]

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]

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.

[AriPerkkio]

This should now be doable with Webcontainer's export API: https://webcontainers.io/api#%E2%96%B8-export.

I think the implementation for this will be very similar to "Open in Stackblitz"-button:

tutorialkit/packages/astro/src/default/components/OpenInStackblitzLink.tsx

Lines 1 to 37 in 0af3848

	import StackBlitzSDK from '@stackblitz/sdk';
	import { tutorialStore } from './webcontainer.js';
	export function OpenInStackblitzLink() {
	return (
	<button
	title="Open in StackBlitz"
	className="flex items-center font-size-3.5 text-tk-elements-topBar-iconButton-iconColor hover:text-tk-elements-topBar-iconButton-iconColorHover transition-theme bg-tk-elements-topBar-iconButton-backgroundColor hover:bg-tk-elements-topBar-iconButton-backgroundColorHover p-1 rounded-md"
	onClick={onClick}
	>
	<svg viewBox="0 0 28 28" aria-hidden="true" height="24" width="24">
	<path
	fill="currentColor"
	d="M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z"
	></path>
	</svg>
	</button>
	);
	}
	function onClick() {
	const lesson = tutorialStore.lesson;
	if (!lesson) {
	throw new Error('Missing lesson');
	}
	const snapshot = tutorialStore.takeSnapshot();
	const options = typeof lesson.data.openInStackBlitz === 'object' ? lesson.data.openInStackBlitz : {};
	StackBlitzSDK.openProject({
	title: options.projectTitle || 'Project generated by TutorialKit',
	description: options.projectDescription,
	template: options.projectTemplate || 'node',
	files: snapshot.files,
	});
	}