Complete testing instructions for Davane and Parth
This commit is contained in:
parent
7fe22c671a
commit
9a2eaee9b8
269
README.md
269
README.md
@ -1,14 +1,165 @@
|
||||
# Biohazard VFX Website - Next.js Modernization
|
||||
# Biohazard VFX Website
|
||||
|
||||
## Overview
|
||||
|
||||
This document details the complete modernization of the Biohazard VFX website from a static HTML/CSS/JavaScript site to a modern Next.js application with React, TypeScript, and a full content management system.
|
||||
The Biohazard VFX Website has been successfully modernized and transformed from a simple static html, js + css site into a modern Nextjs app.
|
||||
|
||||
**Date**: August 15, 2025
|
||||
**Original Site**: Static HTML/CSS/JS in `/BiohazardVFX_Website`
|
||||
**Date**: August 16, 2025
|
||||
**Original Site**: Static HTML/CSS/JS in `/BiohazardVFX_Website/deprecated/`
|
||||
**New Site**: Next.js app in `/BiohazardVFX_Website/biohazard-vfx`
|
||||
|
||||
## 🚀 What Was Accomplished
|
||||
|
||||
## How to test the app
|
||||
---
|
||||
**Davane & Parth** if you want to try it this is where I recommend starting.
|
||||
|
||||
open your shell, use `cd` to change your *directory* if need be.
|
||||
|
||||
Run:
|
||||
|
||||
1. `git clone https://git.biohazardvfx.com/BiohazardVFX/biohazard-vfx.git`
|
||||
2. `cd biohazard-vfx`
|
||||
3. `npm install`
|
||||
4. Copy `.env.example` to `.env.local` and update the environment variables:
|
||||
```bash
|
||||
cp .env.example .env.local
|
||||
```
|
||||
Then edit `.env.local` to add your UploadThing credentials if needed.
|
||||
|
||||
5. `npx prisma generate`
|
||||
6. `npx prisma migrate dev`
|
||||
7. `npx tsx prisma/seed.ts`
|
||||
8. `npm run dev`
|
||||
|
||||
The site will be available at: http://localhost:3000
|
||||
|
||||
### Accessing the Admin Dashboard
|
||||
|
||||
1. Navigate to: http://localhost:3000/admin/login
|
||||
2. Login with:
|
||||
- Email: `admin@biohazardvfx.com`
|
||||
- Password: `biohazardadmin2025!`
|
||||
|
||||
### Testing Database Functionality
|
||||
|
||||
All content (projects, blog posts, team members, FAQs) should now be fully editable through the admin CMS:
|
||||
|
||||
1. **Projects**: Go to Admin → Projects to create, edit, or delete projects
|
||||
2. **Blog Posts**: Go to Admin → Blog to create, edit, or delete blog posts
|
||||
3. **Team Members**: Go to Admin → Team to create, edit, or delete team members
|
||||
4. **FAQs**: Go to Admin → FAQ to create, edit, or delete FAQs
|
||||
|
||||
### Verifying Content Changes
|
||||
|
||||
After making changes in the admin panel:
|
||||
1. Visit the public pages to verify your changes appear
|
||||
2. Check that all content is properly saved to the database
|
||||
3. Test file uploads for images and videos
|
||||
|
||||
### Database Verification
|
||||
|
||||
To verify the database is working correctly:
|
||||
```bash
|
||||
# View database content
|
||||
npx prisma studio
|
||||
|
||||
# This will open a web interface where you can see all content
|
||||
# stored in the database including projects, blog posts, etc.
|
||||
```
|
||||
|
||||
## Deployment considerations
|
||||
|
||||
### Environment Variables
|
||||
|
||||
Create a `.env.production` file with:
|
||||
|
||||
```env
|
||||
DATABASE_URL="your-production-database-url"
|
||||
NEXTAUTH_URL="https://biohazardvfx.com"
|
||||
NEXTAUTH_SECRET="generate-a-secure-secret"
|
||||
WEB3FORMS_ACCESS_KEY="your-web3forms-key"
|
||||
UPLOADTHING_SECRET="your-uploadthing-secret"
|
||||
UPLOADTHING_APP_ID="your-uploadthing-app-id"
|
||||
```
|
||||
|
||||
### Database
|
||||
|
||||
* Consider migrating from SQLite to PostgreSQL for production
|
||||
* Set up automated backups
|
||||
* Implement database migrations strategy
|
||||
|
||||
### Hosting Options
|
||||
|
||||
* **Vercel** - Optimal for Next.js apps
|
||||
* **Netlify** - Good alternative
|
||||
* **Self-hosted** - Using Node.js server
|
||||
|
||||
### CDN & Media
|
||||
|
||||
* Consider CDN for video content
|
||||
* Optimize image delivery
|
||||
* Implement proper caching headers
|
||||
|
||||
## Deploying on Truenas Scale Dragonfish as a Custom App
|
||||
|
||||
### 1. Build a Slim Image
|
||||
|
||||
* Add to `next.config.js`:
|
||||
|
||||
```js
|
||||
module.exports = { output: 'standalone' }
|
||||
```
|
||||
### TLDR:
|
||||
* Run `npm run build`. Next.js emits `.next/standalone/` which is a minimal Node server with only needed deps.
|
||||
* Your Dockerfile should copy `.next/standalone` and run `node server.js`.
|
||||
|
||||
### 2. Container Registry
|
||||
|
||||
Since the repo is hosted on **git.biohazardvfx.com (Gitea)**, use its built-in Container Registry:
|
||||
|
||||
```bash
|
||||
# login to your Gitea registry
|
||||
docker login git.biohazardvfx.com
|
||||
|
||||
# build & tag
|
||||
docker build -t git.biohazardvfx.com/<owner>/<image>:prod .
|
||||
|
||||
# push
|
||||
docker push git.biohazardvfx.com/<owner>/<image>:prod
|
||||
```
|
||||
|
||||
* `<owner>` = your Gitea user/org (e.g. `biohazardvfx`).
|
||||
* This makes the image available at `git.biohazardvfx.com/<owner>/<image>:prod`.
|
||||
|
||||
### 3. TrueNAS SCALE Custom App
|
||||
|
||||
* **Image**: `git.biohazardvfx.com/<owner>/<image>:prod`
|
||||
* **Command**: leave default (`node server.js` from Dockerfile)
|
||||
* **Env Vars**: mirror `.env.production`
|
||||
* **Ports**: expose container 3000 → NodePort (e.g. 31000)
|
||||
* **Storage**: add Host Path volume:
|
||||
|
||||
* Host path: `/mnt/tank/apps/your-next/cache`
|
||||
* Mount path: `/app/.next/cache`
|
||||
* Purpose: persist ISR/data cache so it survives restarts.
|
||||
|
||||
### 4. Reverse Proxy
|
||||
|
||||
* Use **Nginx Proxy Manager** to map `biohazardvfx.com` → `NAS-IP:31000`.
|
||||
* Ensure websocket headers pass through (NPM defaults handle this).
|
||||
|
||||
### 5. Notes & Gotchas
|
||||
|
||||
* Ensure `git.biohazardvfx.com` registry has valid TLS.
|
||||
* Use Gitea Personal Access Token for `docker login` if password auth is locked.
|
||||
* Permissions: container must write to `/app/.next/cache` (adjust dataset perms if needed).
|
||||
* For multiple replicas: use a shared cache mechanism (S3/Redis). For single replica: Host Path is fine.
|
||||
|
||||
**Checklist:**
|
||||
|
||||
1. Build standalone Next.js → 2. Push to Gitea Registry → 3. Configure SCALE Custom App (image/env/ports/storage) → 4. Proxy through Nginx Proxy Manager → 5. Test ISR persistence.
|
||||
|
||||
## What Was Accomplished
|
||||
|
||||
### 1. **Complete Technology Stack Upgrade**
|
||||
|
||||
@ -109,7 +260,9 @@ biohazard-vfx/
|
||||
│ │ └── Providers.tsx # Auth providers
|
||||
│ ├── lib/ # Utilities
|
||||
│ │ ├── auth.ts # NextAuth configuration
|
||||
│ │ └── prisma.ts # Prisma client
|
||||
│ │ ├── prisma.ts # Prisma client
|
||||
│ │ ├── uploadthing.ts # UploadThing integration
|
||||
│ │ └── metadata.ts # SEO metadata utilities
|
||||
│ └── types/ # TypeScript definitions
|
||||
│ ├── index.ts # Data models
|
||||
│ └── next-auth.d.ts # Auth types
|
||||
@ -121,6 +274,8 @@ biohazard-vfx/
|
||||
│ ├── images/ # Image files
|
||||
│ ├── videos/ # Video files
|
||||
│ └── projects/ # Project assets
|
||||
├── docs/ # Documentation
|
||||
│ └── session-summary.md # Development session summaries
|
||||
└── Configuration files
|
||||
├── next.config.js # Next.js config
|
||||
├── tailwind.config.js # Tailwind CSS config
|
||||
@ -243,105 +398,3 @@ All 8 projects from the original site have been preserved:
|
||||
- **Enhanced Security**: Improved authentication checks for all admin operations
|
||||
- **Upload Integration**: Fixed file upload functionality with proper authentication
|
||||
|
||||
## 📋 What Needs to Be Done Next
|
||||
|
||||
### High Priority
|
||||
|
||||
1. **ESLint Configuration**
|
||||
- Resolve remaining ESLint errors throughout the codebase
|
||||
- Update ESLint configuration for Next.js 15 compatibility
|
||||
- Address TypeScript typing issues
|
||||
- Fix undefined variable references
|
||||
|
||||
2. **Build Process**
|
||||
- Resolve build warnings and errors
|
||||
- Fix Next.js configuration issues
|
||||
- Address component import errors
|
||||
- Ensure successful production build
|
||||
|
||||
3. **Testing & Verification**
|
||||
- Test all admin CRUD operations
|
||||
- Verify file upload functionality
|
||||
- Confirm database connectivity
|
||||
- Validate authentication flow
|
||||
|
||||
### Medium Priority
|
||||
|
||||
4. **Authentication Enhancement**
|
||||
- Add password reset functionality
|
||||
- Implement role-based permissions
|
||||
- Add session management UI
|
||||
- Create user profile editing
|
||||
|
||||
5. **Content Versioning System**
|
||||
- Implement version history for blog posts
|
||||
- Add version history for projects
|
||||
- Create rollback functionality
|
||||
|
||||
6. **SEO Optimization**
|
||||
- Add sitemap generation
|
||||
- Implement blog RSS feed
|
||||
- Add Open Graph images
|
||||
- Create robots.txt
|
||||
|
||||
7. **Performance Optimization**
|
||||
- Implement image optimization pipeline
|
||||
- Add caching strategies
|
||||
- Optimize video loading
|
||||
- Implement lazy loading for projects
|
||||
|
||||
### Low Priority
|
||||
|
||||
8. **Enhanced Features**
|
||||
- Add project filtering/search
|
||||
- Implement newsletter signup
|
||||
- Create client portal
|
||||
- Add testimonials section
|
||||
|
||||
9. **Testing & Documentation**
|
||||
- Write unit tests for components
|
||||
- Add integration tests
|
||||
- Create API documentation
|
||||
- Write deployment guide
|
||||
|
||||
## 🚀 Deployment Considerations
|
||||
|
||||
### Environment Variables
|
||||
Create a `.env.production` file with:
|
||||
```env
|
||||
DATABASE_URL="your-production-database-url"
|
||||
NEXTAUTH_URL="https://biohazardvfx.com"
|
||||
NEXTAUTH_SECRET="generate-a-secure-secret"
|
||||
WEB3FORMS_ACCESS_KEY="your-web3forms-key"
|
||||
UPLOADTHING_SECRET="your-uploadthing-secret"
|
||||
UPLOADTHING_APP_ID="your-uploadthing-app-id"
|
||||
```
|
||||
|
||||
### Database
|
||||
- Consider migrating from SQLite to PostgreSQL for production
|
||||
- Set up automated backups
|
||||
- Implement database migrations strategy
|
||||
|
||||
### Hosting Options
|
||||
- **Vercel** - Optimal for Next.js apps
|
||||
- **Netlify** - Good alternative
|
||||
- **Self-hosted** - Using Node.js server
|
||||
|
||||
### CDN & Media
|
||||
- Consider CDN for video content
|
||||
- Optimize image delivery
|
||||
- Implement proper caching headers
|
||||
|
||||
## 🎯 Summary
|
||||
|
||||
The Biohazard VFX website has been successfully modernized from a static site to a dynamic, database-driven Next.js application. The new architecture provides:
|
||||
|
||||
- **Better maintainability** through component-based structure
|
||||
- **Enhanced performance** with modern optimization techniques
|
||||
- **Improved developer experience** with TypeScript and hot reload
|
||||
- **Content management capabilities** through the admin dashboard
|
||||
- **Scalability** for future features and growth
|
||||
|
||||
The database functionality has been fixed and all content (projects, blog posts, team members, FAQs) is now properly managed through the admin CMS. API routes have been corrected to support full CRUD operations. The foundation is now in place for a modern, professional web presence that can grow with the company's needs while maintaining the original aesthetic and brand identity.
|
||||
|
||||
**Note**: The application currently has ESLint configuration issues that need to be resolved for a successful production build. These issues are being addressed as the next priority.
|
||||
Loading…
x
Reference in New Issue
Block a user