That’s all the introductions out of the way then! This post will be a kind of “kicking the tyres” look at Fresh rather than an in-depth probe into its features. To help we built out a basic site and also include some of tips I picked up getting started with Deno Fresh.
There is no shortage of web frameworks so a good question to ask is when you might reach for fresh. Based on the Island technology, I would say try it on a site which does not have a lot of interactivity, for example. Or even a site which has interactivity only in sparse, independent parts of the pages. Fresh might make the page faster, bringing user experience as well as SEO benefits.
Islands are units of the page where we can opt to add interactivity. They can be a single component or a group of components — whatever makes sense for the application.
They both support TypeScript out of the box and use Islands paradigm. Though some differences are while Astro supports Svelte , Preact, React, Vue as well as other frameworks. As it stands Fresh only supports Preact — an optimised React alternative, which uses the same API as React.
At the time of writing, you cannot use the full collection of NPM packages with Deno and therefore Fresh. That is changing though and both ES Module and CommonJS based NPM packages will get support in a future version .
You need to have Deno CLI setup on your system to get running. If you are on a Mac and have Homebrew, run:
On Linux and in most other cases, you can run a shell install script from the Terminal:
Then you can create a new fresh project with:
You get to choose it you want Tailwind styling and TypeScript in the interactive scaffolding
script. You new app will be running at
For a complete getting started guide, check out the Fresh docs
, we’ll just skim over a couple of details here. Fresh uses file-based routing like Remix
or Astro. So
routes/index.tsx corresponds to the
https://example.com/ path. You can add meta (e.g. SEO) and rel tags to a
on pages. Here is the
routes/index.tsx file, which should look familiar
if you already know React:
The island hydration works a little differently to Astro; you put any island components in the
islands folder. To test this out, I just added a potentially privacy enhancing feature where you have to
click to accept loading a video from a social video sharing service:
islands/Video.tsx — click to expand code.
Deno CLI tooling has a code formatter and linter (commands:
deno lint), so no need to add and Prettier and ESLint to your new projects,
- there is no build step and code renders just in time on the edge,
- there is no extra markup within components for handling island hydration. This should make it quicker to try out an existing React project.
Styling: I wanted to go for vanilla CSS and stuck all the styles in a
global.cssfile in the
staticfolder. I then linked the stylesheet from a
link rel=tag. Didn’t find docs on if there is a fresher way of doing this, or if you can add scoped styles something like the Remix solution for vanilla CSS . A bonus would be vanilla-extract support in Fresh.
- Dependencies: I didn’t add any extra packages — however, I should just be able to use the NPM vanilla-lazyload in the new version.
- I haven’t looked into testing. There is, however, the testing module in the Deno tooling , which will be exciting to explore.
We have taken a whistle-stop tour of the new Deno Fresh web framework. In particular, we saw:
- what fresh does differently,
- when you might reach for fresh,
- as well as how to spin up a new Fresh project.
Check out the Fresh docs for further details. Get in touch if you would like to see more content on Fresh. Also keen to hear how you might use it in your own projects. The site is running live on Deno Deploy . Take a look at the full demo site code on the Rodney Lab GitHub page . I hope you found that useful and am keen to hear about possible improvements.
- At the time of writing, you are limited to the Deno ecosystem when looking for packages to add to your apps. However, that is all about to change. Deno have announced support for NPM packages in a future release. You will be able to source NPM packages by using an `npm:` prefix on the import URL, followed by the package name. This will work for ES Modules-based and CommonJS-based NPM packages.
Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, then please consider supporting me through Buy me a Coffee.
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on Astro as well as SvelteKit. Also subscribe to the newsletter to keep up-to-date with our latest projects.