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:

   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:

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:

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:

docker build -t 'game-timer:latest' .

or use the npm script:

npm run docker:build

3. Run the Docker Container

Once the image is built, run the container on port 80 with:

docker run -d -p 80:80 --name game-timer game-timer:latest

or use the npm script:

npm run start

4. Verify the Deployment

Check if it's running:

docker ps

View logs (if needed):

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:

docker stop game-timer
docker rm game-timer

or use the npm script:

npm run stop

Development

For local development without Docker, you can use any static file server such as:

python -m http.server

or

npx serve

This will start a local development server and you can access the application in your browser.