WebFund 2024F: Tutorial 9

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. Change the welcome message as instructed on the main page. What file did you edit?
4. 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?
5. Look at the files in the static subdirectory. At what URLs is this content available? Were these routes specified in fresh.gen.ts?
6. What URL do you visit to see a joke?
7. What URL do you visit to see a greeting that includes your name?
8. Add <h1>BUTTON<h1> 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?
9. Make the counters go up and down by 3 rather than 1. Make sure to change the functionality and the label.
10. Add the code from Tutorial 6 to freshdeno as a new route. What did you have to do?
11. Try adding a basic form submission following the Fresh documentation. How difficult would it be to add the functionality of formdemo to freshdemo?