Mern Installation Process

Node.js and React Project Setup Guide

Welcome to the Node.js and React setup guide. This guide will walk you through the critical steps necessary to set up and deploy a Node.js backend and React frontend application within your environment. Node.js is a JavaScript runtime environment built on Chrome's V8 JavaScript engine, and React is a popular JavaScript library for building user interfaces.

Requirements

  • A Node.js version compatible with 14.x or later
  • npm (Node Package Manager), which is included with Node.js
  • Proper permissions for important folders
  • A code editor (e.g., Visual Studio Code, Sublime Text)

Step 1: Install Node.js and npm

  1. Download Node.js:
    • Open your web browser and go to the official Node.js website: https://nodejs.org.
    • Select the version appropriate for your needs (LTS version for most users).
    • Click the download button for your operating system (Windows, macOS, or Linux).
  2. Run the Installer:
    • Find the downloaded file in your Downloads folder.
    • Double-click the installation file to execute.
    • Proceed with the installation instructions, taking the default options or adjusting as desired.
  3. Verify the Installation:
    • Launch a terminal or command prompt.
    • Execute the following command to verify the installed version of Node.js: node -v
    • Type the following command to check the installed version of npm: npm -v

Step 2: Initialize a Node.js Project

  1. Create a Project Directory:
    • Start by making a directory for your project and then get into it via the terminal or command prompt.
  2. Initialize the Project:
    • Execute the following command to generate a package.json file: npm init
    • This file will manage your project's dependencies and scripts.

Step 3: Install Express

  1. Install Express:
    • Express is a minimal and flexible Node.js web application framework. Install it using npm: npm install express
  2. Create an Express App:
    • Create a file named index.js in your project directory.
    • Add the following code to set up a basic Express server:
                const express = require('express');
            const app = express();
            const port = 5000;
            app.get('/', (req, res) => {
                res.send('Hello World!');
            });
            app.listen(port, () => {
                console.log(`Server running at http://localhost:${port}`);
            });
  3. Run the Express App:
    • Start your server by running the following command: node index.js
    • Open your web browser and navigate to http://localhost:3000 to see your Express app in action.

Step 4: Install Additional Packages

  1. Install Additional Packages:
    • Depending on your project requirements, install the necessary packages. For your project, you will need the following packages: npm install bcrypt body-parser cors csv-parser express-session firebase-admin jsonwebtoken mongoose multer
  2. Environment Variables:
    • Use environment variables to manage configuration settings. Create a .env file in your project root and add your configuration settings.
    • Install the dotenv package to load environment variables from the .env file: npm install dotenv
    • Require and configure dotenv in your application: require('dotenv').config();

Step 5: Development Tools

  1. Install Development Tools:
    • Use tools like nodemon to automatically restart your server during development: npm install nodemon
    • Add a script in your package.json to run your application with nodemon:
                "scripts": {
                "start": "node app.js",
                "dev": "nodemon app.js"
            }
  2. Run the Development Server:
    • Start your development server using the following command: npm run dev

Step 6: React Project Setup

Welcome to the React setup guide. This guide will guide you through the basic steps to set up and deploy a React application in your environment. React is a well-known JavaScript library for creating user interfaces, especially single-page applications where you want a fast, scalable, and easy front-end.

Requirements

  • Node.js (version 14.x or higher)
  • npm (Node Package Manager, installed with Node.js)
  • A code editor (e.g., Visual Studio Code, Sublime Text)

Step 1: Install Create React App

  1. Install Create React App:
    • Create React App is an officially supported method to create single-page React applications. You can use it to initialize a new React project without installing it globally: npm create vite@latest my-vite-app
  2. Navigate to your project directory:
    • Navigate to your project directory: cd my-vite-app
  3. Start the Development Server:
    • Run the following command to start the development server: npm run dev
    • This will start the development server and open your new React app in your default web browser. If it doesn't open automatically, you can navigate to http://localhost:3000.

Step 7: Project Structure

  1. Understand the Project Structure:
    • The project structure created by Create React App includes:
    • node_modules/: Contains all the npm packages.
    • public/: Contains static files like HTML and images.
    • src/: Contains the source code of your React application.
    • package.json: Contains the project configuration and dependencies.

Step 8: Install Additional Packages for React (optional )

  1. Install Additional Packages:
    • Depending on your project requirements, you might need additional packages. For example, to manage state, you might need redux or react-router for routing. Install them as needed: npm install redux react-redux react-router-dom

Step 9: Development and Testing

  1. Develop Your Application:
    • Start developing your React components and features. Use the src/ directory to add your components, styles, and other assets.
  2. Write Tests:
    • Write tests for your application using testing frameworks like Jest or React Testing Library.
    • Use assertion libraries like Chai for more expressive tests.
  3. Run Tests:
    • Run your tests to ensure your application is working as expected: npm test

Step 10: Build and Deploy

  1. Build Your Application:
    • When you are ready to deploy your application, create an optimized build: npm run build
    • This will create a build/ directory with all the static files ready for deployment.
  2. Deploy Your Application:
    • You can deploy your React app to various platforms like Vercel, Netlify, or GitHub Pages. Follow the specific deployment guides for your chosen platform.

Download & Install MongoDB Compass (GUI for MongoDB)

  1. Step 1: Go to Compass Website
    • Open: https://www.mongodb.com/try/download/compass
  2. Step 2: Select Version & OS
    • Choose:
    • Version: Latest
    • Platform: Windows/macOS/Linux
    • Package: .exe for Windows
    • Then hit Download.
  3. Step 3: Install Compass
    • Run the exe file
    • Click "Next" and install like any regular software
  4. Step 4: Sign Up or Log In
    • Go to https://www.mongodb.com/cloud/atlas
    • Click Try Free and sign up using:
    • Email or
    • Google GitHub account
    • Sign with Google
  5. Step 5: Create New Project
    • Click New Project
    • Give it a name like QuizzopDB
  6. Step 6: Build a Cluster
    • Select "Create" -> Build a Database
    • Choose Shared (Free)
    • Pick cloud provider (AWS, GCP, or Azure) - default is fine
    • Pick a region (choose closest to you, e.g., Mumbai if you're in India)
  7. Step 7: Name Cluster & Create
    • Keep default or rename (e.g., Cluster0)
    • Click Create Cluster
  8. Step 8: Create a Database User
    • Click Database Access -> Add New User
    • Username: admin
    • Password: yourSecurePassword
    • Role: Read and write to any database
  9. Step 9: Allow Access from Anywhere (IP Whitelist)
    • Go to Network Access -> Add IP Address
    • Choose: Allow access from anywhere (0.0.0.0/0)
  10. Step 10: Connect Using Compass
    • Click Connect -> Choose MongoDB Compass
    • Copy the Connection String (something like mongodb+srv://...)
    • Open Compass -> Paste in connection string -> Hit Connect

Set Up Firebase Project

  1. Step 1: Go to Firebase Console
    • https://console.firebase.google.com
    • Click "Add Project"
  2. Step 2: Enter Project Name
    • Name it like: app-name
    • Disable Google Analytics for now (unless needed)
    • Click Create Project
  3. Step 3: Register / Add Web App
    • In the dashboard, click the </> Web icon
    • Register app name (e.g., app-name)
    • Click Register App
  4. Step 4: Copy Firebase Config
    • You'll get a config object like:
                const firebaseConfig = {
                apiKey: "AlzaSyXXXXXX",
                authDomain: "quizzop-app.firebaseapp.com",
                projectId: "quizzop-app",
                storageBucket: "quizzop-app.appspot.com",
                messagingSenderId: "1234567890",
                appId: "1:1234567890:web:abcdefg",
            };
    • You'll need this in your React/JS project.
  5. Step 5: Go to Auth Tab
    • In left sidebar -> Build > Authentication
    • Click Get Started
  6. Step 7: Enable Email/Password Auth
    • Click Email/Password -> Enable -> Save
  7. Step 8: Enable Google Sign-In
    • Click Google -> Enable
    • Add support email
    • Save
  8. Step 9: Install Firebase SDK
    • npm install firebase
  9. Step 10: Create Firebase File
    • // firebase.js
    • import { initializeApp } from "firebase/app";
    • import { getAuth, GoogleAuthProvider } from "firebase/auth";
                const firebaseConfig = {
                apiKey: "YOUR_API_KEY",
                authDomain: "YOUR_DOMAIN",
                projectId: "YOUR_PROJECT_ID",
                storageBucket: "YOUR_BUCKET",
                messagingSenderId: "YOUR_SENDER_ID",
                appId: "YOUR_APP_ID",
            };
            
            const app = initializeApp(firebaseConfig);
            const auth = getAuth(app);
            const googleProvider = new GoogleAuthProvider();
            export { auth, googleProvider };

Guide to Create Firebase Admin SDK

  1. Step 1: Create a Firebase Project
    • Visit the Firebase Console.
    • Click on "Add project" if you don't already have one.
    • Follow the on-screen instructions:
    • Enter your project name.
    • Decide whether to enable Google Analytics (optional).
    • Click "Create Project" and wait for it to finish provisioning.
    • Once complete, you'll be redirected to your Firebase project dashboard.
  2. Step 2: Generate a Firebase Admin SDK Service Account
    • In the Firebase Console, click the gear icon next to "Project Overview" in the left sidebar.
    • Select "Project Settings" from the dropdown.
    • Navigate to the "Service Accounts" tab at the top of the settings page.
    • Click the "Generate new private key" button.
    • A confirmation dialog will appear. Click "Generate key" to confirm.
    • A .json file containing your service account credentials will be automatically downloaded.

Important Notes

  • This JSON key file contains sensitive credentials and provides full administrative access to your Firebase project.
  • Do not commit this file to version control (e.g., GitHub).
  • Store it securely (e.g., in environment-protected directories or with secret management services like AWS Secrets Manager or dotenv files).

What's Inside the JSON File?

This JSON file typically contains the following keys: 

            {
                "type": "service_account",
                "project_id": "your-project-id",
                "private_key_id": "some_key_id",
                "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvQIBADAN...",
                "client_email": "firebase-adminsdk-xxxx@your-project-id.iam.gserviceaccount.com",
                "client_id": "some_id",
                ...
            }

You will use this file when initializing Firebase Admin SDK in backend environments such as Node.js or Express.

Sample Usage in Node.js

            const admin = require("firebase-admin");
            const serviceAccount = require("./path/to/your-firebase-adminsdk.json");
            admin.initializeApp({
                credential: admin.credential.cert(serviceAccount),
            });

Additional Setup Instructions for Administrators

Environment Variables

To run this application, you need to set up the following environment variables. Create a .env file in the root directory of your project and add the following variables: 

            MONGO_URI=your_mongodb_connection_string
            JWT_SECRET=your_secret_key
            PORT=your_port

Database Setup

  1. Install MongoDB:
    • Download and install MongoDB from MongoDB's official website.
    • Follow the installation instructions for your operating system.
    • Start the MongoDB service.

Running the Application

  1. Install Dependencies:
    • Navigate to the project directory and run the following command to install all dependencies: npm install
  2. Start the Backend:
    • Navigate to the backend directory and run: npm run dev
  3. Start the Frontend:
    • Navigate to the frontend directory and run: npm run dev

Troubleshooting

  • MongoDB Connection Error:
    • Ensure that MongoDB is running.
    • Verify that the MongoDB URI in the .env file is correct.

© 2025, Active vCard – An Intelligent Digital Business Card Solution, developed by Active IT Hub. All rights reserved.