Fullstack MERN with TypeScript

.env

# Add your secrets here
CONNECTION_STRING=yes-here

guide.txt

npm init vite@latest
Välj React, TypeScript

cd mapp/
npm i react-router-dom zustand cors express joi
npm i --save-dev @types/express
git init

Skapa filerna: .env, tsconfig.backend.json
Skapa mapparna: backendSrc, backendDist

package.json

  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
	"backend": "tsc --project tsconfig.backend.json && node --env-file .env ./backendDist/server.js"
  },

tsconfig.backend.json

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": false,
	"outDir": "./backendDist/",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["backendSrc"]
}

vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
		proxy: {
			'/api': {
				target: 'http://localhost:1337/'
			}
		}
  }
})