npx create-react-app myweb still runs, but it no longer produces a working React + TypeScript project — see this issue. Next.js and Gatsby are often overkill for a plain SPA, and Vite has its own known memory issue that rarely matters in practice. Vite is still the best default for a React + TypeScript SPA — here's the setup.

Step 1: Initialize the project

npm create vite@latest

Using this command if you want to initialize the project at the current directory npm create vite@latest .

✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

SWC is 20x faster than Babel on a single thread and 70x faster on four cores. From its website

Step 2: Setup prettier and eslint

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

Add vite.config.ts to ignores section of eslint.config.js:

export default tseslint.config(
  { ignores: ['dist', 'vite.config.ts'] },
  {
...

Import eslint-plugin-prettier in eslint.config.js, then add it into the plugins list of eslint.

import eslintPluginPrettier from 'eslint-plugin-prettier'

export default tseslint.config(
  ...
  plugins: {
    'react-hooks': reactHooks,
    'react-refresh': reactRefresh,
    'prettier': eslintPluginPrettier,
  },
  ...

Now setup rule for Prettier by adding this to rules list of eslint.config.js

'prettier/prettier': [
  'warn',
  {
    arrowParens: 'always',
    semi: false,
    trailingComma: 'none',
    tabWidth: 2,
    endOfLine: 'auto',
    useTabs: false,
    singleQuote: true,
    printWidth: 120,
    jsxSingleQuote: true
  }
]

Add .prettierrc with this content:

{
  "arrowParens": "always",
  "semi": false,
  "trailingComma": "none",
  "tabWidth": 2,
  "endOfLine": "auto",
  "useTabs": false,
  "singleQuote": true,
  "printWidth": 120,
  "jsxSingleQuote": true
}

Step 3: Configure Visual Studio Code

Install following extensions:

• Prettier - Code formatter
• Eslint
• Jest
• ES7+ React/Redux/React-Native snippets

Add following to settings.json

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always"
},
"[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"files.associations": {
    "*.css": "tailwindcss"
}

Step 4: Optional steps

Mapping @/* to src/* so you can use import '@/shared/Header' instead of import '../../shared/Header', by adding compilerOptions in tsconfig.json:

{
  "files": [],
  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

We also need to tell vite about this mapping, by adding alias in vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

Add utility scripts for CI/CD by adding this inside scripts tag of package.json

"scripts": {
  ...
  "lint:fix": "eslint . --fix",
  "prettier": "prettier --check \"src/**/(*.tsx|*.ts|*.css|*.scss)\"",
  "prettier:fix": "prettier --write \"src/**/(*.tsx|*.ts|*.css|*.scss)\""
}

Step 5: Add tailwindcss

Just follow this: https://tailwindcss.com/docs/guides/vite

That's it, to start development: npm run dev