Setup MERN app with TypeScript

This blog will guide you on how to setup your own mern app with typescript supported for better development experience. It also shows how to properly structure your backend folder for convention.

1. Create the Main Project Directory:

Replace the [project-name] with your actual project name.

mkdir [project-name]
cd [project-name]

2. Initialize the Root `package.json` File:

npm init -y

3. Create Directory for Backend:

mkdir backend

4. Set Up the Backend with Express and TypeScript:

4.1. Install the necessary backend dependencies:

cd backend
npm init -y
npm install express mongoose dotenv
npm install --save-dev typescript @types/node @types/express @types/mongoose ts-node

4.2. Initialize TypeScript configuration for the backend:

npx tsc --init

5. Set Up the Backend Folder Structure:

This is just a common convention used for backend folders.

mkdir src
mkdir src/controllers src/models src/routes
touch src/index.ts

6. Configure TypeScript for the Backend:

6.1. Edit `tsconfig.json` file to include:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist"
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

7. Create the Express Server File:

7.1. Edit src/index.ts:

import express from 'express'
import mongoose from 'mongoose'
import dotenv from 'dotenv'
 
dotenv.config()
 
const app = express()
const PORT = process.env.PORT || 5000
const MONGO_URI = process.env.MONGO_URI
 
app.use(express.json())
 
app.get('/', (req, res) => {
  res.send('Hello, MERN App with Next.js!')
})
 
const connectDB = async () => {
  try {
    if (!MONGO_URI) {
      throw new Error('The .env file doesnot have the mongo uri')
    }
    console.log('Connecting...')
    await mongoose.connect(MONGO_URI)
    console.log('Connected to the database')
  } catch (error) {
    console.log('Something went wrong while connecting to the database ', error)
    process.exit(1)
  }
}
 
connectDB()
  .then(() => {
    app.listen(PORT, () => console.log('Server connected at port:', PORT))
  })
  .catch((error) => console.log('Error ', error))

8. Create Environment Variables for the Backend:

8.1. Add your MongoDB URI and other environment variables:

touch .env

8.2. Add content to your `.env` file:

MONGO_URI=your-mongodb-uri
PORT=5000

9. Add Backend Start Script to `backend/package.json`:

9.1. Edit package.json in the backend directory:

{
  // others
  "scripts": {
    "start": "ts-node src/index.ts"
  }
  // others
}

10. Set Up the Frontend with React.js with Vite and TypeScript:

cd ..
npm create vite@latest frontend -- --template react-ts --swc
cd frontend
npm install

Ignore all the command suggestion in the terminal that comes after this.

11. Configure the Root `package.json` File:

11.1. Edit the root package.json:

{
  "name": "mern-app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev:backend": "cd backend && npm start",
    "dev:frontend": "cd frontend && npm run dev"
  }
}

12. Run the Application:

Now your application is ready and to run your application:

12.1. Navigate back to the root:

cd ..

12.2. Run Backend:

npm run dev:backend

12.3. Run Frontend:

npm run dev:frontend

13. Your Project Structure Should Look Like:

    mern-app/
    ├── backend/
    │   ├── src/
    │   │   ├── controllers/
    │   │   ├── models/
    │   │   ├── routes/
    │   │   └── index.ts
    │   ├── .env
    │   ├── package.json
    │   └── tsconfig.json
    ├── frontend/
    │   ├── public/
    │   ├── src/
    │   ├── tsconfig.json
    │   └── package.json
    ├── node_modules/
    ├── package.json
    └── README.md