[chore] Sett opp Apache-hosting på VM (#22)

README.md

@@ -1,18 +1,20 @@
 # T28 - Project 2: Search for Countries
 
+[Open the deployed app](http://it2810-28.idi.ntnu.no/project2/) — requires the NTNU network or VPN.
+
 Repository for team IT2810-H26-T28, Project 2.
 
 ## About the Project
 
-The application allows users to search, filter, and sort through a catalogue of countries around the world, as well as explore detailed information about each country (e.g. capital, continent, languages, population, area, and flag). Users should also be able to add their own data related to countries (whether they have visited or want to visit a country), which will be stored persistently on the server.
+The application allows users to search, filter, and sort through a catalogue of countries around the world, as well as explore detailed information about each country (e.g. capital, continent, languages, population, area, and flag). Users can mark countries as visited or want to visit, with statuses stored persistently on the server.
 
 The project is being developed in stages. The frontend is built with React and TypeScript, and communicates with a GraphQL backend backed by PostgreSQL.
 
 The dataset also includes more than 34,000 cities linked to their respective countries, allowing the application to be tested with a larger dataset.
 
 ## Status
 
-The project is under active development. The frontend uses Apollo Client to fetch country data from the GraphQL backend, which retrieves data from PostgreSQL. The backend is hosted on the group's NTNU VM and managed using systemd.
+The project is under active development. The frontend uses Apollo Client to fetch country data from the GraphQL backend, which retrieves data from PostgreSQL. The frontend is served by Apache under `/project2/` on the group's NTNU VM, and the backend is managed using systemd.
 
 Users can mark countries as visited or want to visit. The data is stored in the database and linked to an anonymous ID per browser, so no login is required.
 
@@ -28,7 +30,7 @@ Users can mark countries as visited or want to visit. The data is stored in the
 - Quiz attempts are saved in the browser's IndexedDB and can be viewed on the quiz results page.
 - Loading, error, and empty-result states for searches and data updates.
 - Apollo Client integration and cache policies for GraphQL queries and paginated results.
-- PostgreSQL database and GraphQL backend hosted on the group's NTNU VM; the backend runs as a systemd service.
+- Frontend hosted by Apache under `/project2/`, with PostgreSQL and the GraphQL backend on the same NTNU VM; the backend runs as a systemd service.
 - **Accessibility and sustainable web development**: Accessibility testing has covered keyboard navigation, VoiceOver, and Lighthouse. The app uses semantic HTML and ARIA where necessary. We also make conscious choices regarding data usage, caching, and performance to reduce unnecessary resource consumption. See our [Accessibility and Sustainability Plan](docs/planAccessibilityAndSustainability.md).
 
 ## User data and anonymous browser ID
@@ -62,7 +64,7 @@ To support larger datasets, searching, filtering, and pagination are handled by
 
 The city dataset provides a larger set of records for evaluating database queries and scalability.
 
-For deployment details, see [Backend Deployment](docs/backendDeployment.md).
+For deployment details, see [Deployment on the NTNU VM](docs/backendDeployment.md).
 
 ## Pagination and Caching
 
@@ -76,7 +78,7 @@ This is expected Apollo Client cache behavior and helps avoid unnecessary networ
 
 ### Prerequisites
 
-- Node.js 24+ and npm
+- Node.js 24 and npm
 - Access to the NTNU network or VPN to connect to the deployed backend
 
 To run the frontend using the deployed backend, no direct database access or SSH access to the VM is required.
@@ -90,7 +92,7 @@ npm ci
 Connect to the NTNU network or VPN and create a `.env.local` file in the repository root:
 
 ```env
-VITE_GRAPHQL_URL=http://it2810-28.idi.ntnu.no:3001/graphql
+VITE_GRAPHQL_URL=http://it2810-28.idi.ntnu.no:3001/
 ```
 
 Start the frontend:
@@ -99,17 +101,25 @@ Start the frontend:
 npm run dev
 ```
 
-Open [http://localhost:5173/](http://localhost:5173/) in your browser. The frontend uses the deployed backend, so you do not need database credentials or SSH access to the VM.
+Open [http://localhost:5173/project2/](http://localhost:5173/project2/) in your browser. The frontend uses the deployed backend, so you do not need database credentials or SSH access to the VM.
 
 To develop the backend locally, see [Database Setup](docs/databaseSetup.md) for the required database configuration and SSH tunnel instructions.
 
-### Backend Deployment (NTNU VM)
+### Deployment (NTNU VM)
+
+Apache serves the production frontend at `/project2/` on `it2810-28.idi.ntnu.no`. The GraphQL backend and PostgreSQL database run on the same VM.
 
-The GraphQL backend and PostgreSQL database are hosted on the group's NTNU VM (`it2810-28.idi.ntnu.no`).
+The backend runs as the `t28-backend` systemd service, allowing it to continue running after SSH logout and start automatically when the VM boots. The browser connects directly to the GraphQL API on port 3001.
 
-The backend runs as a systemd service (`t28-backend`), allowing it to continue running after SSH logout and start automatically when the VM boots.
+The frontend uses `base: '/project2/'` in `vite.config.ts`. Build it with the deployed API address:
 
-For instructions on configuring, restarting, and monitoring the backend service, see [Backend Deployment](docs/backendDeployment.md).
+```bash
+VITE_GRAPHQL_URL=http://it2810-28.idi.ntnu.no:3001/ npm run build
+```
+
+The API address is embedded at build time. Changing it requires rebuilding and uploading the frontend again.
+
+See [Deployment on the NTNU VM](docs/backendDeployment.md) for upload instructions, Apache configuration, backend updates, and verification from another machine.
 
 ### Other Commands
 
@@ -191,6 +201,8 @@ Examples include working with React and TypeScript, understanding GraphQL querie
 
 AI has also been used to help troubleshoot backend deployment on the NTNU VM, configure the systemd service, resolve Git-related issues, and improve technical documentation, including the README.
 
+For the Apache deployment in #22, ChatGPT provided step-by-step deployment guidance, suggested Apache configuration and an HTTP-compatible replacement for `crypto.randomUUID()`, and drafted deployment documentation. We applied the changes and checked them with ESLint, Prettier, the existing 34 frontend tests, a production build, Apache configuration and HTTP checks, and manual loading of the deployed app.
+
 Using AI to explain concepts and provide feedback on our own code has helped us better understand the technologies used in this project. It has also made debugging and troubleshooting more efficient, particularly when working with unfamiliar tools and configurations.
 
 All AI-generated suggestions have been reviewed and evaluated before being applied, and the group remains responsible for the final implementation.
@@ -211,10 +223,11 @@ data/
 └── countries.json
 
 deploy/
+├── project2.conf        # Apache configuration for /project2
 └── t28-backend.service   # systemd service configuration
 
 docs/
-├── backendDeployment.md  # Backend deployment on NTNU VM
+├── backendDeployment.md  # Frontend and backend deployment on NTNU VM
 ├── databaseSetup.md
 ├── design.md
 └── planAccessibilityAndSustainability.md
@@ -260,7 +273,7 @@ cd backend
 npm run db:seed
 ```
 
-The seed script can be run multiple times without creating duplicate records. The script also creates the `user_country` table for user-generated data. Existing user data is never overwritten when the script runs again.
+The seed script can be run multiple times without creating duplicate records. The script also creates the `user_country` table for user-generated data. Existing rows in `user_country` are preserved, but the legacy `user_country_status` table is dropped if it exists. Review the script before reseeding an existing database; see [Deployment on the NTNU VM](docs/backendDeployment.md).
 
 ## Sustainability Measures and Evaluation
 

deploy/project2.conf

@@ -0,0 +1,11 @@
+<Directory /var/www/html/project2>
+    Options -Indexes -MultiViews
+    AllowOverride None
+    Require all granted
+    DirectoryIndex index.html
+    FallbackResource /project2/index.html
+</Directory>
+
+<Directory /var/www/html/project2/assets>
+    FallbackResource disabled
+</Directory>