Step-by-Step Guide: Product Management System Using React.js, MySQL, and Node.js

Rashmi Mishra
personRashmi Mishra
November 22, 2024
0

"Step-by-Step Guide: 

Product Management System 

Using React.js, MySQL, and Node.js"


Project Objective

The Product Management System (PMS) aims to provide a digital platform for managing products efficiently, with functionalities such as adding, editing, deleting, and viewing product information. This project is suitable for businesses, e-commerce platforms, or inventory systems requiring a streamlined way to handle their product catalog.

The project leverages the MERN Stack (MySQL, Express.js, React.js, and Node.js) to create a full-stack application. It involves a user-friendly interface, a robust backend for handling operations, and a secure database for managing data.

Project Architecture

1.   Frontend:

o    Built using React.js to create a responsive and dynamic user interface.

o    Communicates with the backend using RESTful API endpoints.

o    Features form validation, product listing, and search/filter functionality.

2.   Backend:

o    Developed with Node.js and Express.js.

o    Provides RESTful APIs for CRUD operations.

o    Handles authentication and file/image uploads.

3.   Database:

o    MySQL database for storing product data.

o    Relational database schema ensures efficient data retrieval and management.

4.   Deployment: Here I use Axios dependency on my frontend.

Role of Axios in Deployment

  • Axios is a library used to make HTTP requests, typically from the frontend to the backend.
  • In the context of deployment:
    • The frontend (deployed on Netlify or Vercel) will use Axios to call backend APIs (deployed on Heroku or AWS).
    • Example:
      • Frontend React app makes an Axios request to the backend API (e.g., https://api.example.com/products).
      • The backend (deployed on Heroku) processes this request and responds with product data.

4. Integration Flow

1.   Frontend Deployment:

o    Build the React.js app using npm run build.

o    Deploy the build folder on Netlify or Vercel.

2.   Backend Deployment:

o    Deploy the Express.js backend to Heroku or AWS.

o    Ensure the backend's URL is accessible publicly (e.g., https://api.example.com).

3.   Communication:

o    Update Axios base URL in the frontend to point to the deployed backend (e.g., axios.defaults.baseURL = 'https://api.example.com';).

4.   Serving Static Assets:

o    If the backend also serves static files (e.g., images uploaded by users), configure Nginx or the hosting platform to serve them efficiently.

By combining these deployment tools and services, your application becomes accessible to users globally with optimal performance and scalability.

Detailed Features Of Project

1. User Authentication

  • Sign-Up:
    • Users can register with a valid email and password.
    • Passwords are encrypted using bcrypt to ensure security.
  • Login:
    • Authenticates users by comparing hashed passwords.
    • Generates a secure JWT token for session management.

2. Product Management

  • Add Product:
    • Form for admins to input product name, price, category, description, and upload an image.
    • Image files are handled using the multer middleware in Node.js.
  • Edit Product:
    • Allows modification of product details, including replacing uploaded images.
  • Delete Product:
    • Admins can remove products, with confirmation prompts to prevent accidental deletions.
  • View Product:
    • Displays a list of all products in a grid or table format.
    • Each product shows basic details such as name, price, and image.

3. Search and Filter

  • Users can search products by:
    • Name
    • Price range
    • Category
  • Real-time updates on the UI using React's state management.

4. Image Management

  • Product images are uploaded and stored on the database
  • Images are displayed dynamically in the product catalog.

5. Responsive Design

  • Built with Bootstrap or CSS to ensure a consistent look across devices (desktop, tablet, mobile).
  • React.js components are styled to adapt to screen sizes dynamically.

6. API Endpoints

  • POST /addProduct:
    • Adds a new product to the database.
  • GET /viewProducts:
    • Fetches a list of all products.
  • GET /viewProducts/:id:
    • Retrieves details of a single product.
  • PUT /editProduct/:id:
    • Updates the product information.
  • DELETE /deleteProduct/:id:
    • Deletes the specified product.

System Workflow

Frontend Workflow:

1.   Home Page:

o    Displays a list of products with options to view details or manage them.

2.   Admin Dashboard:

o    Accessible only after login.

o    Provides options to add, edit, or delete products.

3.   Forms:

o    Used for adding and editing products.

o    Validates inputs to ensure required fields are filled and formatted correctly.

Backend Workflow:

1.   Authentication:

o    Handles user login and verifies JWT tokens for secure access.

2.   CRUD Operations:

o    Each API endpoint interacts with the database using Sequelize ORM for MySQL.

3.   Error Handling:

o    Returns appropriate error codes (e.g., 400, 401, 404) for invalid requests or unauthorized actions.

Database Workflow:

1.   Tables:

o    users: Stores user information for authentication.

o    products: Stores product details such as name, price, description, and image URLs.

2.   Queries:

o    Optimized SQL queries handle fetching, updating, and deleting data efficiently.

Tech Stack

1.   Frontend:

o    React.js

o    CSS / Bootstrap

2.   Backend:

o    Node.js

o    Express.js

o    Multer (for file handling)

o    Cors

o    Path

o    Fs

o    Body-parsor

3.   Database:

o    MySQL with Sequelize ORM

4.   Authentication:

o    bcrypt (password hashing)

o    JWT (token-based authentication)

Possible Enhancements

1.   Inventory Management:

o    Add stock tracking features to monitor product availability.

2.   Category Management:

o    Enable admins to manage product categories.

3.   Reports:

o    Generate sales or inventory reports based on stored data.

4.   User Roles:

o    Introduce roles for admins and regular users with different permissions.

5.   API Documentation:

o    Use Swagger or similar tools for API documentation.

Conclusion

The Product Management System is a robust and scalable solution for managing products efficiently. It showcases how to integrate modern technologies for real-world applications and offers a foundation for more complex systems like inventory or e-commerce platforms.

Product Management System 

Using React.js and NodeJS

Creating a product management system using React.js, MySQL, and Node.js involves several steps, including setting up your development environment, building the backend API, and creating the frontend application.

Steps are as follows:

1. Set Up Your Development Environment

1.1. Install Node.js and npm

  • Download and install Node.js from nodejs.org. npm (Node Package Manager) will be installed automatically with Node.js.

1.2. Install MySQL

  • Download and install MySQL from mysql.com. You’ll need MySQL Workbench or another database management tool for managing your database.

1.3. Set Up Your Project Directory

  • Create a new directory for your project and navigate into it using the terminal.

2. Create MySQL Database and Table

Use MySQL Workbench or the MySQL command line to create a database and table: 

CREATE DATABASE auth_db;

USE auth_db;

CREATE TABLE login (

    id INT AUTO_INCREMENT PRIMARY KEY,

    name VARCHAR(100),

    email VARCHAR(100),

    password VARCHAR(100)

 );

CREATE TABLE products (

    id INT AUTO_INCREMENT PRIMARY KEY,

    name VARCHAR(100),

    price int(10),

    description VARCHAR(100),

    image VARCHAR(100),

    created_at DATE,

    updated_at DATE

 );

 3. Create the Backend API with Node.js and Express

3.1. Initialize a Node.js Project

npm init -y

2.2. Install Required Packages

npm install express mysql2 body-parser cors

  • express: Framework for building your API.
  • mysql2: MySQL client for Node.js.
  • body-parser: Middleware for parsing request bodies.
  • cors: Middleware for enabling Cross-Origin Resource Sharing.

Suppose your project directory name : product-management-system

Project Structure

product-management-system/

├── backend/                       # Node.js backend

│   ├── node_modules/

│   ├── uploads/

│   ├── package-lock.json               # Backend dependencies and scripts

│   ├── package.json               # Backend dependencies and scripts

│   ├── server.js                  # Database configuration

│   └── README.md                  # Backend project documentation

└── README.md                     # Overall project documentation

backend / (Node.js Backend)

  • server.js:  Configuration file for MySQL database connection.
  • package.json: Manages backend dependencies and scripts.
  • README.md: Documentation for the backend part of the project.

Root Directory

  • README.md: General project documentation, including setup instructions and project overview.

2.3. Set Up Express Server

Create a file named server.js:

server.js 

const express = require("express");

const mysql = require('mysql2');

const cors = require('cors');

const router = express.Router();

const multer = require('multer');

const path = require('path');

const fs = require('fs');

const session = require('express-session');

const bcrypt = require('bcryptjs');

const jwt = require('jsonwebtoken');

const bodyParser = require('body-parser');

const { check, validationResult } = require('express-validator');

const app = express();

app.use(cors());

app.use(express.json());

app.use(express.urlencoded({ extended: true }));

app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: true }));

const storage = multer.diskStorage({

    destination: (req, file, cb) => {

        cb(null, 'uploads/'); // Save files in 'uploads' directory

    },

    filename: (req, file, cb) => {

        const ext = path.extname(file.originalname);

        cb(null, Date.now() + ext); // Append a timestamp to the file name

    }

});

const upload = multer({ storage: storage });

const db = mysql.createConnection({

    host: "localhost",

    user: "root",

    password: "",

    database: "auth_db",

    port: "3306"

});

// Connect to the database and handle connection errors

db.connect((err) => {

    if (err) {

        console.error('Database connection failed:', err.stack);

        return;

    }

    console.log('Connected to database.');

});

// Endpoint to handle product addition

app.post('/addProduct', upload.single('image'), (req, res) => {

    const { name, price, description } = req.body;

    const image = req.file ? req.file.filename : null;

    // SQL query to insert product details

    const query = 'INSERT INTO products (name, price, description, image) VALUES (?, ?, ?, ?)';

    db.query(query, [name, price, description, image], (err, results) => {

        if (err) {

            console.error('Error adding product:', err);

            return res.status(500).json({ message: 'Error adding product' });

        }

        res.status(200).json({ message: 'Product added successfully' });

    });

});

 

// Example route for fetching products

app.get('/viewproducts', (req, res) => {

    const query = 'SELECT id, name, price, description, image FROM products'; // Ensure table and column names match your DB schema

      db.query(query, (err, results) => {

        if (err) {

            console.error('Error fetching products:', err);

            return res.status(500).json({ message: 'Error fetching products' });

        }

        res.json(results);

    });

});

// PUT endpoint to update product

app.put('/editproducts/:id', upload.single('image'), (req, res) => {

    const { id } = req.params;

    const { name } = req.body;

    const image = req.file ? req.file.filename : null;

    // SQL query to update product details in the database

    let query = 'UPDATE products SET name = ?';

    const values = [name];

    if (image) {

      query += ', image = ?';

      values.push(image);

    }

    query += ' WHERE id = ?';

    values.push(id);

      db.query(query, values, (err, results) => {

      if (err) {

        console.error('Error updating product:', err);

        return res.status(500).json({ message: 'Error updating product' });

      }

      if (results.affectedRows > 0) {

        res.status(200).json({ message: 'Product updated successfully' });

      } else {

        res.status(404).json({ message: 'Product not found' });

      }

    });

  });

// Example route for fetching products

app.get('/viewallproduct', (req, res) => {

    const query = 'SELECT id, name, price, description, image FROM products'; // Ensure table and column names match your DB schema

      db.query(query, (err, results) => {

        if (err) {

            console.error('Error fetching products:', err);

            return res.status(500).json({ message: 'Error fetching products' });

        }

        res.json(results);

    });

});

// Route to delete a product by ID

app.delete('/viewproducts/:id', (req, res) => {

    const { id } = req.params;

    const query = 'DELETE FROM products WHERE id = ?';

      db.query(query, [id], (err, result) => {

        if (err) {

            console.error('Error deleting product:', err);

            return res.status(500).json({ message: 'Error deleting product' });

        }

        if (result.affectedRows > 0) {

            res.status(200).json({ message: 'Product deleted successfully' });

        } else {

            res.status(404).json({ message: 'Product not found' });

        }

    });

});

// Route to get a single product by ID

app.get('/products/:id', (req, res) => {

    const { id } = req.params;

    const query = 'SELECT * FROM products WHERE id = ?';

      db.query(query, [id], (err, results) => {

        if (err) {

            console.error('Error fetching product:', err);

            return res.status(500).json({ message: 'Error fetching product' });

        }

        if (results.length > 0) {

            res.status(200).json(results[0]);

        } else {

            res.status(404).json({ message: 'Product not found' });

        }

    });

});

app.post('/signup', (req, res) => {

    const sql = "INSERT INTO login (name,email,password) VALUES (?)";

    const values = [

        req.body.name,

        req.body.email,

        req.body.password

    ];

    db.query(sql, [values], (err, data) => {

        if (err) {

            return res.json("Error");

        }

        return res.json(data);

    });

});

app.post('/login', [

    check('email', "Email length should be between 10 to 30 characters").isEmail().isLength({ min: 10, max: 30 }),

    check('password', "Password length should be between 8 to 10 characters").isLength({ min: 8, max: 10 })

], (req, res) => {

    const errors = validationResult(req);

    if (!errors.isEmpty()) {

        return res.json(errors);

    }

 

    const sql = "SELECT * FROM login WHERE email = ? AND password = ?";

    db.query(sql, [req.body.email, req.body.password], (err, data) => {

        if (err) {

            return res.json("Error");

        }

        if (data.length > 0) {

            return res.json("Success");

        } else {

            return res.json("Failed");

        }

    });

});

 

     

 

app.use(session({

    secret: 'your_secret_key', // Replace with a strong secret

    resave: false,

    saveUninitialized: false,

    cookie: { secure: false } // Set secure: true if using HTTPS

}));

 

// app.post('/login', (req, res) => {

//     const { email, password } = req.body;

//     db.query('SELECT * FROM users WHERE email = ?', [email], (err, results) => {

//         if (err) return res.status(500).json({ message: 'Server error' });

//         if (results.length > 0) {

//             const user = results[0];

//             bcrypt.compare(password, user.password, (err, isMatch) => {

//                 if (err) return res.status(500).json({ message: 'Server error' });

//                 if (isMatch) {

//                     req.session.userId = user.id; // Set user ID in session

//                     res.json({ message: 'Logged in successfully' });

//                 } else {

//                     res.status(401).json({ message: 'Invalid credentials' });

//                 }

//             });

//         } else {

//             res.status(404).json({ message: 'User not found' });

//         }

//     });

// });

 

  // Route to get user profile

  app.get('/user/profile', (req, res) => {

    const userId = req.session.userId;

    if (!userId) return res.status(401).json({ message: 'Not authenticated' });

      db.query('SELECT * FROM users WHERE id = ?', [userId], (err, results) => {

        if (err) return res.status(500).json({ message: 'Server error' });

        if (results.length > 0) {

            res.json(results[0]);

        } else {

            res.status(404).json({ message: 'User not found' });

        }

    });

});

 

   

app.listen(8081, () => {

    console.log("Server is listening on port 8081");

});

module.exports = db;

Explanation of Each Line

1.   const express = require("express");

o    Purpose: Import the Express.js library.

o    What It Does: Provides a framework for building web applications and APIs. It simplifies routing, middleware handling, and other web-related functionalities.

2.   const mysql = require('mysql2');

o    Purpose: Import the MySQL2 library.

o    What It Does: Enables connection to a MySQL database. This library provides advanced features like prepared statements for better security and performance.

3.   const cors = require('cors');

o    Purpose: Import the cors middleware.

o    What It Does: Handles CORS (Cross-Origin Resource Sharing) issues, allowing the server to handle requests from different origins (e.g., frontend hosted on a different domain).

4.   const router = express.Router();

o    Purpose: Create an Express router object.

o    What It Does: Allows you to create modular and organized routes for your application. For example, all routes related to user management can be grouped in one router.

5.   const multer = require('multer');

o    Purpose: Import the multer library.

o    What It Does: Handles file uploads in Node.js applications. It helps in managing and storing files uploaded by users.

6.   const path = require('path');

o    Purpose: Import Node.js' built-in path module.

o    What It Does: Provides utilities for working with file and directory paths. It ensures cross-platform compatibility when handling file paths.

7.   const fs = require('fs');

o    Purpose: Import Node.js' built-in fs (File System) module.

o    What It Does: Provides functions to interact with the file system, such as reading, writing, deleting, or modifying files.

8.   const session = require('express-session');

o    Purpose: Import the express-session middleware.

o    What It Does: Manages user sessions (e.g., storing user authentication information temporarily). Sessions are used to maintain user state across requests.

9.   const bcrypt = require('bcryptjs');

o    Purpose: Import the bcryptjs library.

o    What It Does: Provides tools for hashing passwords securely. Passwords can be hashed when stored in a database and later verified during login.

10.                     const jwt = require('jsonwebtoken');

o    Purpose: Import the jsonwebtoken library.

o    What It Does: Implements JWT (JSON Web Token) authentication. JWT tokens are generated upon login and used to verify user identity on protected routes.

11.                     const bodyParser = require('body-parser');

o    Purpose: Import the body-parser middleware.

o    What It Does: Parses incoming request bodies into JSON or other formats, making it easier to handle form submissions or JSON payloads in your API.

 

 

3. Create the Frontend with React.js

3.1. Create a New React Project

In your project directory:

npx create-react-app frontend

cd frontend

3.2. Install Axios

Axios is a promise-based HTTP client for making API requests.

npm install axios

Project Structure:

├── frontend /                       # React.js frontend

│   ├── public/

│   │   ├── index.html

│   │   └── ...                    # Other static files

│   ├── src/

│   │   ├──SignUp.js           # User management component

│   │   ├── App.js                 # Main React component

│   │   ├── index.js               # Entry point for React

│   │   └── ...                    # Other React components, CSS, etc.

│   ├── package.json               # Frontend dependencies and scripts

│   └── README.md                  # Frontend project documentation

Detailed Breakdown

frontend/ (React.js Frontend)

  • public/: Contains static files for the frontend.
    • index.html: The main HTML file for the React app.
  • src/: Contains React components and other frontend code.

§   SignUp.js: Component for user input functionalities.

    • App.js: The main React component that includes routing or layout.
    • index.js: The entry point for React, where the React app is rendered.
  • package.json: Manages frontend dependencies and scripts.
  • README.md: Documentation for the frontend part of the project.

3.3. You can Create Components

Inside the src folder, create a new file SignUp.js.But I don’t use Components .I create all the js files inside src folder directly

SignUp.js

 

import React, { useState } from 'react';

import { Link, useNavigate } from 'react-router-dom';

import Validation from './SignupValidation';

import axios from 'axios';

 

function SignUp() {

  const [values, setValues] = useState({ name: '', email: '', password: '' });

  const navigate = useNavigate();

  const [errors, setErrors] = useState({});

 

  const handleInput = (event) => {

    setValues(prev => ({ ...prev, [event.target.name]: event.target.value }));

  };

 

  const handleSubmit = (event) => {

    event.preventDefault();

    const err = Validation(values);

    setErrors(err);

 

    if (err.name === "" && err.email === "" && err.password === "") {

      axios.post('http://localhost:8081/signup', values)

        .then(res => {

          navigate('/');

        })

        .catch(err => console.log(err));

    }

  };

 

  return (

    <div className='d-flex justify-content-center align-items-center bg-primary vh-100'>

      <div className='bg-white p-3 rounded w-25'>

        <h2>Sign-Up</h2>

        <form onSubmit={handleSubmit}>

          <div className='mb-3'>

            <label htmlFor="name"><strong>Name</strong></label>

            <input type="text" placeholder='Enter Name' name='name'

              onChange={handleInput} className='form-control rounded-0'/>

            {errors.name && <span className='text-danger'> {errors.name}</span>}

          </div>

          <div className='mb-3'>

            <label htmlFor="email"><strong>Email</strong></label>

            <input type="email" placeholder='Enter Email' name='email'

              onChange={handleInput} className='form-control rounded-0'/>

            {errors.email && <span className='text-danger'> {errors.email}</span>}

          </div>

          <div className='mb-3'>

            <label htmlFor="password"><strong>Password</strong></label>

            <input type="password" placeholder='Enter Password' name='password'

              onChange={handleInput} className='form-control rounded-0'/>

            {errors.password && <span className='text-danger'> {errors.password}</span>}

          </div>

          <button type='submit' className='btn btn-success w-100 rounded-0'>Sign up</button>

          <p>You agree to our terms and policies</p>

          <Link to="/" className='btn btn-default border w-100 bg-light rounded-0 text-decoration-none'>Login</Link>

        </form>

      </div>

    </div>

  );

}

 

export default SignUp;

 

 

 

3.4. Integrate the Component

In App.js:

App.js

import React from 'react';

import SignUp from './ SignUp;

 

function App() {

    return (

        <div className="App">

            < SignUp />

        </div>

    );

}

 

export default App;

 

 

4. Run Your Application

4.1. Start the Backend

In the root project directory:

node server.js

4.2. Start the Frontend

In the client directory:

npm start

Your React app should open in the browser at http://localhost:3000, and it should be able to interact with the backend API running on http://localhost:5000.

Summary

  • Backend: Created with Node.js, Express, and MySQL, providing RESTful API endpoints for user management.
  • Frontend: Built with React.js, using Axios to interact with the backend API for CRUD operations.

Start both the backend and frontend simultaneously

To start both the backend and frontend simultaneously in your project, you can use a couple of approaches/methods depending on your preferences. These methods  are :

Method 1: Using Concurrently Package

The concurrently package allows you to run multiple npm scripts concurrently. This is useful for running both the backend and frontend at the same time.

Step 1: Install Concurrently

In the root of your project (outside both client and server directories), install concurrently:

npm install concurrently --save-dev

Step 2: Update package.json

In the root package.json, add a script to start both the backend and frontend:

 

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "client": "cd client && npm start",

    "server": "cd server && npm start",

    "dev": "concurrently \"npm run client \" \"npm run server \""

  },

 

  "devDependencies": {

    "concurrently": "^7.0.0"

  },

  "dependencies": {

    // other dependencies

  }

}

Explanation:

  • concurrently: Runs the specified commands in parallel.

Step 3: Start Both Backend and Frontend

In the root directory of your project, run:

npm dev

This will start both the backend and frontend servers concurrently.

Method 2: Using Separate Terminal Windows

You can manually start the backend and frontend servers in separate terminal windows or tabs.

Step 1: Start the Backend Server

Navigate to the server directory in one terminal window:

cd backend

Start the backend server:

npm start

Step 2: Start the Frontend Server

Open a new terminal window or tab. Navigate to the client directory:

cd fronend

Start the frontend server:

npm start

Method 3: Using npm-run-all (Alternative to concurrently)

If you prefer, you can use the npm-run-all package, which also allows running multiple npm scripts concurrently.

Step 1: Install npm-run-all

In the root of your project, install npm-run-all:

npm install npm-run-all --save-dev

Step 2: Update package.json

In the root package.json, add a script to start both the backend and frontend:

{

  "name": "user-management-system",

  "version": "1.0.0",

  "scripts": {

    "start": "npm-run-all --parallel start:server start:client",

    "start:server": "npm start --prefix server",

    "start:client": "npm start --prefix client"

  },

  "devDependencies": {

    "npm-run-all": "^4.1.5"

  },

  "dependencies": {

    // other dependencies

  }

}

Explanation:

  • npm-run-all --parallel start:server start:client: Runs the start:server and start:client scripts in parallel.
  • "start:server": Runs the start script in the server directory.
  • "start:client": Runs the start script in the client directory.

Step 3: Start Both Backend and Frontend

In the root directory of your project, run:

npm start

This will start both the backend and frontend servers concurrently using npm-run-all.

Summary

  • Using concurrently: Install concurrently, update package.json, and run npm start in the root directory.
  • Using Separate Terminals: Manually start each server in separate terminals.
  •  Using npm-run-all: Install npm-run-all, update package.json, and run npm start in the root directory.

 

Screenshots













Download Source Code Here


To run a downloaded Node.js project, follow these steps:

1. Install Node.js

Ensure you have Node.js installed on your system. You can download it from Node.js Official Website. Installing Node.js also installs npm (Node Package Manager).

  • To verify installation, run:

node -v

npm -v

2. Download or Clone the Project

  • If you received the project as a zip file:

1.   Extract the zip file.

  • If the project is on GitHub or similar:

1.   Clone it using:

git clone <repository-url>

cd <project-folder>

3. Install Dependencies

Most Node.js projects use npm to manage dependencies. Inside the project folder, run:

npm install

This command reads the package.json file and installs all required packages listed in the dependencies and devDependencies.

4. Check for Configuration

  • Look for a .env file or configuration instructions in the README file. If the project uses environment variables, set them up as needed.
  • Example .env setup:

PORT=3000

DB_URI=mongodb://localhost:27017/mydatabase

5. Run the Project

  • Most Node.js projects can be started with:

npm start

or

node <entry-file>

The entry file is usually server.js or app.js.

  • If the project uses a development server (e.g., Nodemon), you may also run:

npm run dev

6. Access the Project

  • Once the project is running, it will usually display a message like:

Server is running on http://localhost:3000

  • Open the browser and navigate to the displayed URL.

Troubleshooting

1.   Missing Dependencies If a package is missing or outdated, try running:

npm install <package-name>

2.   Port Already in Use If the port is busy, change it in the .env file or project configuration.

3.   Modules Compatibility Ensure the Node.js version matches the version specified in package.json under engines.

1. Check Database Connection

Ensure your application is connected to the database.

  • Verify Connection Code: Check your database connection code.

If there is some problem in database connection then  you can reinstall the MySQL dependency in your Node.js project.

Steps to Reinstall MySQL Dependency

1.   Uninstall the Existing Package (Optional) If you want to start fresh or are experiencing issues with the current installation, uninstall the existing mysql or mysql2 package:

For mysql

npm uninstall mysql

or for mysql2

npm uninstall mysql2

2.   Install the MySQL Package Reinstall the desired package using npm:

o    For mysql (basic MySQL client for Node.js):

npm install mysql

o    For mysql2 (improved performance and Promise support):

npm install mysql2

3.   Using mysql2 is recommended for newer projects due to its support for modern features like Promises.

4.   Verify Installation Once installed, check if the dependency is listed in package.json under "dependencies":

"dependencies": {

  "mysql": "^2.18.1"

}

5.   Test the Connection After reinstalling, test the MySQL connection with a basic script(in server.js):

const mysql = require('mysql');

const connection = mysql.createConnection({

  host: 'localhost',

  user: 'your_username',

  password: 'your_password',

  database: 'your_database'

});

 

connection.connect(err => {

  if (err) {

    console.error('Error connecting to MySQL:', err);

    return;

  }

  console.log('Connected to MySQL!');

});

 

connection.end();

Troubleshooting Tips

  • Check Node.js and npm versions: Ensure compatibility by running:

node -v

npm -v

  • Clear npm cache (if issues persist):

npm cache clean --force

  • Reinstall dependencies: If problems continue, delete node_modules and package-lock.json, then reinstall all dependencies:

rm -rf node_modules package-lock.json

npm install

 

 

 

 

Tags

You Might Like

Show more
ReactWithNodeJs

Post a Comment

0Comments

Post a Comment (0)
Share to other apps
Copy Post Link