🍋 Why use Deno Fresh? #
- Deno Fresh builds fast sites so you get first class user experience (UX),
- amazing Developer Experience (DX) — it’s serverless with no build step, deploys are live almost instantly.
🤷🏽 What is Deno Fresh? #
When you need interactivity on a Fresh site, you can use Fresh's partial hydration feature set. This means only the parts of the page which are interactive, also known as islands of interactivity, get hydrated. Hydration is just the step in the page loading in the browser where code allowing interactivity gets loaded and the state of these components becomes consistent.
🎬 How do you Spin up a Fresh Fresh App? #
To get going you will need Deno in your development environment. If you do not yet have it installed, it is quick to set up from the Terminal with Homebrew on MacOS or a shell script on Linux:
In contrast to Node.js runtime-based tooling, with Deno typically you run apps and access packages via a URL. This is exactly what we can do to spin up a new Deno Fresh app. Once you have Deno installed, type these commands in the Terminal to get going:
🧐 Getting Started with Deno Fresh: What’s Inside? #
With Deno Fresh, you write your components in Preact (just pretend it’s React
if its your first time with Preact). Your Preact component files get placed in the
islandsdirectory depending on whether they are interactive or not. So a button which changes state can go in
islandsbut a form which uses the platform and WebAPIs can go into
deno.jsonthis loosely maps to a
package.jsonfile in Node.js. The included
starttask is what you run to start your app and tells Deno to run the
dev.tsfile (also listed above),
import_map.jsonas well as listing aliases for your packages, we will see how to add import aliases for project source files in this file, further down,
main.ts: this is where we run the in-built web server from. You can add additional config for TLS and what not here,
routes: this folder contains files which map to actual pages on your site. If you already use Astro, Remix or Next.js the file-based routing system will be very familiar.
routes/index.tsxwill map to
https://example.com/on your final site, while a
routes/about.tsxwill map to
routes/[name].tsxis a dynamic page template. This provides mechanism for example, to create
/offices/mumbaiall from a single file without duplicated the content and with access to the city name parameter within the template (
staticis for anything which does not need processing like favicons,
manifest.webmanifestfiles for PWAs or logos.
What’s deliberately missing? #
Notice there is no:
package.json: with Deno Fresh, you can use
import_map.jsonfor dependencies and the
tsconfig.json: Deno Fresh comes with in-built TypeScript support and selects sensible defaults under the hood to help you get going quicker on new projects,
eslint.config.js: just use the
deno lintcommand — no need to configure this,
.prettierignore: similar to Rust, formatting is also integrated into the tooling. Run
deno fmtwhen you want to tidy your code,
vitest.config.ts: you guessed it… Deno has integrated testing built into the tooling too!
🗳 Poll #
💫 9 Quick Tips for Getting Started with Deno #
Permissions: Deno prioritises security and gives you more control over what
your app has access to.
-Aflag in the
startscript grants our app access to all permissions including the file system (read and write), environment variables and the network. If you want finer grained control remove it and restart your app. You will now see prompts asking for various permissions in the Terminal.
In the cloud you can define secrets in the Deno deploy console (or your host’s equivalent). Locally, as with other tooling you can use a
.envfile. Remember to add this to your
.gitignorefile so secrets are not committed to your git repo.
VSCode Setup: you might already have a `.vscode/extensions.json`
file in the project (depending on how you answered the setup prompts).
This will cause VSCode to prompt you to install the Deno extension when you open the project. I noticed the extension was connecting to the network even in non Deno projects. Because of that, now I install it as normal, then in VSCode Extensions, find Deno, and click the Disable button. Finally, I click the dropdown to select Enable (Workspace).
The extension adds linting hints and formatting capabilities. To format on save, update
I notice the auto-format saved files change ever so slightly when I run
deno fmtfrom the Terminal, but imagine this will be addressed soon.
Browser vs. Server in other frameworks you might remember having to run a little
check to make sure a block of code only runs in the client. You can see an example of how to achieve
this in Deno in
Here the button is disabled if the code is not running in the browser, but you might also use this if you are working with local storage (for example) and need to access it on the client via
Deno std we added the
import_map.jsonearlier to access
dotenv. This is the Deno Standard Library (Deno has a standard library just like C and Rust). Apart from
dotenvyou might also use
$std/crypto: to access WebCrypto APIs in your server side code,
$std/encoding: for extracting Frontmatter from Markdown files or to generate base64 for BasicAuth HTTP headers,
$std/httpfor working with HTTP cookies.
$std/pathfor file manipulations you might find in
$std/testing/snapshot.tsfor Jest style
assertsas well as Behaviour Driven Testing
it. For Chai style
Finding Packages: Deno is a little different to Node.js in that you do
not have to use NPM as your package repository and also that you can import packages from
URLs. Under the hood, Deno caches the packages locally (a little like pnpm) so that you do
not need to download them afresh each time you start up your app. Three sources for third
party modules are:
https://deno.land/x?find Deno specific modules here,
https://cdn.skypack.dev/an alternative with NPM packages,
https://esm.sh/another NPM package alternative.
- Deno X:
More Aliases as well as adding aliases for your external modules, you can
also define them for your project folders. As an example, update
Now we can tidy up the import statements in
This can make your code look cleaner and also make it easier mentally to map where the import is coming from.
404 Page: create a custom page not found template by adding a
routes/_404.tsxfile to your project:
Note we use the
Headcomponent here to add the
<title>element to the HTML
<head>for our page.
Where do Favicons go? we mentioned earlier you can put favicons, logos and
manifest.webmanifest for a PWA in the project
staticfolder. This is also a great place to add your self-hosted fonts and even CSS. If you are using PostCSS then you might want to have your input CSS in a separate
stylesfolder at the root of the project then have PostCSS output the transpiled CSS to
static/styles. We will see further down how you can automatically append hashes to the served filenames so they cache-bust when updated.
For your project to access the
.env file you can add the
https://deno.land/[email protected]/dotenv package. The Deno Fresh way to do this is to update the import map with a
As a best practice include the package version in the URL (to keep your app working as expected
when maintainers introduce breaking changes in newer package versions). Next, import the load
dotenv in the
Notice two things: you include the
.ts extension in the path and
you can use the new alias you just created. If you wanted to, you could write out the entire URL
in the import statement instead of using the alias:
The drawback here is that you will likely use
std in other source
files and when you want to upgrade to
0.168.0 you will need to update
each file you include the full path in. Using the alias approach, you only need to update the import
Finally, in your source code you can then access the secret variable using
9 Quick Tips for Getting Started with Deno Continued (5 – 9) #
As an aside, the import
$std/fmt/bytes.ts for formatting file sizes into easily human readable strings.
Anatomy of a Deno Route File #
As a first step, take a look at the
included in the Deno Fresh skeleton content. It exports a default function which is a Preact
component. If you are familiar with React or Preact then there is nothing too interesting
for you here.
Even on a fairly basic site you might want to use content from a database or even
Markdown files within the project. This is work which Deno Fresh lets you do on the
server and sourced using a Deno handler function. The handler function
can sit in the same file as the rendered content (the exported React component in
routes/index.tsx, for example). I like this pattern of sourcing the data in the same file as the
rendered content. For smaller sites it can help debug a lot faster or even help you
remember how a page you wrote a few months back works.
Deno Fresh Route Request Handler #
I trimmed down a source file from a little Deno app for scheduling Tweets, it’s a kind of poor cousin of Hootsuite or Buffer. This will help us illustrate some more real-world Deno Fresh features. Let’s see the data handling part first:
The TypeScript support comes out of-the-box and we add nothing to get it to work. You
can see the
handler has a two components: a
GET handler, while will be called when the page loads and a
PUT handler which we will invoke by submitting a form (front-end code coming up). Notice how
PUT are named after
HTTP request methods — Deno loves the platform! These functions take a
context parameter as inputs. The
request is a standard WebAPI Request and we can apply the
to manipulate the request body. We can also destructure
url etc. from
context contains a
params object. For a template route (remember the offices in
mumbai, etc. example)? There our template file name
routes/offices/[office-name].tsx. Well, if for
example, we want to pull the phone number for the right office from the database when
the visitor goes to
can access the
mumbai part using the context:
As well as letting us access path parameters, the context object also defines a
render method. This is what provides the server-side rendering for us. By returning it, we can
pass the data into the client template. Let’s see that next.
Client React Code #
Remember we can keep things simple, placing this code in the same file as the handler.
We didn’t handle it above in the handler (to keep things simple), but we could
have returned an error if we had some issue pulling scheduled tweets from the database.
Checking for that error in the client code, we can let the user know something is not
syntactically equivalent to using
<></>. If you are new to React or Preact you might not know, our rendered elements must
have a single top level element (that is why wrap the other elements in
Header, etc would all be top level elements).
If we need to access the page URL, we can do so using the
ctx prop. Finally, notice we have a form to handle submitting a new tweet. This works using
to this. Learn it once and use it here in Deno Fresh, in SvelteKit, in Remix, in Astro or
even a plain old HTML/CSS website! When the user clicks the button, the
action="/twitter/tweet-queue" method="post" on the form element means the browser will send a
POST HTTP request to
/twitter/tweet-queue (this exact route).
POST function in the handler above will then take care
of it. Are you not entertained 😅
🙌🏽 Getting Started with Deno Fresh: Wrapping Up #
We’re only just getting started! However, so the post doesn’t get too long, in a follow-up we will see:
- how Deno Fresh Islands work,
- Deno’s inbuilt testing framework,
- creating API Routes and a whole lot more!
The journey so far… we have taken a quick look at getting started with Deno Fresh. In particular, we saw:
- how create a new Deno Fresh app,
- some useful Deno standard library functions,
- how to pass data into a client React page.
Check out the Fresh docs for further details. Get in touch if you would like to see more content on Deno and Fresh. I hope you found the content useful and am keen to hear about possible improvements.
🏁 Getting Started with Deno Fresh: Summary #
Does Deno Fresh work with Svelte? #
- Currently Deno Fresh only supports Preact. Preact uses the React APIs but it highly optimised, so if your reason for preferring Svelte is speed, give Deno Fresh a try anyway. Deno uses web standards so is quick to pick up. Especially for content sites, you should see a massive speed pickup from partial hydration.
Which serverless database services are a good match for Deno? #
- Deno deploys to a serverless environment. For caching, a service like Upstash Redis is a fantastic choice as it is quick to integrate. Also consider Fauna for object storage, though in reality any modern database service designed for serverless applications will fit.
What `batteries` are included with Deno? #
- Deno is a batteries included runtime. By that we mean there is a plethora of tooling included. This can save you time and let you get going on the actual coding phase of your project much quicker. You will not need to set up Prettier, ESLint, TypeScript or Jest. That is because Deno has in-built tooling for handling all of the tasks those are designed for. On top, there is even a benchmarking utility. As well as benchmarking, we have `deno fmt` to format your code, `deno lint` to spot those errors ESLint handles in node. Finally, there is no `tsconfig.json` file: Deno comes with sensibl defaults baked in.
🙏🏽 Getting Started with Deno Fresh: Feedback #
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.
Just dropped a new post on getting started with 🦖 Deno Fresh...— Rodney (@askRodney) January 6, 2023
🍋 Deno Fresh:
- builds fast SSR sites,
- lets you use the platform,
- deploys instantly with no build step for marvellous DX
Have a read, hope you find it useful!
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, @[email protected] on Mastodon and also the #rodney Element Matrix room. Also, see further ways to get in touch with Rodney Lab. I post regularly on Astro as well as Deno. Also, subscribe to the newsletter to keep up-to-date with our latest projects.