MERN stands for MongoDB, Express, React, and Node.js.

• MongoDB : a NoSQL database used for faster dev.
• Express : a Node.js framework for building back-end API
• React : a front-end framework for UI dev.
• Node.js : an env. to run JS outside the browser

Creact CRA project

第十章 - CRA專案與Dynamic Style Injection

PS C:\\Users\\user\\OneDrive\\桌面\\mern> npx create-react-app client --template typescript

• delete the unnecessary file

Create api folder

perform operations on the api folder:

npm init -y
npm i express
npm i mongoose
npm i dotenv
npm i nodemon

create index.js file (not ts)

Edit package.json

{
  "name": "api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start": "nodemon index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^17.2.3",
    "express": "^5.2.1",
    "mongoose": "^9.0.2",
    "nodemon": "^3.1.11"
  }
}

MongoDB Atlas

go to mongodb/cloud/atlas/register register and sign in

1. Create the project “mern”

2. Create a user in Security Quickstart (remenber your password)

3. Set the address to 0.0.0.0 for localhost

4. Go to clusters/Browse Collections

5. click Create database

6. Create database

7. back to cluster / connect / drivers, copy the application code

Back-end

• add the file .env

MONGODB = mongodb+srv://hchen1029_db_user:[email protected]/Database_Name
appName=Cluster1