05. Setup project

Let’s setup project

“Nodejs version”

please use Nodejs LTS eg. 22

สร้าง Hono project

pnpm create hono@latest

แล้วก็เลือกตอบคำถามไปตามนี้

? Target directory .
? Which template do you want to use? nodejs
? Do you want to install project dependencies? yes
? Which package manager do you want to use? pnpm

Setup ESLint

Install

pnpm dlx @antfu/eslint-config@latest

pnpm add -D eslint-plugin-perfectionist

eslint.config.js

import antfu from "@antfu/eslint-config"
import perfectionist from "eslint-plugin-perfectionist"

export default antfu(
  {
    typescript: true,
    stylistic: {
      indent: 2,
      quotes: "double",
    },
  },
  {
    plugins: [
      perfectionist.configs["recommended-alphabetical"],
    ],
    rules: {
      "no-console": "warn",
      "perfectionist/sort-objects": "error",
      "unicorn/throw-new-error": "off",
      "unused-imports/no-unused-imports": "error",
    },
  },
  {
    rules: {
      "ts/consistent-type-definitions": "off",
    },
  },
)

Add lint script

package.json

pnpm pkg set \
'scripts.lint:fix=eslint --fix .' \
'scripts.lint=eslint .'

---

Set build script

เนื่องจากว่า Hono ไม่ได้ใส่ build script มาให้ เราก็เลยต้องมาทำเอง
ที่ Hono ไม่ได้ใส่มาให้ก็เพราะว่า Hono สามารถ เอาไป run ได้หลายที่ เขาก็ไม่รู้ว่าเราจะเอา app ไป run ที่ไหน

ในที่นี้ืเราจะเอา app ไป run บน Nodejs

install typescript

pnpm add -D typescript

config tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "ESNext",
    "module": "NodeNext",
    "strict": true,
    "verbatimModuleSyntax": true,
    "skipLibCheck": true,
    "types": [
      "node"
    ],
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx",
  },
  "exclude": [
    "node_modules"
  ]
}

config package.json script

package.json

pnpm pkg set \
'scripts.build=tsc'

"scripts": {
  "dev": "tsx watch src/index.ts",
   "build": "tsc"
},

add folder dist to .gitignore

.gitignore

# dev
.yarn/
!.yarn/releases
.vscode/*
!.vscode/launch.json
!.vscode/*.code-snippets
.idea/workspace.xml
.idea/usage.statistics.xml
.idea/shelf

# deps
node_modules/

# env
.env
.env.production

# logs
logs/
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

# misc
.DS_Store

 dist
 db-data
 dist

type-safe process.env

global.d.ts

interface Env {
  NODE_ENV: "development" | "production" | "test" | "uat"
}

declare global {
  namespace NodeJS {
    interface ProcessEnv extends Env {}
  }
}

export { };
export type IEnv = Env;

setup dotenv

install

pnpm add @dotenvx/dotenvx

config

index.ts

 import { config } from "@dotenvx/dotenvx"
 config()

const app = new Hono()