A Quick Introduction to Fresh, a Deno framework build for speed ⚡

And an introduction to the island architecture.

Photo by James Lee on Unsplash

Nowadays, new JavaScript libraries with insane speed seemingly get released every week. But it’s important to sieve through the mess and try and check out the really good ones every once in a while.

Today we’re going to check out Fresh, a framework for Deno applications (not npm) that focuses on insane speed using the island architecture and thus hydrates only what is needed, and nothing more. Let’s check it out.

Setup

Installing Deno

Before we can set up a Fresh project, we need to set up Deno. Deno is, like Node, a runtime for web applications. It focuses on speed and developer experience.

For instance, it supports TypeScript out of the box.

Deno can be installed using a wide range of package managers such as Scoop, Snap, and Chocolatey, or you can install it by running a shell script.

curl -fsSL https://deno.land/install.sh | sh

When running the command it shows how you can add it to your PATH variable. Do that as well.

You can run deno --version to check out if the installation was successful.

Setting up Fresh

Setting up a new Fresh project is even easier. We just have to run a few commands.

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

Where my-project is your project name. This will create a new folder in which it will put all Fresh files. It will ask you if you use VSCode, and if you’d like to use TailwindCSS for your styling. I am doing both.

cd my-project
deno task start

We can then go into that folder and start the server by running deno task start . You should then be greeted with a welcome screen from Fresh.

Fresh ‘Hello world’ screen

File Structure

The basic file structure is fairly simple to understand. For example, the components folder is, like you’d expect, for your components. This can be anything from buttons to navigation bars.

The static folder will contain all static images and logos. Maybe even scripts that should be served statically to the front end.

routes will contain all of your pages, and routes/api will contain APIs for accessing databases or other back end data. Files with square brackets like [name].tsx are dynamic routes. Useful for routes like /profile/{id} that you often see.

The most unique is islands . Islands enable interactivity on the client side in frameworks like Fresh, it’s different since all other components don’t have interactivity to reduce the shipped JavaScript size.

An island can be used in a page like a regular component, Fresh will take care of hydrating the island on the client side.

So inside the islands directory we have interactive components. Such as the counter in the new Fresh project we can see in the image above.

components/
    Button.tsx
islands/
    Counter.tsx
routes/
    api/
        joke.ts
    index.tsx
    [name].tsx
static/
    favicon.ico
    logo.svg
deno.json
dev.ts
fresh.gen.ts
import_map.json
main.ts
README.md
twind.config.ts

Next up, we have some files in our project root. Let’s take a look at them as well.

deno.json is our Deno configuration file. We will leave this file alone, but here you could change some Deno options.

dev.ts is the development entry point of your project. You run this file to start your project in development mode. The name doesn’t have to be dev.ts but it’s the convention to do so anyway.

main.ts is the same as dev.ts , but for your production environment. It’s name isn’t strict either.

fresh.gen.ts is an automatically generate manifest file that contains information about routes and islands.

import_map.json is an import map file used for managing dependencies for this project.

It looks like a lot of boilerplate compared to frameworks like NextJS, but since most of it isn’t necessary to run, or is automatically generated, it isn’t a hassle at all. And it is still very well-organized.

Conclusion

Thank you so much for reading and have an excellent day.

Consider supporting me by getting a Medium membership. It helps me out a lot, it won’t cost you anything extra, and you can read as many Medium articles as you like!

Follow me on Twitter and gm.xyz to keep up with me and my projects.

Check out Pixel Pizzas on the Polygon Blockchain.

You can buy me a coffee on Ko-fi!

JavaScript is not available.