Use import maps in Deno with VSCode and Denon
Tags: javascript, programming, deno, vscode
Published: 2021-04-09 14:10:13

In the [previous] post I talked about using JSX in Deno. 
Now I would like to use import maps to make the imports easier to manage.

Lets start with this example:

main.js:

```javascript
import { serve } from "https://deno.land/std@0.92.0/http/server.ts";
import  ReactDOMServer from "https://jspm.dev/react-dom@16.14.0/server";
import home from "./pages/home.jsx"

function render(jsx) {
  return "<!DOCTYPE html>" + ReactDOMServer.renderToString(jsx());
}

const server = serve({ port: 8000 });
const headers = new Headers();
headers.append("Content-Type", "text/html; charset=UTF-8");

for await (const req of server) {
  req.respond({
    status: 200,
    headers: headers,
    body: render(home),
  });
}
```

pages/home.jsx:

```jsx
import React from "https://jspm.dev/react@16.14.0";
import Layout from "../components/layout.jsx";

export default function () {
  return (
    <Layout title="Hello">
      <h1>Hello world</h1>
    </Layout>
  );
}
```

components/layout.jsx:

```jsx
import React from "https://jspm.dev/react@16.14.0";

export default function ({ children, title }) {
  return (
    <html>
      <head>
        <title>{title}</title>
      </head>
      <body>{children}</body>
    </html>
  );
}
```

I also added a tsconfig as an example, but you don't really need this here because this is the default.

tsconfig.json:

```json
{
    "compilerOptions": {
        "jsx": "react"
    }
}
```

This program can be started like this:  
`deno run --allow-net --config=tsconfig.json main.js`

## Denon

To avoid typing long commands each time, I started using Denon.
You can find installation instructions [here][denon].

This will get you an initial config:
`denon --init`

Here is my config:

```json
{
  "$schema": "https://deno.land/x/denon@2.4.7/schema.json",
  "scripts": {
    "start": {
      "cmd": "deno run main.js",
      "desc": "start server",
      "tsconfig": "tsconfig.json",
      "importmap": "importmap.json",
      "allow": [
        "net",
      ]
    }
  }
}
```

You can remove the importmap line for now.

Now you can use `denon start` to start. 
This will also watch your files and do a restart when needed.

## Import maps


Let's create an import map file named `importmap.json`:

```json
{
    "imports": {
        "/": "./",
        "react": "https://jspm.dev/react@16.14.0",
        "reactdom": "https://jspm.dev/react-dom@16.14.0/server",
        "deno/": "https://deno.land/std@0.92.0/"
    }
}
```

The line `"/": "./",` means that we can use absolute paths instead of relative paths.
You can find more information [here][importmaps]

The imports can now be rewritten like this in main.js:

```javascript
import { serve } from "deno/http/server.ts";
import  ReactDOMServer from "reactdom";
import home from "/pages/home.jsx"
```

## VSCode

If you use vscode and are getting errors, you may need to add some settings.
First make sure you have the Deno plugin and that you initialised the workspace.
You can initialise the workspace with the command `Deno: Initialise Workspace Configuration` in the Command Palette.

This will create a file `.vscode/settings.json`.
You can add the importMap and config to fix the errors.

```json
{
    "deno.enable": true,
    "deno.lint": true,
    "deno.unstable": false,
    "deno.importMap": "./importmap.json",
    "deno.config": "./tsconfig.json"
}
```

The complete code examples can be found on [Github]

[previous]:    https://dev.to/roelandmoors/generate-html-on-the-server-with-deno-and-jsx-429b
[denon]:	https://github.com/denosaurs/denon
[importmaps]:	https://deno.land/manual@v1.8.3/linking_to_external_code/import_maps
[Github]:	https://github.com/roelandmoors/roelandmoors.github.io/tree/main/code/20210409