how to run next js and python backend on local server?

Question

i want to run a project on local host , where frontend is built with next.js and backend is built with python, i am attaching package.json file of frontend and backend,

package.json file of python backend 
{
  "name": "app-grct-assist-tool",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p 3000",
    "type-check": "tsc --noEmit",
    "lint": "eslint --ignore-path .gitignore \"**/*.+(ts|js|tsx)\"",
    "format": "prettier --ignore-path .gitignore \"**/*.+(ts|js|tsx)\" --write",
    "test": "jest --reporters=\"jest-junit\"",
    "jest": "jest",
    "jest-debug": "jest  --collectCoverage=false",
    "jest-preview": "jest-preview"
  },
  "dependencies": {
    "axios": "^1.6.2",
    "clsx": "^1.2.1",
    "dotenv": "^16.0.3",
    "lodash": "^4.17.21",
    "multiselect-react-dropdown": "^2.0.25",
    "next": "13.2.3",
    "query-string": "^8.1.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.11.0",
    "react-markdown": "^8.0.5",
    "react-modal": "^3.16.1",
    "react-perfect-scrollbar": "^1.5.8",
    "react-scripts": "^5.0.1",
    "react-switch": "^7.0.0",
    "react-use": "^17.5.0",
    "tailwind-merge": "^1.10.0"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "@babel/preset-typescript": "^7.23.3",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^14.2.1",
    "@testing-library/user-event": "^14.5.2",
    "@types/jest": "^29.5.12",
    "@types/lodash": "^4.14.202",
    "@types/node": "^18.14.6",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@types/react-modal": "^3.16.3",
    "@types/testing-library__react": "^10.2.0",
    "@typescript-eslint/parser": "^5.54.0",
    "autoprefixer": "^10.4.13",
    "axios-mock-adapter": "^1.22.0",
    "babel-jest": "^29.7.0",
    "eslint": "8.35.0",
    "eslint-config-next": "13.2.3",
    "identity-obj-proxy": "^3.0.0",
    "istanbul-lib-coverage": "^3.2.2",
    "istanbul-reports": "^3.1.6",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-junit": "^16.0.0",
    "jest-localstorage-mock": "^2.4.26",
    "jest-preview": "^0.3.1",
    "jest-transform-stub": "^2.0.0",
    "jsdom": "^24.0.0",
    "postcss": "^8.4.21",
    "prettier": "^2.8.4",
    "tailwindcss": "^3.2.7",
    "ts-jest": "^29.1.2",
    "tsx": "^3.12.3",
    "typescript": "^4.9.5"
  }
}



package.json file of frontend 


{
  "name": "app-grct-assist-tool",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p 3000",
    "type-check": "tsc --noEmit",
    "lint": "eslint --ignore-path .gitignore \"**/*.+(ts|js|tsx)\"",
    "format": "prettier --ignore-path .gitignore \"**/*.+(ts|js|tsx)\" --write",
    "test": "jest --reporters=\"jest-junit\"",
    "jest": "jest",
    "jest-debug": "jest  --collectCoverage=false",
    "jest-preview": "jest-preview"
  },
  "dependencies": {
    "axios": "^1.6.2",
    "clsx": "^1.2.1",
    "dotenv": "^16.0.3",
    "lodash": "^4.17.21",
    "multiselect-react-dropdown": "^2.0.25",
    "next": "13.2.3",
    "query-string": "^8.1.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.11.0",
    "react-markdown": "^8.0.5",
    "react-modal": "^3.16.1",
    "react-perfect-scrollbar": "^1.5.8",
    "react-scripts": "^5.0.1",
    "react-switch": "^7.0.0",
    "react-use": "^17.5.0",
    "tailwind-merge": "^1.10.0"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "@babel/preset-typescript": "^7.23.3",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^14.2.1",
    "@testing-library/user-event": "^14.5.2",
    "@types/jest": "^29.5.12",
    "@types/lodash": "^4.14.202",
    "@types/node": "^18.14.6",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@types/react-modal": "^3.16.3",
    "@types/testing-library__react": "^10.2.0",
    "@typescript-eslint/parser": "^5.54.0",
    "autoprefixer": "^10.4.13",
    "axios-mock-adapter": "^1.22.0",
    "babel-jest": "^29.7.0",
    "eslint": "8.35.0",
    "eslint-config-next": "13.2.3",
    "identity-obj-proxy": "^3.0.0",
    "istanbul-lib-coverage": "^3.2.2",
    "istanbul-reports": "^3.1.6",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-junit": "^16.0.0",
    "jest-localstorage-mock": "^2.4.26",
    "jest-preview": "^0.3.1",
    "jest-transform-stub": "^2.0.0",
    "jsdom": "^24.0.0",
    "postcss": "^8.4.21",
    "prettier": "^2.8.4",
    "tailwindcss": "^3.2.7",
    "ts-jest": "^29.1.2",
    "tsx": "^3.12.3",
    "typescript": "^4.9.5"
  }
}




readme.md file of frontend


 ## Getting Started

Follow these instructions to get the project up and running on your local machine.

### Prerequisites

Before you begin, ensure you have the following installed:

- Node.js (Version 18 recommended)
- npm

### Step 1: Run the Project on your Local Environment

1. Install project dependencies:

   ```bash
   npm install

2. Create an .env file in the root project directory. You can reference the .env.example file for required environment variables.

3. Add values to the following environment variables in your .env file:

   OPENAI_API_KEY=
   PINECONE_API_KEY=
   PINECONE_ENVIRONMENT=
   PINECONE_INDEX_NAME=
   

4. Start the development server:

   npm run dev
   

   This will start the development server, and you can access the app at http://localhost:3000. The app will automatically reload when you make changes to the source code.

Build the Project(For the production deployment)

Install project dependencies (if not already done):

npm install

Create a production-ready build of the app:

npm run build

Start the release build:

npm start

This will create a production build and start the app in a production environment.

Deployment Instructions

For different environments:

• Development (Dev):

  • Pass the environment variable ENV=dev when building the Docker image:

    docker build --build-arg ENV=dev -t your_image_name .
    

• User Acceptance Testing (UAT):

  • Pass the environment variable ENV=uat when building the Docker image:

    docker build --build-arg ENV=uat -t your_image_name .
    

Environment Files

We have separate environment files for each environment (dev, uat, prod):

• .env.dev: Used for development environment.
• .env.uat: Used for user acceptance testing environment.
• .env.prod: Used for production environment.

These files will be copied to .env.production based on the Docker environment variable (ENV) set during the build process. Note that these custom environment files should not be confused with Next.js environment files like .env.development and .env.production, which serve different purposes.

readme.md file of backend

Please ensure you have the latest versions of Python and pip installed globally on your system. Recommended versions: Python 3.11.4 and pip 23.1.2.

Getting Started

Note (For Windows OS): Install the 'make' command line for Windows from here.

1. Create an .env file from the .env.example file and fill in all the configurations.

2. Install dependencies

make install

3. Start FastAPI process

make run

4. Clean cache (Clean up generated files or artifacts)

make clean

Installing Visual Studio Code Extensions

To ensure you have all the necessary extensions for this project, follow these steps:

1. Open Visual Studio Code.
2. Go to the Extensions view by clicking on the square icon on the sidebar or by pressing Ctrl+Shift+X.
3. Locate the ellipsis (...) at the top-right corner and select 'Install from VSIX' from the dropdown menu.
4. Browse and select the .vscode/extensions.json file in this repository.
5. Confirm the installation to install all the extensions listed in the file.

Alternatively, you can use the command line to install the extensions. Open a terminal and execute the following command:

cat .vscode/extensions.json | jq -r '.recommendations[]' | xargs -L 1 code --install-extension

Swagger Documentation

To access the Swagger documentation for this FastAPI project, navigate to localhost:8000/docs in your web browser after running the project.

Debugger Setup

1. Open Visual Studio Code: Launch Visual Studio Code and ensure the project folder is open.

2. Access Debugger Configuration: Locate the .vscode/launch.json file within your project directory.

3. Start Debugging: Inside Visual Studio Code, navigate to the debugging view (Ctrl+Shift+D). Click the play button or press F5 to start debugging using the existing configuration in the launch.json file.

4. Interact with the Debugger: Use breakpoints, watches, and other debugging tools provided by Visual Studio Code to inspect and debug your FastAPI Python project.

enter image description here

file of backend,

enter image description here

files present in frontend,

if you need any other informations , please feel free to contact ,


i was trying to open project on local host, but it is showing this site cant be reached