Full-Stack Web App Setup on a Fresh VPS (With Docker, Node.js, Prisma, Authentication, Frontend, and HTTPS)

Article Summary

This comprehensive guide walks you through setting up a modern full-stack web application on a freshly provisioned VPS. You'll learn how to:

• Install system updates and development tools

• Set up Docker and Docker Compose

• Scaffold and run a Node.js backend using Express

• Use Prisma as your ORM

• Secure APIs with JWT authentication

• Create a frontend with React or Next.js

• Configure Nginx as a reverse proxy

• Enable HTTPS using Certbot and Let's Encrypt

---

1. Start with a Fresh VPS

sudo apt update && sudo apt upgrade -y
sudo apt install curl wget git unzip nano -y

2. Install Docker and Docker Compose

curl -fsSL https://get.docker.com -o get-docker.sh
sh get-docker.sh
sudo usermod -aG docker $USER
newgrp docker

# Install Docker Compose v2
sudo apt install docker-compose-plugin

3. Project Structure Example

project/
 backend/
 src/
 prisma/
 .env
 package.json
 Dockerfile
 frontend/
 public/
 src/
 .env
 package.json
 Dockerfile
 docker-compose.yml
 nginx/
 default.conf

4. Backend Setup (Node.js + Express)

Initialize Backend:

mkdir -p backend/src backend/prisma
cd backend
npm init -y
npm install express dotenv bcryptjs jsonwebtoken @prisma/client
npm install -D nodemon prisma

Update package.json

"scripts": {
 "dev": "nodemon src/index.js",
 "start": "node src/index.js"
}

Sample src/index.js

require('dotenv').config();
const express = require('express');
const app = express();
const port = process.env.PORT || 5000;

app.use(express.json());

app.get('/', (req, res) => res.send('API Running'));

app.listen(port, () => {
 console.log(` Backend server is running at http://localhost:${port}`);
});

Create .env

PORT=5000
DATABASE_URL="file:./dev.db"
JWT_SECRET=your_secret_key

5. Add Prisma ORM

Initialize Prisma:

npx prisma init

Example prisma/schema.prisma

datasource db {
 provider = "sqlite"
 url = env("DATABASE_URL")
}

generator client {
 provider = "prisma-client-js"
}

model User {
 id Int @id @default(autoincrement())
 email String @unique
 password String
}

Apply Migration and Generate Client:

npx prisma migrate dev --name init

Use in Code:

const { PrismaClient } = require('@prisma/client');
const prisma = new PrismaClient();

6. JWT Authentication

Register & Login Endpoints (Basic Example)

const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');

// Registration
app.post('/register', async (req, res) => {
 const { email, password } = req.body;
 const hashed = await bcrypt.hash(password, 10);
 const user = await prisma.user.create({ data: { email, password: hashed } });
 res.json(user);
});

// Login
app.post('/login', async (req, res) => {
 const { email, password } = req.body;
 const user = await prisma.user.findUnique({ where: { email } });
 if (!user || !(await bcrypt.compare(password, user.password))) {
 return res.status(401).json({ error: 'Invalid credentials' });
 }
 const token = jwt.sign({ userId: user.id }, process.env.JWT_SECRET);
 res.json({ token });
});

7. Frontend Setup (React or Next.js)

Example: Create React App

npx create-react-app frontend
cd frontend
npm install axios react-router-dom

.env

REACT_APP_API_URL=http://localhost:5000

Fetching API from React

import axios from 'axios';

const login = async () => {
 const response = await axios.post(`${process.env.REACT_APP_API_URL}/login`, {
 email: '[email protected]',
 password: 'secret'
 });
 localStorage.setItem('token', response.data.token);
};

8. Dockerize Backend and Frontend

Backend Dockerfile

FROM node:18
WORKDIR /app
COPY . .
RUN npm install
CMD ["npm", "run", "dev"]

Frontend Dockerfile

FROM node:18
WORKDIR /app
COPY . .
RUN npm install && npm run build
EXPOSE 3000
CMD ["npx", "serve", "-s", "build"]

9. Docker Compose

version: '3.8'
services:
 backend:
 build: ./backend
 ports:
 - "5000:5000"
 env_file:
 - ./backend/.env
 volumes:
 - ./backend:/app

 frontend:
 build: ./frontend
 ports:
 - "3000:3000"
 env_file:
 - ./frontend/.env
 volumes:
 - ./frontend:/app

 nginx:
 image: nginx:latest
 volumes:
 - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
 ports:
 - "80:80"
 depends_on:
 - backend
 - frontend

10. Nginx Reverse Proxy Setup

Example nginx/default.conf

server {
 listen 80;

 location /api/ {
 proxy_pass http://backend:5000/;
 proxy_set_header Host $host;
 }

 location / {
 proxy_pass http://frontend:3000/;
 proxy_set_header Host $host;
 }
}

11. HTTPS via Certbot (Let's Encrypt)

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

Auto-renew:

sudo crontab -e
# Add:
0 3 * * * certbot renew --quiet

12. Next Steps

Once your full-stack application is functional, you can take it to the next level with these enhancements and production-level improvements:

Use PostgreSQL or MySQL with Prisma

Instead of the default SQLite or in-memory databases, integrate a robust relational database like PostgreSQL or MySQL.

• Install the client library:

  npm install @prisma/client
  npm install prisma --save-dev
  npm install pg # For PostgreSQL
  # or
  npm install mysql2 # For MySQL

• Configure Prisma schema (prisma/schema.prisma):

  datasource db {
   provider = "postgresql"
   url = env("DATABASE_URL")
  }

• Set the database URL in .env:

  DATABASE_URL="postgresql://username:password@localhost:5432/mydb"

• Migrate the database:

  npx prisma migrate dev --name init

Add Tests (Jest, Supertest)

Improve code reliability with automated tests:

• Install testing libraries:

  npm install --save-dev jest supertest @types/jest ts-jest

• Basic test example (tests/app.test.js):

  const request = require('supertest');
  const app = require('../src/app');
  
  describe('GET /', () => {
   it('should return 200 OK', async () => {
   const res = await request(app).get('/');
   expect(res.statusCode).toEqual(200);
   });
  });

• Add to package.json:

  "scripts": {
   "test": "jest"
  }

Set Up CI/CD (GitHub Actions)

Automate your testing and deployment process.

• Sample GitHub Actions workflow .github/workflows/ci.yml:

  name: CI
  on:
   push:
   branches: [main]
  
  jobs:
   build:
   runs-on: ubuntu-latest
   steps:
   - uses: actions/checkout@v3
   - name: Set up Node.js
   uses: actions/setup-node@v3
   with:
   node-version: '18'
   - run: npm install
   - run: npm run test

Deploy on VPS

• Clone your repo on the server

• Use PM2 or Docker to manage Node.js processes

• Set up Nginx as a reverse proxy

Example PM2 setup:

npm install pm2 -g
pm run build
pm start
pm2 start index.js --name myapp
pm2 save && pm2 startup

Add CORS, Helmet, Rate Limiters

Secure your backend with best practices.

• CORS:

  npm install cors

  const cors = require('cors');
  app.use(cors());

• Helmet:

  npm install helmet

  const helmet = require('helmet');
  app.use(helmet());

• Rate Limiter:

  npm install express-rate-limit

  const rateLimit = require('express-rate-limit');
  const limiter = rateLimit({
   windowMs: 15 * 60 * 1000,
   max: 100
  });
  app.use(limiter);

With these enhancements, your project will be more robust, secure, testable, and production-ready.