WebFund 2024F: Tutorial 9: Difference between revisions
| Line 28: | Line 28: | ||
# Edit deno.json so that you can run the app with the command <tt>deno task go</tt>. | # Edit deno.json so that you can run the app with the command <tt>deno task go</tt>. | ||
# Look at the automatically generated file fresh.gen.ts. What routes seem to be defined? | # Look at the automatically generated file fresh.gen.ts. What routes seem to be defined? | ||
# Change the welcome message as instructed on the main page. What file did you edit? | |||
# 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? | # 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? | ||
# Look at the files in the static subdirectory. At what URLs is this content available? Were these routes specified in fresh.gen.ts? | # Look at the files in the static subdirectory. At what URLs is this content available? Were these routes specified in fresh.gen.ts? | ||
| Line 33: | Line 34: | ||
# What URL do you visit to see a greeting that includes your name? | # What URL do you visit to see a greeting that includes your name? | ||
# 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? | # 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? | ||
# Make the counters go up and down by 3 rather than 1. Make sure to change the functionality and the label. | |||
Revision as of 16:58, 22 November 2024
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
- Edit deno.json so that you can run the app with the command deno task go.
- Look at the automatically generated file fresh.gen.ts. What routes seem to be defined?
- Change the welcome message as instructed on the main page. What file did you edit?
- 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?
- Look at the files in the static subdirectory. At what URLs is this content available? Were these routes specified in fresh.gen.ts?
- What URL do you visit to see a joke?
- What URL do you visit to see a greeting that includes your name?
- 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?
- Make the counters go up and down by 3 rather than 1. Make sure to change the functionality and the label.