Fix: Container issue (#971)

* fix: container

* Add: docker-compose & bind mount ft

* Add: .dockerignore file

* refactor: config for hot reload & set host:true

* chore: update docs

.dockerignore

@@ -1,2 +1,7 @@
 node_modules
 npm-debug.log
+config
+build
+docker-compose.yaml
+Dockerfile
+README.md

CONTRIBUTING.md

@@ -21,6 +21,11 @@ In the command line:
      2. Build the docker image with `docker build -t developer-quiz-site .`
      3. Run the docker container: `docker container run --rm -it -p 3000:3000 developer-quiz-site` or alternatively, `pnpm run start:local-docker`.
      4. Visit `localhost:3000` in a browser to view the site!
+   - Option C: Using Docker Compose
+      1. Ensure you have `Docker` and `Docker Compose` installed on your machine.
+        - Installation instructions for Docker can be found on the [official Docker docs](https://docs.docker.com/get-docker/).
+      2. Run the project with `docker-compose up`
+      3. Access the project at `http://localhost:3000` or via the host network IP address, typically `http://HOST_IP_ADDRESS:3000` 
 6. Have fun 🚀
 
 ## Guidelines for adding quiz questions

Dockerfile

@@ -1,9 +1,14 @@
 ARG BASE_REGISTRY=docker.io
 ARG BASE_IMAGE=node
-ARG BASE_TAG=18-alpine3.16
+ARG BASE_TAG=20-alpine 
 
 FROM ${BASE_REGISTRY}/${BASE_IMAGE}:${BASE_TAG}
 
+# Install git for pnpm -> yarn interop dependencies
+RUN apk add --no-cache git
+# Install pnpm package manager globally
+RUN npm install -g pnpm@9
+
 # Create app directory
 WORKDIR /usr/src/app
 
@@ -13,10 +18,14 @@ COPY package*.json ./
 
 RUN pnpm install
 
+# Install xdg-utils for `open:true` vite config - spawn xdg-open ENOENT err
+RUN apk add --update xdg-utils
+
 # Bundle app source
 COPY . .
 
 # Container listening on port 3000
 EXPOSE 3000
 
+# Start the app
 CMD [ "pnpm", "start" ]

README.md

@@ -46,6 +46,16 @@ In the command line:
 4. Run the project with `pnpm start`
 5. Have fun 🚀
 
+### Using Docker Compose
+
+Ensure you have `Docker` and `Docker Compose` installed on your machine.
+
+1. Clone the repo by typing `git clone https://github.com/YOUR-GITHUB-USERNAME/Developer_Quiz_Site.git`
+2. Then type `cd Developer_Quiz_Site` to go into the project's directory.
+3. Run the project with `docker-compose up`
+4. Access the project at `http://localhost:3000` or via the host network IP address, typically `http://HOST_IP_ADDRESS:3000`
+5. Have fun 🚀
+
 ### How to contribute
 
 This open source project is a work in progress and ever evolving.

docker-compose.yml

@@ -0,0 +1,15 @@
+version: '3.8'
+
+services:
+  app:
+    build: .
+    container_name: developer-quiz-site
+    ports:
+      - "3000:3000"
+    volumes:
+      # bind mount for hot-reloading
+      - type: bind 
+        source: .
+        target: /usr/src/app
+      # isolating node_modules to avoid conflicts
+      - /usr/src/app/node_modules

vite.config.ts

@@ -4,7 +4,11 @@ import react from "@vitejs/plugin-react";
 export default defineConfig({
   plugins: [react()],
   server: {
+    watch: {
+      usePolling: true, // required for container hot reloading
+     },
     port: 3000,
+    host: true, // fixes container xdg-open issues
     open: true
   },
   build: {