Vite and Deno

Vite is next generation frontend tooling. It have many options template to choose, one of them is TypeScript.

Deno is new runtime for javascript and typescript. It have many features that nodejs does not have. Deno is secure by default, supports typescript out of the box, and has a set of built-in utilities.

Reactjs is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

Deno and vite are the best tools for frontend development. Deno support typescript out of the box and vite is next generation frontend tooling. This could be a good combination for frontend development.

Because of new technology, I found some problem when I try to run Vite React TypeScript with Deno. I will show you how to solve this problem in this article.

Prerequisites

Vite guide does not have template for deno. But, I found Extra vite template by bluwy. This template have deno option.

Create Vite React Typescript App using Deno

We will run Extra vite template by bluwy using deno option.

deno run -A npm:create-vite-extra --template deno-react-ts

Follow the instruction and you will get the Vite React TypeScript with Deno.

# Run the app
$ deno task dev

# Run the build
$ deno task build

I recommend to use deno_vscode extention to get better experience in vscode.

Press Command+Shift+P and type Deno: Initialize Workspace Configuration to create .vscode/settings.json file. This file will help vscode to identify type and cache the dependencies

Problem

When we open this project and initialize deno workspace configuration plugin, There is problem with this template. Vscode show error typescript in whole file *.tsx, this makes development experience not good. This problem cause by no node_modules folder inside the project.

alt text

We need to identify what the problem is:

Deno dependencies not recognized by vscode
JSX not recognized by vscode
React not recognized by vscode

Solution

Add these property to deno.json file to make vscode recognize the dependencies.

{
  ...
  "nodeModulesDir": true,
  "imports": {
    "react": "npm:react@^18.2.0",
    "react-dom": "npm:react-dom@^18.2.0"
  },
  ...
}

After that, add configuration compilerOptions (same with tsconfig.json in node environment) in file deno.json too to fix the JSX error.

{
  ...
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "jsx": "react-jsx",
    "jsxFactory": "React.createElement",
    "jsxFragmentFactory": "React.Fragment",
    "jsxImportSource": "https://esm.sh/preact"
  }
  ...
}

I use "jsxImportSource": "https://esm.sh/preact" because I read article Configurating JSX in Deno and try each of them. This configuration is the best for me.

And now, the error is gone. The vscode recognize the dependencies and the JSX.

Screenshot vscode clean

Here is the complete version of deno.json

{
  "tasks": {
    "dev": "deno run -A --node-modules-dir npm:vite",
    "build": "deno run -A --node-modules-dir npm:vite build",
    "preview": "deno run -A --node-modules-dir npm:vite preview",
    "serve": "deno run --allow-net --allow-read https://deno.land/[email protected]/http/file_server.ts dist/"
  },
  "nodeModulesDir": true,
  "imports": {
    "react": "npm:react@^18.2.0",
    "react-dom": "npm:react-dom@^18.2.0"
  },
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "jsx": "react-jsx",
    "jsxFactory": "React.createElement",
    "jsxFragmentFactory": "React.Fragment",
    "jsxImportSource": "https://esm.sh/preact"
  }
}

Alternative Solution

Use esm to import react and react-dom

Changing imports in deno.json to use esm instead of npm. esm incldue the type of the dependencies instead of npm. In other hand, react-dom only use client package, so we can use react-dom/client instead of react-dom.

{
  ...
  "imports": {
    "react": "https://esm.sh/[email protected]",
    "react-dom/client": "https://esm.sh/[email protected]/client"
  },
  "compilerOptions": {
    "target": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "jsx": "react-jsx",
    "jsxFactory": "React.createElement",
    "jsxFragmentFactory": "React.Fragment",
    "types": [
      "@types/react"
    ]
  }
}

By using esm, we can import react and react-dom from the internet that include the type also. This should be the best solution for this problem.

Conclusion

In this article, I show you how to run Vite React TypeScript with Deno. I hope this article can help you to start your project with Vite React TypeScript with Deno. If you have any question, feel free to ask me in email. Thank you for reading.

Running Vite React TypeScript with Deno