WebFund 2024F: Tutorial 9

This tutorial is not yet finalized.

In this tutorial you will be playing with freshdemo, the demo application of Deno's Fresh framework. Note that you do not need to download the code here, just follow the steps below.

Getting Started

Run the following command:

 deno run -A -r https://fresh.deno.dev

Name your project "freshdemo" and say yes to using Tailwind (option 1). If you use VSCode, also say yes to that.

You should now have a "freshdemo" directory. Run the server as follows:

 cd freshdemo
 deno task start

The server should start.

If the server did not start, then instead do the following:

 cd ..
 rm -rf freshdemo     # clean up the old installation

 wget https://homeostasis.scs.carleton.ca/~soma/webfund-2024f/code/freshdemo.zip
 unzip freshdemo.zip
 cd freshdemo
 deno task start

Tasks

1. Edit deno.json so that you can run the app with the command deno task go.
2. Look at the automatically generated file fresh.gen.ts. What routes seem to be defined?
3. Add a heading to the beginning of the body of routes/_app.tsx. Where does it appear? What did you have to do to see the change?
4. Look at the files in the static subdirectory. At what URLs is this content available? Were these routes specified in fresh.gen.ts?
5. Add "

   BUTTON

   " to the return of Counter() in islands/Counter.tsx. How does the output of the server change? Does it depend upon whether the heading is put inside or outside the div?