The next-gen web framework Fresh
Fresh is in the “SSR with client-side progressive enhancement” camp. I have to admit their list of ‘stand out’ features is quite appealing:
- No JS is shipped to the client by default
- No build step
- No configuration required
- TypeScript support out of the box
At its core, Fresh is a combination of a routing framework and templating engine that renders pages on demand, on the server. In addition to this just-in-time (JIT) rendering on the server, Fresh also provides an interface for seamlessly rendering some components on the client for maximum interactivity. The framework uses Preact and JSX for rendering and templating on both the server and the client.
Fresh projects can be deployed manually to any platform with
deno, but it is intended to be deployed to an edge runtime like Deno Deploy for the best experience.
Some stand-out features:
- No build step
- Zero configs necessary
- JIT rendering on the edge
- Tiny & fast (no client JS is required by the framework)
- Optional client-side hydration of individual components
- Highly resilient because of progressive enhancement and use of native browser features
- TypeScript out of the box
- File-system routing à la Next.js
Deno works on macOS, Linux, and Windows. Deno is a single binary executable. It has no external dependencies.
On macOS, both M1 (arm64) and Intel (x64) executables are provided. On Linux and Windows, only x64 is supported.
deno_install provides convenience scripts to download and install the binary.
Using Shell (macOS and Linux):
curl -fsSL https://deno.land/x/install/install.sh | sh
Using PowerShell (Windows):
iwr https://deno.land/x/install/install.ps1 -useb | iex
Using Scoop (Windows):
scoop install deno
Using Chocolatey (Windows):
choco install deno
Using Homebrew (macOS):
brew install deno
Using Nix (macOS and Linux):
nix-shell -p deno
Build and install from source using Cargo:
cargo install deno --locked
Deno binaries can also be installed manually, by downloading a zip file at github.com/denoland/deno/releases. These packages contain just a single executable file. You will have to set the executable bit on macOS and Linux.
For more information and instructions on the official Docker images: https://github.com/denoland/deno_docker
Create a Project in Fresh
New Fresh projects can be created using the fresh project creation tool. It will scaffold out a new project with some example files to get you started.
To create a new project in the directory
$ deno run -A --no-check https://raw.githubusercontent.com/lucacasonato/fresh/main/init.ts my-project
The manifest has been generated for 3 routes and 1 islands.Project created!
Run `deno task start` in the project directory to get started.
This will create a directory containing some files and directories. There are 4 files that are strictly necessary to run a fresh project:
dev.ts: This is the development entry point for your project. This is the file that you run to start your project. This file doesn't need to be called, but this is the convention.
main.ts: This is the production entry point for your project. It is the file that you link to Deno Deploy. This file doesn't actually need to be, but this is the convention.
fresh.gen.ts: This is the manifest file that contains information about your routes and islands. This file is automatically generated in development based on your
import_map.json: This is an import map that is used to manage dependencies for the project. This allows for easy importing and updating of dependencies.
deno.json the file is also created in the project directory. This file does two things:
- It tells Deno about the location of the import map so that it can be loaded automatically.
- It registers a “start” task to run the project without having to type a long
Two important folders are also created that contain your routes and islands respectively:
routes/: This folder contains all of the routes in your project. The names of each file in this folder correspond to the path where that page will be accessed. The code inside of this folder is never directly shipped to the client. You'll learn more about how routes work in the next section.
islands/: This folder contains all of the interactive islands in your project. The name of each file corresponds to the name of the island defined in that file. The code inside of this folder can be run from both client and server. You'll learn more about islands later in this chapter.
static/ the folder is created that contains static files that are automatically served "as is". Learn more about static files.