Install the Latest Node.js
sudo apt install nodejs npm
sudo npm install n -g
For the latest stable version of Node JS:
sudo n stable
node --version
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
UPDATE: ts-node is apparently a higher-performance version of tsx. I found ts-node to be a pain, so next time, use tsx instead.
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
Deploy to a VPS
Fresh install an Ubuntu server and create non-root superuser per these instructions.
sudo apt install -y nodejs npm nginx
sudo npm install -g pm2
Build the front end by going to front end directory, then:
npm install
npx vite build
not:
npm run build (no, not this!)
(I think I may have to do this every time I edit the code)
Then modify
sudo nano /etc/nginx/sites-available/default
with:
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
root /home/youruser/your-project-folder/frontend/dist;
index index.html;
location / {
try_files $uri /index.html;
}
location /api/ {
proxy_pass http://localhost:5000/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
Then restart nginx:
sudo nginx -t && sudo systemctl restart nginx
At this point the front-end should be working, but not the back-end yet. From the backend directory:
npx tsc (because I use typescript)
ls dist (to confirm the build output)
pm2 start dist/index.js --name tlom-api
pm2 save
pm2 startup
pm2 says to copy-paste this and run it:
sudo env PATH=$PATH:/usr/bin /usr/local/lib/node_modules/pm2/bin/pm2 startup systemd -u nate --hp /home/nate