Setting Up Your Development Environment

Before diving into coding, we need to set up a proper development environment. This ensures that all tools work together smoothly and helps maintain consistency across the frontend and backend portions of our application.

Prerequisites

Before we begin, make sure you have the following installed:

• Node.js and npm: We'll be using Node.js v16 or newer
• Git: For version control
• Code Editor: VS Code is recommended for this guide
• MongoDB: For our database (local or Atlas cloud version)

Project Structure

We'll be creating a monorepo structure to manage both frontend and backend code in a single repository:

fullstack-js-app/
├── client/           # React frontend
├── server/           # Node.js backend
├── package.json      # Root package.json for project-wide scripts
└── README.md         # Project documentation

Initial Setup

1. Create the Project Directory

mkdir fullstack-js-app
cd fullstack-js-app

2. Initialize Git

git init

3. Create a Root package.json

npm init -y

Edit the package.json to add the following scripts:

{
  "name": "fullstack-js-app",
  "version": "1.0.0",
  "description": "A full-stack JavaScript application",
  "main": "index.js",
  "scripts": {
    "client": "cd client && npm start",
    "server": "cd server && npm run dev",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "install-all": "npm install && cd client && npm install && cd ../server && npm install"
  },
  "keywords": ["javascript", "react", "node", "express", "mongodb"],
  "author": "Your Name",
  "license": "MIT",
  "devDependencies": {
    "concurrently": "^7.6.0"
  }
}

Install the concurrently package:

npm install

Setting Up the Frontend (React)

1. Create React App

npx create-react-app client

2. Install Essential Frontend Dependencies

cd client
npm install axios react-router-dom @mui/material @mui/icons-material @emotion/react @emotion/styled

3. Create a Basic .env File

Create a .env file in the client directory:

REACT_APP_API_URL=http://localhost:5000/api

Setting Up the Backend (Node.js/Express)

1. Create the Server Directory

cd ..
mkdir server
cd server
npm init -y

2. Install Essential Backend Dependencies

npm install express mongoose dotenv cors jsonwebtoken bcryptjs express-validator morgan helmet
npm install --save-dev nodemon

3. Create a Basic .env File

Create a .env file in the server directory:

PORT=5000
MONGO_URI=mongodb://localhost:27017/fullstack-app
JWT_SECRET=your_jwt_secret_key
NODE_ENV=development

4. Configure package.json for the Server

Edit the server's package.json:

{
  "name": "server",
  "version": "1.0.0",
  "description": "Backend for fullstack JavaScript application",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js"
  },
  "keywords": ["api", "node", "express", "mongodb"],
  "author": "Your Name",
  "license": "MIT",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "express-validator": "^6.14.3",
    "helmet": "^6.0.1",
    "jsonwebtoken": "^9.0.0",
    "mongoose": "^6.9.1",
    "morgan": "^1.10.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.20"
  }
}

Create a Basic Server Setup

Create a basic index.js file in the server directory:

const express = require("express");
const cors = require("cors");
const dotenv = require("dotenv");
const mongoose = require("mongoose");
const helmet = require("helmet");
const morgan = require("morgan");

// Load environment variables
dotenv.config();

// Initialize Express app
const app = express();

// Middlewares
app.use(cors());
app.use(express.json());
app.use(helmet());
app.use(morgan("dev"));

// Routes (placeholder for now)
app.get("/api", (req, res) => {
  res.json({ message: "API is working!" });
});

// Connect to MongoDB
mongoose
  .connect(process.env.MONGO_URI)
  .then(() => console.log("Connected to MongoDB"))
  .catch((err) => console.error("Could not connect to MongoDB:", err));

// Start server
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Testing Your Setup

Let's ensure everything is working:

1. Start the backend server:

cd server
npm run dev

You should see "Server running on port 5000" and "Connected to MongoDB" messages.

2. In a new terminal, start the React frontend:

cd client
npm start

Your browser should open automatically to display the React app.

3. Test the API connection by visiting http://localhost:5000/api in your browser. You should see the message: {"message":"API is working!"}

Version Control

Finally, create a .gitignore file in the root directory:

# dependencies
node_modules/
/.pnp
.pnp.js

# testing
/coverage

# production
/build
/dist

# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

Commit your initial setup:

git add .
git commit -m "Initial project setup"

In the next part, we'll design and implement the MongoDB database schema for our application.