DEV Community

loading...

Use import maps in Deno with VSCode and Denon

roelandmoors profile image Roeland Originally published at roeland.moors.org ・2 min read

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:

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),
  });
}
Enter fullscreen mode Exit fullscreen mode

pages/home.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>
  );
}
Enter fullscreen mode Exit fullscreen mode

components/layout.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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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

tsconfig.json:

{
    "compilerOptions": {
        "jsx": "react"
    }
}
Enter fullscreen mode Exit fullscreen mode

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.

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

Here is my config:

{
  "$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",
      ]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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:

{
    "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/"
    }
}
Enter fullscreen mode Exit fullscreen mode

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

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

import { serve } from "deno/http/server.ts";
import  ReactDOMServer from "reactdom";
import home from "/pages/home.jsx"
Enter fullscreen mode Exit fullscreen mode

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.

{
    "deno.enable": true,
    "deno.lint": true,
    "deno.unstable": false,
    "deno.importMap": "./importmap.json",
    "deno.config": "./tsconfig.json"
}
Enter fullscreen mode Exit fullscreen mode

The complete code examples can be found on Github

Discussion (0)

pic
Editor guide