'Differentiate Frontend GET request and Backend GET request in Express and Vue

I developed an API using MongoDB, Express, and Node JS, the API was working fine, I designed the Frontend using Vue JS, API running in server directory, while the Frontend running in client directory both were working independently normal.

I configure the app like this:

const path = require("path");

module.exports = {
    outputDir: path.resolve(__dirname, '../server/public'),
    devServer: {
        proxy: {
            '/api': {
                target: "http://localhost:5000"
            }
        }
    }
}

After I ran the build command I deploy the MEVN Stack app but it is mixing up both API and Client GET requests, check the server.js file:

const express       = require('express');
const dotenv        = require('dotenv');
const bodyParser    = require('body-parser');
const mongoose      = require('mongoose');
const cors          = require('cors');
const morgan        = require('morgan');
const path = require('path');
const cookieParser = require('cookie-parser');
const errorHandler  = require('./Middleware/error');

// Load ENV vars
dotenv.config({ path: './.env'});
// Initialise the app
const connectDB = require('./config/db');

// Connect to database
connectDB();
const app = express();

// Import routes files
const auth = require("./Route/auth");
const users = require("./Route/users");
const cards = require("./Route/cards");
const webhooks = require("./Route/webhooks");
const transactions = require("./Route/transactions");

// Configure bodyparser to handle post requests
app.use(bodyParser.urlencoded({
    extended: true
}));
app.use(bodyParser.json());
// Cookie parser
app.use(cookieParser());
app.use(cors());

var port = process.env.PORT || 5000;

// Mount API routes in the App
app.use('/api/auth', auth);
app.use('/api/users', users);
app.use('/api/cards', cards);
app.use('/api/webhooks', webhooks);
app.use('/api/transactions', transactions);
app.use(errorHandler);

app.use(express.static(__dirname + '/public'));
app.get('/.*/', function (request, response) {
    response.sendFile(path.resolve(__dirname, './public/index.html'));
});


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source