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

If you’re feeling some JavaScript and/or Framework Fatigue, this won’t help. But competition pushes everyone (Next, Remix, etc) to improve. So, whether you check Fresh out or not, hopefully, it’ll have a positive impact on your work.

Fresh is a full-stack modern web framework for JavaScript and TypeScript developers, designed to make it trivial to create high-quality, performant, and personalized web applications. You can use it to create your home page, a blog, a large web application like GitHub or Twitter, or anything else you can think of.

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 also does not have a build step. The code you write is also directly the code that is run on the server, and the code that is executed on the client. Any necessary transpilation of TypeScript or JSX to plain JavaScript is done on the fly, just when it is needed. This allows for insanely fast iteration loops and very very fast deployments.

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

FRESH DOCS

Deno is a simple, modern, and secure runtime for JavaScript, TypeScript, and WebAssembly that uses V8 and is built in Rust.

Installation

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.

Docker

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 "my-project", run:

$ 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 routes/ islands/ folders.
• 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.

A 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 deno run command.

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.

Finally a static/ the folder is created that contains static files that are automatically served "as is". Learn more about static files.