React with Vite and Express API, using TypeScript

Install Node.js, quick description here.

Create a New React App with Vite

Install Node.js, then in the directory where you want to install (often within project-name/client):

npm create vite@latest

npm run dev

Clone Existing React App

To clone a React project from Github, you clone it, then use the following command from the project subdirectory (to install it, which I don’t totally understand, but it works):

npm install --f

Move Entire App to a Subdirectory

You’ll want the React app to be contained in a subdirectory /client and the Express API contained in a subdirectory /api or /server. You can move the entire React app by moving all files into a subdirectory with the following commands:

mkdir client

git mv -k * client/

Create the Express API (mostly from ChatGPT)

mkdir api

cd api

npm init -y

Install express. Install mysql2 only if you are going to connect to a database:

npm install express cors dotenv mysql2

npm install --save-dev typescript ts-node nodemon @types/node @types/express @types/cors

npx tsc --init

Modify tsconfig.json for better compatibility:
"compilerOptions": {
"target": "ESNext",
"module": "NodeNext",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"moduleResolution": "node"
}

Add the following lines to package.json, scripts section to run typescript files directly with ts-node by compiling with tsc then running the dist/index.js file:

… ,
"type": "module",
"scripts": {
"dev": "ts-node src/index.ts",
"build": "tsc",
"start": "node dist/index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},

Make src/ directory:

mkdir src

cd src

Within src/, make index.ts and write the express API TS code, then run it with:

npm run dev

Running the Two Servers, API + React App

When they are separate, run the API from the api/ directory with:

npm run dev

and run the React app made with Vite from the client/ directory with:

npx vite