https://github.com/datvt243/nodejs-api-boilerplate
Ứng dụng nodejs (khung) xây dựng sẵn (basic)
https://github.com/datvt243/nodejs-api-boilerplate
express nodejs prettier-eslint tailwindcss typescript
Last synced: 5 months ago
JSON representation
Ứng dụng nodejs (khung) xây dựng sẵn (basic)
- Host: GitHub
- URL: https://github.com/datvt243/nodejs-api-boilerplate
- Owner: datvt243
- Created: 2024-08-24T04:21:49.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-10-29T12:32:11.000Z (7 months ago)
- Last Synced: 2024-11-15T20:52:00.307Z (6 months ago)
- Topics: express, nodejs, prettier-eslint, tailwindcss, typescript
- Language: CSS
- Homepage:
- Size: 35.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Source code Nodejs - Boilerplate
- Express
- Typescript
- [Pugjs](https://pugjs.org/api/getting-started.html) (Template engine)
- Tailwindcss
- Prettier & Eslint
## scripts
```
npm start :: chạy app env production
npm run build :: build code src/*.ts -> dist/*.js
npm run dev :: chạy code env development
npm run prettier :: check lỗi prettier
npm run prettier:fix :: fix lỗi prettier
npm run lint :: check lỗi eslint
npm run lint:fix :: fix lỗi eslint
npm run tail:build :: build file css
npm run pug:format :: format file pug
```
- Trước khi chạy `npm start` cần chạy build (ra folder `dist`) trước.
# Cấu trúc thư mục
- dist: folder build
- src: source
- assets: folder chứa các file css, js ...
- constants: chứa các files khai báo hằng số (const)
- database: file kết nối CSDL
- enviroments: file môi trường từ .env
- libs: folder chứa các file từ thư viện khác
- middlewares: các file xử lý middlewares
- public: chứa các file image, pdf ...
- routers: chứa các file khai náo router
- types: khai báo Typescript (type, interface ...)
- utils: khai báo các file chứa các hàm tiện ích
- views: chứa các file template (dùng Pugjs)
- server.js:
# Cài đặt Typescript - devDependencies
- `typescript`
- `@types/node`
# Cài đặt ESLint
`npm init @eslint/config@latest`
## Cài đặt các package config cần thiết còn lại
- `prettier`: Code formatter chính
- `eslint-config-prettier`: Cấu hình ESLint để không bị xung đột với Prettier
- `eslint-plugin-prettier`: Dùng thêm một số rule prettier cho eslint
- `tsx`: Dùng để chạy TypeScript code trực tiếp mà không cần build
- `tsc-alias`: Xử lý alias khi build
- `rimraf`: Dùng để xóa folder dist khi trước khi build
- `nodemon`: Dùng để tự động restart server khi có sự thay đổi trong code
# Cấu hình
## Cấu hình file tsconfig.json
Tạo file `tsconfig.json` tại thư mục root
Copy nội dung bên dưới vào file `tsconfig`
```
{
"compilerOptions": {
"module": "NodeNext", // Quy định output module được sử dụng
"moduleResolution": "NodeNext",
"target": "ES2023", // Target output cho code
"outDir": "dist", // Đường dẫn output cho thư mục build
"esModuleInterop": true,
"strict": true /* Enable all strict type-checking options. */,
"skipLibCheck": true /* Skip type checking all .d.ts files. */,
"baseUrl": ".", // Đường dẫn base cho các import
"paths": {
"~/*": ["src/*"] // Đường dẫn tương đối cho các import (alias)
}
},
"files": ["src/type.d.ts"], // Các file dùng để defined global type cho dự án
"include": ["src/**/*"] // Đường dẫn include cho các file cần build
}
```
## Cấu hình file config cho Eslint
Mở file `eslint.config.mjs` lên và thêm nội dung dưới đây
nhớ cài extension ESLint cho VS Code để nó hiểu được file này
```
import eslintPluginPrettier from 'eslint-plugin-prettier'
```
```
{
plugins: {
prettier: eslintPluginPrettier
},
rules: {
'@typescript-eslint/no-explicit-any': 'warn',
'@typescript-eslint/no-unused-vars': 'warn',
'prettier/prettier': [
'warn',
{
arrowParens: 'always',
semi: false,
trailingComma: 'none',
tabWidth: 2,
endOfLine: 'auto',
useTabs: false,
singleQuote: true,
printWidth: 120,
jsxSingleQuote: true
}
]
},
ignores: ['**/node_modules/', '**/dist/']
}
```
## Cấu hình file config cho Prettier
Tạo file `.prettierrc` trong thư trong thư mục root với nội dung dưới đây
```
{
"arrowParens": "always",
"semi": false,
"trailingComma": "none",
"tabWidth": 2,
"endOfLine": "auto",
"useTabs": false,
"singleQuote": true,
"printWidth": 120,
"jsxSingleQuote": true,
"jsxBracketSameLine": false,
"bracketSameLine": false,
"bracketSpacing": true,
"embeddedLanguageFormatting": "auto",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"vueIndentScriptAndStyle": false,
"singleAttributePerLine": false,
"plugins": ["@prettier/plugin-pug"]
}
```
Tiếp theo Tạo file `.prettierignore` ở thư mục root, mục đích là bỏ qua các file không cần thiết
```
node_modules/
dist/
```
## Config editor để chuẩn hóa cấu hình editor
Tạo file `.editorconfig` ở thư mục root
Mục đích là cấu hình các config đồng bộ các editor với nhau nếu dự án có nhiều người tham gia.
```
[*]
indent_size = 2
indent_style = space
```
## Cấu hình file nodemon.json
Tạo file `nodemon.json` ở thư mục root
Mục đích là cấu hình nodemon để tự động restart server khi có sự thay đổi trong codeblockock
```
{
"watch": ["src", ".env"],
"ext": ".ts,.js",
"ignore": [],
"exec": "tsx ./src/index.ts"
}
```
## Cấu hình file package.json
```
"scripts": {
"dev": "NODE_ENV=development npx nodemon",
"build": "rimraf ./dist && tsc && tsc-alias && npm run copy",
"start": "NODE_ENV=production node ./dist/server.js",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"prettier": "prettier --check .",
"prettier:fix": "prettier --write .",
"tail:build": "npx tailwindcss -i ./src/assets/tailwindcss.css -o ./src/public/css/tailwindcss.css --watch",
"pug:format": "npx prettier --write \"src/views/**/*.pug\" --plugin=\"@prettier/plugin-pug\"",
"copy": "cp -R ./src/views ./src/assets ./src/public ./dist/"
}
```
# Tạo file type.d.ts
Tạo file `type.d.ts` trong thư mục `src`, tạm thời bây giờ để trống. Mục đích là để defined các global type cho dự án.
Mở file `tsconfig.json` lên sẽ thấy dòng được add file này vào để cho typescript nó nhận diện
# Cài đặt template engine (Pugjs)
template engine sử dụng [Pugjs](https://pugjs.org/api/getting-started.html) (Template engine)
```
pug pug-cli
```
- `"@prettier/plugin-pug"`: plugin dành cho Prettier, công cụ định dạng mã tự động, giúp bạn định dạng các file Pug (trước đây được gọi là Jade), một ngôn ngữ template dùng để tạo HTML.
Khi build chỉ build các file `ts, js`. Folder `views`,`assets`, `public` không được build sang dist. Cần sao chép thủ công
`cp -R ./src/views ./src/assets ./src/public ./dist/`
# Cài đặt tailwindcss
Cài đặt tailwindcss và các package
`npm install -D tailwindcss postcss autoprefixer`
Tạo file cầu hình `npx tailwindcss init -p`
- `tailwind.config.js`
```
/** @type {import('tailwindcss').Config} */
export default {
darkMode: 'selector',
content: ['./src/**/*.{html,js,ts,tsx}', './src/views/**/*.pug'],
theme: {
extend: {}
},
plugins: []
}
```
Tạo file css `./src/assets/tailwindcss.css` với nội dung sau
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Chạy lệnh biên dịch
`"tail:build": "npx tailwindcss -i ./src/assets/tailwindcss.css -o ./src/public/css/tailwindcss.css --watch",
`