#Step 1 : Initialize the project
CODE
mkdir my-project
cd my-project
npm init -y
#Step 2 : Install necessary packages
CODE
npm install express mongoose cors dotenv --save
npm install typescript @types/node @types/express --save-dev
npm install -D nodemon ts-node-dev eslint @eslint/js @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier
#Step 3 : Create a folder structure
CODE
`my-project
│ .env
│ .gitignore
│ eslint.config.mjs
│ tsconfig.json
├───dist
├───src
│ │ app.ts
│ │ server.ts
├───app
| |
│ └───config
│ index.ts`
#Step 4 : Initialize typescript
CODE
tsc --init
#Step 5 : Configure TypeScript
Modify tsconfig.json with this following settings
CODE
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"rootDir": "./src",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src"]
}
#Step 6 : Initialize eslint configuration
CODE
npx eslint --init
Answer following questions like this
CODE
How would you like to use ESLint?
--> To check syntax and find problems
What type of modules does your project use?
-->JavaScript modules (import/export) //(you can require syntax by selecting commonjs)
Which framework does your project use?
--> None of these
Does your project use TypeScript?
--> yes
Where does your code run?
--> node
Would you like to install them now?
--> yes
Which package manager do you want to use?
--> npm //(you can choose pnpm or yarn)
#Step 7 : Configure the eslint.config.mjs file
CODE
import typescriptEslint from "@typescript-eslint/eslint-plugin";
import globals from "globals";
import tsParser from "@typescript-eslint/parser";
import path from "node:path";
import { fileURLToPath } from "node:url";
import js from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
recommendedConfig: js.configs.recommended,
allConfig: js.configs.all,
});
export default [
{
ignores: ["**/node_modules", "**/dist"],
},
...compat.extends(
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"prettier"
),
{
plugins: {
"@typescript-eslint": typescriptEslint,
},
languageOptions: {
globals: {
...globals.node,
process: "readonly",
},
parser: tsParser,
ecmaVersion: "latest",
sourceType: "module",
},
rules: {
"no-unused-vars": "off",
"no-unused-expressions": "warn",
"prefer-const": "warn",
"no-console": "off",
"no-undef": "error",
semi: ["warn", "always"],
"@typescript-eslint/no-empty-object-type": "off",
"@typescript-eslint/no-unused-vars": "off",
},
},
];
#Step 8 : Setup Prettier
CODE
npm install --save-dev prettier
#Step 9 : Create .prettierrc file for better customization (optional)
Create .prettierrc configuration file and apply following settings
CODE
{
"singleQuote": true,
"trailingComma": "all",
"tabWidth": 2,
"semi": true
}
#Step 10 : Add scripts to package.json file
CODE
"main": "./dist/server.js",
"scripts": {
"build": "tsc",
"start:prod": "node ./dist/server.js",
"start:dev": "ts-node-dev --respawn --transpile-only ./src/server.ts",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"prettier": "prettier --ignore-path .gitignore --write \"./src/**/*.+(js|ts|json)\"",
"prettier:fix": "prettier --write src"
}
# Sample Files
app.ts
CODE
import express, {Application, Request, Response } from 'express';
const app : Application = express();
app.use(express.json());
app.get('/', (req: Request, res: Response) => {
res.send('Hello from setup file');
});
export default app;
server.ts
CODE
import mongoose from 'mongoose';
import app from './app';
import config from './config';
async function main() {
try {
await mongoose.connect(config.db_url as string);
app.listen(config.port, () => {
console.log(`Example app listening on port ${config.port}`);
});
} catch (err) {
console.log(err);
}
}
main();
index.ts
CODE
import dotenv from 'dotenv';
import path from 'path';
dotenv.config(
{
path : path.join(process.cwd(), ".env")
}
);
export default {
port: process.env.PORT,
db_url: process.env.DB_URL,
};
.env
CODE
PORT=5000
DB_URL=your_mongodb_connection_string
.gitignore
CODE
node_modules
.env
dist
# Step 11 : Run Scripts
CODE
npm run build # Build the project before deployment
npm run start:prod # Start the server for production
npm run start:dev # Start the server for development
npm run lint # Find ESLint errors
npm run lint:fix # Fix ESLint errors
npm run prettier # Find Prettier format errors
npm run prettier:fix # Fix Prettier format errors
Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
SOCIAL SHARE CARD GENERATOR