fullstack setup

colors.js

utils > colors.js


const colors = {
    green: text => `\x1b[32m${text}\x1b[0m`,
    red: text => `\x1b[31m${text}\x1b[0m`,
    yellow: text => `\x1b[33m${text}\x1b[0m`,
    blue: text => `\x1b[34m${text}\x1b[0m`,
  };
  
  module.exports = colors;

Config Setup Node

// Lanch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
            "type": "pwa-node",
            "request": "attach",
            "name": "Attach to Process",
            "port": 5858,
            "restart": true,
            "skipFiles": [
                "<node_internals>/**"
            ],
        },
            {
                "type": "node",
                "request": "launch",
                "name": "Launch Node.js Debug",
               "program": "${file}",
                "cwd": "${workspaceRoot}",
                 "env": {
                "NODE_ENV": "development"
                   },
             },
        
    ],
}

node server

require("dotenv").config({ path: "./config.env" });
const express = require("express");
const app = express();
const logger = require('morgan');
const cors = require("cors");
const colors = require("./utils/colors");
const errorHandler = require("./middleware/error");
const connectDB = require("./config/db");
connectDB()

// this show status code in status code
const corsOptions = {
  origin: 'http://localhost:3000',
  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
}



app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cors(corsOptions))

// log only 4xx and 5xx responses to console
app.use(logger('dev', {
  skip: (req, res) => res.statusCode < 400
}))

// Error Handler Middleware
app.use(errorHandler);


//connecting routes
app.use("/api/auth", require("./routes/auth"));



const PORT = process.env.PORT || 5000;
const server = app.listen(PORT, () => console.log(`${colors.green('Success: ')} Server running on PORT ${colors.green(PORT)} 🔥`)
);

if (process.env.NODE_ENV === "development") {
  require("open")(server);
}



process.on("unhandledRejection", (err, promise) => {
  console.log(`Logged Error: ${err.message}`);
  server.close(() => process.exit(1));
});

React SetUp

1st npx create-react-app my_app
2nd far left click debugger symbole  an click create a launch.json file
3rd select web app (chrome)
on top of vs code click run  > add Configuration after click
chrome 

click on vscode in far left 
We need to initially configure the debugger. To do so, go to the Run view (Ctrl+Shift+D) 
and click on the gear button or Create a launch.json link to create a launch.json past bellow
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
      {
        // I adapted this from a config to debug tests
        "name": "create-react-app",
        "type": "node",
        "request": "launch",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
        "args": ["start"],
        "cwd": "${workspaceRoot}",
        "protocol": "inspector",
        "console": "integratedTerminal"
      }
  ]
}

 (npm start). Then press F5 

now add break point on the starting 

click Launch chrome

https://stackoverflow.com/a/72675450