React templates - Deno
Tags: deno, react, javascript, webdev
Published: 2021-05-31 10:23:08

## Deno template

Here I use [Deno](https://michaelcurrin.github.io/dev-resources/resources/javascript/deno/), which is a new alternative to Node.

{% github MichaelCurrin/react-deno-quickstart %}

No need for Node here. 

No need for NPM to manage packages.

No need to install additional packages to handle JSX, TypeScript, linting, formatting or bundling. Deno can do it all. 💪 🚀


## Imports

As with the Frontend approach in the previous post, you can do imports by URL in Deno. 

```javascript
import React from "https://dev.jspm.io/react@17.0";
import ReactDOM from "https://dev.jspm.io/react-dom@17.0";
```

You don't even need an `install` command - Deno will download the packages when a script is run and then cache them for repeat runs.

How do you avoid duplicating a long URL all over your app and avoid inconsistent versions numbers - like `17.0.1` in one file and `17.0.2` in another? You can **centralize** your dependencies. The convention in the Deno community is to use a `deps.ts` module (by the way, _import maps_ are also possible).

e.g. `deps.ts`

```typescript
export { default as React } from "https://dev.jspm.io/react@17.0.1";
export { default as ReactDOM } from "https://dev.jspm.io/react-dom@17.0.1";
```

Now that you have say `React` loaded by URL and exported, you can import it in another script with a short local module path.

e.g. `index.tsx`

```typescript
import { React, ReactDOM } from "../deps.ts";
```


## Start dev server

Assuming you have `make` installed, you can run commands defined in the project's `Makefile`. This is my preferred way of replacing the `scripts` section of `package.json`, but also works great for Go, Python, Rust, etc.

Run this command:

```sh
$ make server
```

This task will do two things:

- Prepare the assets and create a bundled JS file with Deno, updating it continuously on any changes.
- Start a dev server with Deno, serving the `build` output directory.

That uses the Deno CLI internally, to run two commands like this in parallel.

```sh
$ deno bundle --watch src/index.jsx build/bundle.js
$ deno run --allow-net --allow-read static.ts
```

Deno requires you to be explicit with permissions like read, write and network access. So using `make` CLI and a `Makefile` is a great way to abstract away the verbose commands.


## CI


As with the Node template in this post series, GitHub Actions is used to build and deploy static content to be served with GitHub Pages. Instead of NPM, the Deno CLI is used - through the `make` commands.


## Who should use this template?

I'd recommend looking at my Deno template if you _already_ know Node but feel that package management, bundling, and other dev tooling are causing you anxiety and needs to be simplified.

Also, the Frontend template and this Deno template have similarities in managing packages by URL in scripts, so it is useful to have a look at those two projects side by side.


## Tell me more about Deno!

Deno is still in its early days (only in version 1) and it is controversial (some call it the "Node killer" and others think not so much). 

So I'm not going to go into the details of Deno here. 

Yes, it does add convenience, but, it also has its learning curve and its own way of doing things, and it is unstable (some CLI commands require use of `--unstable` so that they work). 

Though, the Deno homepage and the blog posts out there do a good job explaining its purpose and some pros and cons. But make sure you balance a variety of opinions before making a judgment. And keep your opinion open to change based on more info and your own experience.