Project setup and configuration

[danjelahoxha]

To set up and configure the project, follow these steps:

Install Node.js and npm (if not already installed) Download and install Node.js from: https://nodejs.org/en/download/ npm will be installed alongside Node.js

Install Vite globally: Create a new Vite project with the React and TypeScript template: npm install -g create-vite

Create a new Vite project with the React and TypeScript template:

create-vite WhoIsComing --template react-ts
cd WhoIsComing

Install Nest.js CLI globally: npm install -g @nestjs/cli

Create a new Nest.js project inside the WhoIsComing directory:

nest new server
cd server

Install the necessary packages for MongoDB:

npm install --save @nestjs/mongoose mongoose

Go back to the root directory of the project (WhoIsComing): cd .. Install dependencies for both front-end and back-end:

npm install
cd server
npm install

Configure the MongoDB connection in the Nest.js application. Open the server/src/app.module.ts file and add the following imports: import { MongooseModule } from '@nestjs/mongoose'; Update the imports array in the @Module decorator with the following code to establish a connection to your MongoDB instance:

MongooseModule.forRoot('mongodb://<username>:<password>@<hostname>:<port>/<database-name>?authSource=admin', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useFindAndModify: false,
  useCreateIndex: true,
}),

Replace , , , , and with the appropriate values for your MongoDB instance.

Configure proxy settings in the Vite configuration to forward API requests from the front-end to the back-end server. Create a vite.config.ts file in the root folder of the WhoIsComing directory with the following content:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});

This configuration forwards all requests starting with /api from the front-end to the back-end server running at http://localhost:3000. (or any other port)

This is the setup and configuration with React.js, Vite, TypeScript, Nest.js, and MongoDB.