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.
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.
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.