added build pipelines

404 fix

.dockerignore

@@ -0,0 +1 @@
+frontend

.github/workflows/release.yml

@@ -0,0 +1,31 @@
+name: Build Docker image and push to release
+
+on:
+  push:
+    # Sequence of patterns matched against refs/tags
+    tags:
+    - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    steps:
+      -
+        name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      -
+        name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      -
+        name: Login to Docker Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ secrets.REGISTRY_URL }}
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+      -
+        name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          push: true
+          tags: registry.beammp.com/beammp/website:${{ github.ref_name }}

.github/workflows/staging.yml

@@ -0,0 +1,30 @@
+name: Build Docker image and push to staging
+
+on:
+  push:
+    branches:
+      - "dev"
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    steps:
+      -
+        name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      -
+        name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      -
+        name: Login to Docker Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ secrets.REGISTRY_URL }}
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+      -
+        name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          push: true
+          tags: registry.beammp.com/beammp/website:staging

.gitignore

@@ -102,30 +102,3 @@ dist
 
 # TernJS port file
 .tern-port
-*.exe
-*.zip
-
-# Logs
-frontend/logs
-frontend/*.log
-frontend/npm-debug.log*
-frontend/yarn-debug.log*
-frontend/yarn-error.log*
-frontend/pnpm-debug.log*
-frontend/lerna-debug.log*
-
-frontend/node_modules
-frontend/dist
-frontend/dist-ssr
-frontend/*.local
-
-# Editor directories and files
-frontend/.vscode/*
-frontend/!.vscode/extensions.json
-frontend/.idea
-frontend/.DS_Store
-frontend/*.suo
-frontend/*.ntvs*
-frontend/*.njsproj
-frontend/*.sln
-frontend/*.sw?

.prettierignore

@@ -1,6 +0,0 @@
-node_modules
-dist
-*.log
-.DS_Store
-pnpm-lock.yaml
-package-lock.json

.prettierrc

@@ -1,11 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "useTabs": false,
-  "trailingComma": "es5",
-  "printWidth": 100,
-  "arrowParens": "always",
-  "endOfLine": "lf",
-  "vueIndentScriptAndStyle": false
-}

Dockerfile

@@ -1,23 +1,25 @@
-# Step 1: Build stage
+FROM node:18.16.0-alpine3.17
-FROM node:22-alpine3.21 AS build
 
+# Create app directory
 WORKDIR /app
-COPY package*.json ./
-RUN npm ci
-COPY . .
-ENV NODE_ENV=development
-RUN npm run build
 
-# Step 2: Serve stage
+RUN apk --no-cache add curl
-FROM nginx:alpine
 
-# Copy built files from the previous stage
+# Install app dependencies
-COPY --from=build /app/dist /usr/share/nginx/html
+# A wildcard is used to ensure both package.json AND package-lock.json are copied
+# where available (npm@5+)
+COPY package*.json /app
 
-# Add a custom Nginx configuration
+# General Install of Deps
-COPY nginx.conf /etc/nginx/conf.d/default.conf
+# RUN npm install
+# If you are building your code for production
+RUN npm ci --only=production
 
-# Expose port 80
+# Bundle app source
-EXPOSE 80
+COPY . /app
 
-CMD ["nginx", "-g", "daemon off;"]
+EXPOSE 3599
+
+HEALTHCHECK CMD curl --fail http://localhost:3599/ping || exit 1
+
+CMD [ "node", "index.js" ]

README.md

@@ -1,129 +1 @@
-# BeamMP Website (Frontend)
+# BeamMP-Website
-
-This repository is home for the BeamMP website, this is a rebuild of the website from the ground up using Vue+Vite. We are also making use of Tailwindcss v4.
-
-**Tech Stack**
-- **Framework:** Vue 3 (`vue`, `vue-router`)
-- **Build:** Vite 7 (`vite`, `@vitejs/plugin-vue`)
-- **Styling:** Tailwind CSS 4 + `tailwindcss-animate`, `tailwind-merge`
-- **UI Icons/Utils:** `lucide-vue-next`, `clsx`, `class-variance-authority`
-- **Radix-style Components:** `reka-ui` through `shadcn-vue`
-- **Composable utilities:** `@vueuse/core`
-
-**Theming and Colour Guide**
-- BeamMP Orange `#F36D24`
-- BeamMP Blue `#4470B6`
-- BeamMP Green `#1D9749`
-- Gray `#333333`
-- Black `#000000`
-- White `#FFFFFF`
-
-## Getting Started
-
-Prerequisites:
-- Node.js 22+
-- pnpm, npm, or yarn (examples use npm)
-
-Install dependencies and run the dev server:
-
-```powershell
-# from this folder (repo root)
-npm install
-npm run dev
-```
-
-Build for production and preview locally:
-
-```powershell
-npm run build
-npm run preview
-```
-
-Vite will print the local dev URL (usually `http://localhost:5173`).
-
-## Project Scripts
-- `npm run dev`: Start Vite development server
-- `npm run build`: Production build
-- `npm run preview`: Preview the production build locally
-- `npm run lint`: Lint and auto-fix Vue/JS files with ESLint
-- `npm run format`: Format all source files with Prettier
-
-## Directory Overview
-- `src/` – App source (styles, components, pages, routing)
-	- `src/components/ui/` – UI components (e.g., `button`, `navigation-menu`)
-	- `src/lib/` – Utilities and helpers
-	- `routes/` - vue-router routes
-	- `views/` - Pages of the website
-- `index.html` – Vite HTML entry
-- `tailwind.config.js` – Tailwind configuration
-- `vite.config.js` – Vite configuration
-- `components.json` – Shadcn-Vue component registry
-
-## Styling and UI
-- **Tailwind CSS 4** is set up via `tailwind.config.js` and imported in `src/style.css`.
-- **reka-ui** and shadcn-vue-style patterns are used for accessible, composable UI.
-- **lucide-vue-next** provides icons.
-
-## Adding New UI Components (shadcn-vue)
-We’re standardizing on shadcn-vue-compatible components for consistency. Use the CLI to add new components:
-
-```powershell
-npx shadcn-vue@latest add <component>
-
-# examples
-npx shadcn-vue@latest add button
-npx shadcn-vue@latest add navigation-menu
-```
-
-The CLI reads `components.json` and will scaffold files under `src/components/ui/`.
-
-## Routing
-Use `vue-router` for navigation. Keep routes co-located with views and prefer lazy-loaded routes for large pages.
-
-## Contributing
-We welcome contributions! Here’s how to get started.
-
-### 1) Pick an Issue or Open One
-- Browse issues or propose an enhancement/bug. Share context and repro steps.
-
-### 2) Create a Branch
-- Use a descriptive branch name:
-	- `feature/<short-description>`
-	- `fix/<short-description>`
-	- `docs/<short-description>`
-
-### 3) Dev Environment
-- Install deps with `npm install` and run `npm run dev`.
-- Keep changes scoped and focused; avoid drive-by refactors unless agreed.
-
-### 4) Code Style & Patterns
-- **Vue 3 + `<script setup>`** preferred for new components.
-- **Linting**: Run `npm run lint` before committing to catch errors. ESLint is configured for Vue 3 best practices.
-- **Formatting**: Run `npm run format` to auto-format code with Prettier (or use an editor extension).
-- **Type safety**: If/when TypeScript is introduced, prefer explicit props and emits.
-- **Tailwind**: Use utility classes; extract variants with `class-variance-authority` when patterns repeat.
-- **Accessibility**: Prefer accessible primitives (e.g., `reka-ui`) and keyboard support.
-- **File naming**: `PascalCase.vue` for components; avoid one-letter variable names.
-
-### 5) Testing & Checks
-- Run the app locally and verify core flows.
-- Ensure components render on both light/dark themes if relevant.
-- If you add dependencies, update this README and relevant configs.
-
-### 6) Commit & PR
-- Write clear, imperative commit messages, e.g., `feat: add NavigationMenu component`.
-- Open a PR describing the problem, solution, screenshots if UI changes, and any follow-ups.
-- Link related issues. Keep PRs small; big changes should be split.
-
-## Environment & Configuration
-- Tailwind and Vite are preconfigured. If you need globals, add them in `vite.config.js`.
-- For icons, use `lucide-vue-next` and keep icon size consistent via props/classes.
-- If adding new pages, prefer code-splitting with dynamic imports.
-
-## FAQ
-- “Why Vite?” Fast dev server, optimized builds, and great Vue tooling.
-- “Can I use Yarn or pnpm?” Yes—adjust commands accordingly.
-- “Design system?” We favor shadcn-vue patterns + Tailwind + reka-ui primitives for consistent UI.
-
-## License
-Unless otherwise noted in the root repository, this project follows the BeamMP website’s standard license. If clarifications are needed, open an issue and we will update this section.

components.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://shadcn-vue.com/schema.json",
-  "style": "new-york",
-  "typescript": false,
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "src/style.css",
-    "baseColor": "gray",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "iconLibrary": "lucide",
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "composables": "@/composables"
-  },
-  "registries": {}
-}

eslint.config.js

@@ -1,74 +0,0 @@
-import pluginVue from 'eslint-plugin-vue'
-import js from '@eslint/js'
-import prettier from 'eslint-plugin-prettier'
-import configPrettier from 'eslint-config-prettier'
-
-export default [
-  // Ignore patterns (replaces .eslintignore)
-  {
-    ignores: ['node_modules', 'dist', '*.log', '.DS_Store'],
-  },
-
-  // Base JavaScript config
-  js.configs.recommended,
-
-  // Vue 3 recommended config
-  ...pluginVue.configs['flat/recommended'],
-
-  // Global configuration
-  {
-    plugins: {
-      prettier,
-    },
-    languageOptions: {
-      ecmaVersion: 'latest',
-      sourceType: 'module',
-      globals: {
-        // Browser globals
-        window: 'readonly',
-        document: 'readonly',
-        navigator: 'readonly',
-        console: 'readonly',
-        localStorage: 'readonly',
-        fetch: 'readonly',
-        alert: 'readonly',
-        prompt: 'readonly',
-        getComputedStyle: 'readonly',
-        // Node globals
-        process: 'readonly',
-        __dirname: 'readonly',
-        __filename: 'readonly',
-        module: 'readonly',
-        require: 'readonly',
-      },
-    },
-    rules: {
-      // Prettier integration
-      ...configPrettier.rules,
-      'prettier/prettier': 'error',
-
-      // Vue-specific rules
-      'vue/multi-word-component-names': 'off',
-      'vue/no-v-html': 'warn',
-      'vue/require-default-prop': 'off',
-      'vue/require-prop-types': 'warn',
-      'vue/component-name-in-template-casing': ['error', 'PascalCase'],
-      'vue/html-self-closing': [
-        'error',
-        {
-          html: {
-            void: 'always',
-            normal: 'always',
-            component: 'always',
-          },
-        },
-      ],
-
-      // General JavaScript rules
-      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-      'prefer-const': 'error',
-      'no-var': 'error',
-    },
-  },
-]

example.env

@@ -0,0 +1,3 @@
+INSTANCES=3
+DEBUG=false
+PORT=3000

index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>BeamMP Website Loading..</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>

index.js

@@ -0,0 +1,93 @@
+#!/usr/bin/env node
+
+/*
+ * oooooooooo.                                        ooo        ooooo ooooooooo.   
+ * `888'   `Y8b                                       `88.       .888' `888   `Y88. 
+ *  888     888  .ooooo.   .oooo.   ooo. .oo.  .oo.    888b     d'888   888   .d88' 
+ *  888oooo888' d88' `88b `P  )88b  `888P"Y88bP"Y88b   8 Y88. .P  888   888ooo88P'  
+ *  888    `88b 888ooo888  .oP"888   888   888   888   8  `888'   888   888         
+ *  888    .88P 888    .o d8(  888   888   888   888   8    Y     888   888         
+ * o888bood8P'  `Y8bod8P' `Y888""8o o888o o888o o888o o8o        o888o o888o                                                                                     
+ *  ========================================================================
+ *  Copyright (c) 2019-2023 BeamMP Ltd. All rights reserved.
+ */
+
+require('dotenv').config()
+const pkg = require('./package.json')
+const chalk = require('chalk');
+const cluster = require('cluster');
+
+const error = chalk.bold.keyword('red');
+const warn = chalk.keyword('orange');
+const good = chalk.keyword('lime');
+
+process.on('warning', (warning) => {
+	console.log(warning.stack);
+});
+
+if (cluster.isMaster) {
+
+	const env = process.env.NODE_ENV || 'development'
+
+	console.log('oooooooooo.                                        ooo        ooooo ooooooooo.   ')
+	console.log('`888\'   `Y8b                                       `88.       .888\' `888   `Y88. ')
+	console.log(' 888     888  .ooooo.   .oooo.   ooo. .oo.  .oo.    888b     d\'888   888   .d88\' ')
+	console.log(' 888oooo888\' d88\' `88b `P  )88b  `888P"Y88bP"Y88b   8 Y88. .P  888   888ooo88P\'  ')
+	console.log(' 888    `88b 888ooo888  .oP"888   888   888   888   8  `888\'   888   888         ')
+	console.log(' 888    .88P 888    .o d8(  888   888   888   888   8    Y     888   888         ')
+	console.log('o888bood8P\'  `Y8bod8P\' `Y888""8o o888o o888o o888o o8o        o888o o888o        ')
+	console.log('=================================================================================')
+	console.log('Website v' + pkg.version + ' Copyright (C) 2019-2024 BeamMP Ltd')
+	console.log('')
+	console.log('Running in: ' + env)
+	console.log('Server Time: ' + new Date())
+
+	function start() {
+		process.title = pkg.name + "@" + pkg.version;
+
+
+		if (cluster.isMaster) {
+			console.log(`Master PID: ${process.pid}`)
+			console.log(`Creating ${process.env.INSTANCES} Instances of the Website Backend`)
+			for (let i = 0; i < process.env.INSTANCES; i++) {
+				cluster.fork();
+			}
+			// set console's directory so we can see output from workers
+			console.dir(cluster.workers, { depth: 0 });
+
+			cluster.on('exit', (worker, code) => {
+				// Good exit code is 0 :))
+				// exitedAfterDisconnect ensures that it is not killed by master cluster or manually
+				// if we kill it via .kill or .disconnect it will be set to true
+				// \x1b[XXm represents a color, and [0m represent the end of this 
+				//color in the console ( 0m sets it to white again )
+				if (code !== 0 && !worker.exitedAfterDisconnect) {
+					console.error(`\x1b[34mWorker ${worker.process.pid} crashed... Starting a new worker...\x1b[0m`);
+					const nw = cluster.fork();
+					console.error(`\x1b[32mWorker ${nw.process.pid} will replace him \x1b[0m`);
+				}
+			});
+		} else {
+			console.error('FATAL: This script can only be run as a master process.')
+		}
+	}
+
+	start()
+} else {
+	const ws = require('./src/webserver')
+
+	try {
+		ws.init(function (err) {
+      if (err) {
+        console.error(err)
+        return
+      }
+
+      ws.listen(function () {
+        console.info('BeamMP Website Ready')
+      })
+    })
+	}	catch (e) {
+		throw e;
+	}
+}

jsconfig.json

@@ -1,8 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  }
-}

nginx.conf

@@ -1,22 +0,0 @@
-server {
-    listen 80;
-
-    server_name _;
-
-    root /usr/share/nginx/html;
-
-    index index.html;
-
-    location / {
-        # SPA fallback: serve index.html for non-file routes so Vue Router can render NotFound
-        try_files $uri $uri/ /index.html;
-    }
-
-    # Let real 404s for assets return 404s; Vue handles route-level 404 via the SPA fallback above.
-
-    location /static/ {
-        # Serve static files directly
-        expires max;
-        access_log off;
-    }
-}

package.json

@@ -1,37 +1,29 @@
 {
   "name": "beammp-website",
-  "private": true,
+  "version": "1.1.1",
-  "version": "2.0.0",
+  "description": "BeamMP Website",
-  "type": "module",
+  "main": "index.js",
   "scripts": {
-    "dev": "vite",
+    "docker-build": "docker build -t 192.168.100.6:5000/beammp/website:latest -t 192.168.100.6:5000/beammp/website:1.1.1 .",
-    "build": "vite build",
+    "docker-push": "docker push 192.168.100.6:5000/beammp/website:latest"
-    "preview": "vite preview",
-    "lint": "eslint . --fix",
-    "format": "prettier --write \"src/**/*.{js,vue,css,json}\""
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BeamMP/BeamMP-Website.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/BeamMP/BeamMP-Website/issues"
+  },
+  "homepage": "https://github.com/BeamMP/BeamMP-Website#readme",
   "dependencies": {
-    "@tailwindcss/vite": "^4.1.17",
+    "body-parser": "^1.19.0",
-    "@vueuse/core": "^14.1.0",
+    "chalk": "^3.0.0",
-    "class-variance-authority": "^0.7.1",
+    "dotenv": "^16.0.3",
-    "clsx": "^2.1.1",
+    "ejs": "^3.0.1",
-    "lucide-vue-next": "^0.555.0",
+    "express": "^4.17.1",
-    "reka-ui": "^2.6.0",
+    "helmet": "^6.1.5",
-    "tailwind-merge": "^3.4.0",
+    "morgan": "^1.10.0"
-    "tailwindcss": "^4.1.17",
-    "tailwindcss-animate": "^1.0.7",
-    "vue": "^3.5.25",
-    "vue-router": "^4.6.3"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.2",
-    "@vue/eslint-config-prettier": "^10.2.0",
-    "eslint": "^9.39.1",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-vue": "^10.6.2",
-    "prettier": "^3.7.3",
-    "tw-animate-css": "^1.4.0",
-    "vite": "^7.2.4"
   }
 }