158 lines
3.5 KiB
Markdown
158 lines
3.5 KiB
Markdown
# Game Timer
|
|
|
|
Multi-player game-timer timer with carousel navigation
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
game-timer/
|
|
├── css/ # CSS stylesheets
|
|
├── icons/ # App icons
|
|
├── images/ # Image assets
|
|
├── js/ # Symbolic link to src/js for compatibility
|
|
├── index.html # Main HTML entry point
|
|
├── manifest.json # PWA manifest
|
|
├── sw.js # Service Worker
|
|
├── src/ # Source code
|
|
│ └── js/ # JavaScript files
|
|
│ ├── core/ # Core application logic
|
|
│ ├── ui/ # UI-related code
|
|
│ └── services/ # External services integration
|
|
├── Dockerfile # Docker container definition (nginx)
|
|
├── .dockerignore # Files to exclude from Docker build
|
|
├── .env # Environment variables for production
|
|
├── .env.example # Example environment variables template
|
|
└── package.json # Project metadata and deployment scripts
|
|
```
|
|
|
|
## Environment Variables
|
|
|
|
The application uses environment variables for configuration. These are loaded from a `.env` file at runtime.
|
|
|
|
### Setting Up Environment Variables
|
|
|
|
1. Copy `.env.example` to `.env`:
|
|
```bash
|
|
cp .env.example .env
|
|
```
|
|
|
|
2. Edit the `.env` file with your own values:
|
|
```
|
|
# Public VAPID key for push notifications
|
|
PUBLIC_VAPID_KEY=your_public_vapid_key_here
|
|
|
|
# Backend URL for push notifications
|
|
BACKEND_URL=https://your-push-server.example.com
|
|
```
|
|
|
|
3. For security, never commit your `.env` file to version control. It's already included in `.gitignore`.
|
|
|
|
### Generating VAPID Keys
|
|
|
|
For push notifications, you need to generate your own VAPID keys:
|
|
|
|
```bash
|
|
npx web-push generate-vapid-keys
|
|
```
|
|
|
|
Use the public key in your `.env` file and keep the private key secure for your backend server.
|
|
|
|
# PWA Containerized Deployment
|
|
|
|
This document provides step-by-step instructions to pull the source code and deploy the Progressive Web App (PWA) using Docker on a production server.
|
|
|
|
## Prerequisites
|
|
|
|
- **Git:** Installed on your production server.
|
|
- **Docker:** Installed and running on your production server.
|
|
- **Basic Knowledge:** Familiarity with the command line.
|
|
|
|
## Steps
|
|
|
|
### 1. Clone the Repository
|
|
|
|
Log in to your production server and navigate to the directory where you want to store the project. Then run:
|
|
|
|
```bash
|
|
git clone https://gitea.virtonline.eu/2HoursProject/game-timer.git
|
|
cd game-timer
|
|
```
|
|
|
|
### 2. Build the Docker image
|
|
|
|
From the repository root, run the following command to build your Docker image:
|
|
|
|
```bash
|
|
docker build -t 'game-timer:latest' .
|
|
```
|
|
|
|
or use the npm script:
|
|
|
|
```bash
|
|
npm run docker:build
|
|
```
|
|
|
|
### 3. Run the Docker Container
|
|
|
|
Once the image is built, run the container on port 80 with:
|
|
|
|
```bash
|
|
docker run -d -p 80:80 --name game-timer game-timer:latest
|
|
```
|
|
|
|
or use the npm script:
|
|
|
|
```bash
|
|
npm run start
|
|
```
|
|
|
|
### 4. Verify the Deployment
|
|
|
|
Check if it's running:
|
|
|
|
```bash
|
|
docker ps
|
|
```
|
|
|
|
View logs (if needed):
|
|
|
|
```bash
|
|
docker logs game-timer
|
|
```
|
|
|
|
After running the container, open your web browser and navigate to:
|
|
|
|
```
|
|
http://localhost
|
|
```
|
|
|
|
### 5. Terminate
|
|
|
|
To stop your running game-timer container, use:
|
|
|
|
```bash
|
|
docker stop game-timer
|
|
docker rm game-timer
|
|
```
|
|
|
|
or use the npm script:
|
|
|
|
```bash
|
|
npm run stop
|
|
```
|
|
|
|
## Development
|
|
|
|
For local development without Docker, you can use any static file server such as:
|
|
|
|
```bash
|
|
python -m http.server
|
|
```
|
|
|
|
or
|
|
|
|
```bash
|
|
npx serve
|
|
```
|
|
|
|
This will start a local development server and you can access the application in your browser. |