Frontend Deployment

Overview

The Password Generator frontend is built with Next.js 16 and uses modern React features. This guide covers deploying the frontend application to production.

Prerequisites

Node.js 18.x or higher
npm or yarn package manager
Backend API URL (deployed Django backend)

Dependencies

The frontend uses the following key dependencies:

package.json

{
  "dependencies": {
    "@nextui-org/button": "^2.0.38",
    "@nextui-org/react": "^2.4.8",
    "@nextui-org/system": "^2.2.6",
    "@nextui-org/theme": "^2.2.11",
    "axios": "^1.7.7",
    "framer-motion": "^11.11.11",
    "next": "^16.1.6",
    "next-themes": "^0.3.0",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
    "react-icons": "^5.3.0",
    "rsuite": "^5.74.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.20",
    "eslint": "^8",
    "eslint-config-next": "^15.0.2",
    "postcss": "^8.4.47",
    "tailwindcss": "^3.4.14"
  }
}

Installation

Clone the repository

git clone <repository-url>
cd v_web_app/frontend

Install dependencies

npm install

Or with yarn:

yarn install

Configure environment variables

Create a .env.local file in the frontend directory:

.env.local

# API Configuration
NEXT_PUBLIC_API_URL=https://your-backend-api.com/api/

Environment variables prefixed with NEXT_PUBLIC_ are exposed to the browser.

Update API configuration

Edit src/app/utils/Request.api.js to use environment variables:

src/app/utils/Request.api.js

import axios from "axios";

const api = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000/api/",
});

The current implementation uses a hardcoded URL. Update it to use environment variables for production.

Build Commands

Development Mode

Run the development server with Turbopack:

npm run dev

The application will be available at http://localhost:3000.

Production Build

Build the application

npm run build

This creates an optimized production build in the .next directory.

Start the production server

npm run start

The server will start on port 3000 by default.

Next.js Configuration

The next.config.mjs file contains the application configuration:

next.config.mjs

const nextConfig = {
    images: {
        domains: ['localhost'],
    },
};

export default nextConfig;

Add your production domain to the images.domains array if you’re using Next.js Image optimization.

Deployment Platforms

Vercel (Recommended)

Install Vercel CLI

npm install -g vercel

Deploy to Vercel

vercel

Follow the prompts to configure your deployment.

Set environment variables

In the Vercel dashboard, add your environment variables:

NEXT_PUBLIC_API_URL: Your backend API URL

Docker Deployment

Create a Dockerfile in the frontend directory:

Dockerfile

FROM node:18-alpine AS base

# Install dependencies
FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app

COPY package.json package-lock.json ./
RUN npm ci

# Build the application
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

ENV NEXT_TELEMETRY_DISABLED=1

RUN npm run build

# Production image
FROM base AS runner
WORKDIR /app

ENV NODE_ENV=production
ENV NEXT_TELEMETRY_DISABLED=1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT=3000

CMD ["node", "server.js"]

Build and run the Docker container:

docker build -t password-generator-frontend .
docker run -p 3000:3000 -e NEXT_PUBLIC_API_URL=https://your-api.com/api/ password-generator-frontend

Static Export (Optional)

For static site generation:

Update next.config.mjs

next.config.mjs

const nextConfig = {
    output: 'export',
    images: {
        unoptimized: true,
    },
};

Build static files

npm run build

Static files will be generated in the out directory.

Deploy static files

Upload the out directory to any static hosting service (Netlify, GitHub Pages, etc.).

Post-Deployment

Verify Deployment

Test the application

Visit your deployed URL and verify:

Homepage loads correctly
Password generation works
User authentication functions

Check API connectivity

Open browser DevTools and check the Network tab to ensure API requests are successful.

Test responsive design

Verify the application works on mobile and desktop devices.

Troubleshooting

API Connection Issues

If the frontend cannot connect to the backend:

Verify the NEXT_PUBLIC_API_URL environment variable is set correctly
Check CORS settings in the Django backend
Ensure the backend API is accessible from your deployment environment

Build Failures

If the build fails:

# Clear Next.js cache
rm -rf .next

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

# Rebuild
npm run build

Image Optimization Errors

If you encounter image optimization errors, add your image domains to next.config.mjs:

const nextConfig = {
    images: {
        domains: ['localhost', 'your-cdn.com', 'your-backend.com'],
    },
};

Performance Optimization

Enable caching headers for static assets
Use a CDN for serving static files
Enable compression (gzip/brotli)
Monitor with Next.js Analytics or similar tools

Next Steps

Backend Deployment

Deploy the Django backend API

Environment Configuration

Configure environment variables

Get Started

Features

Python Package

Deployment

Overview

Prerequisites

Dependencies

Installation

Build Commands

Development Mode

Production Build

Next.js Configuration

Deployment Platforms

Vercel (Recommended)

Docker Deployment

Static Export (Optional)

Post-Deployment

Verify Deployment

Troubleshooting

API Connection Issues

Build Failures

Image Optimization Errors

Performance Optimization

Next Steps

Backend Deployment

Environment Configuration

​Overview

​Prerequisites

​Dependencies

​Installation

​Build Commands

​Development Mode

​Production Build

​Next.js Configuration

​Deployment Platforms

​Vercel (Recommended)

​Docker Deployment

​Static Export (Optional)

​Post-Deployment

​Verify Deployment

​Troubleshooting

​API Connection Issues

​Build Failures

​Image Optimization Errors

​Performance Optimization

​Next Steps

Backend Deployment

Environment Configuration

Overview

Prerequisites

Dependencies

Installation

Build Commands

Development Mode

Production Build

Next.js Configuration

Deployment Platforms

Vercel (Recommended)

Docker Deployment

Static Export (Optional)

Post-Deployment

Verify Deployment

Troubleshooting

API Connection Issues

Build Failures

Image Optimization Errors

Performance Optimization

Next Steps