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:


import { serve } from "";
import  ReactDOMServer from "";
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) {
    status: 200,
    headers: headers,
    body: render(home),


import React from "";
import Layout from "../components/layout.jsx";

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


import React from "";

export default function ({ children, title }) {
  return (

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


    "compilerOptions": {
        "jsx": "react"

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


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": "",
  "scripts": {
    "start": {
      "cmd": "deno run main.js",
      "desc": "start server",
      "tsconfig": "tsconfig.json",
      "importmap": "importmap.json",
      "allow": [

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": "",
        "reactdom": "",
        "deno/": ""

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"


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"

The complete code examples can be found on Github