changes for Docker and view count displays

.gitignore

@@ -12,6 +12,8 @@ node_modules
 dist
 dist-ssr
 *.local
+docker*
+Dockerfile
 
 # Editor directories and files
 .vscode/*
@@ -23,6 +25,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-
 .claude/*
 .cursor/*

Dockerfile

@@ -3,6 +3,9 @@ FROM node:22-alpine AS build
 
 WORKDIR /app
 
+ARG BACKEND_URL
+ENV VITE_BACKEND_URL=$BACKEND_URL
+
 COPY package.json package-lock.json ./
 RUN npm ci
 
@@ -17,14 +20,16 @@ RUN rm /etc/nginx/conf.d/default.conf
 
 # Copy nginx template (envsubst replaces ${API_BACKEND_URL} at container start)
 COPY docker/nginx.conf.template /etc/nginx/templates/default.conf.template
+COPY docker/cert.pem /etc/nginx/ssl/
+COPY docker/key.pem /etc/nginx/ssl/
 
 # Copy built static files
 COPY --from=build /app/dist /usr/share/nginx/html
 
 # Only substitute our variable, not nginx's own $uri, $host, etc.
-ENV NGINX_ENVSUBST_FILTER=API_BACKEND_URL
+ENV NGINX_ENVSUBST_FILTER=API_
 
 # Default backend URL (override at runtime with -e)
-ENV API_BACKEND_URL=http://localhost:8443
+ENV API_BACKEND_URL=https://backend:8443
 
-EXPOSE 8080
+EXPOSE 443

README.md

@@ -55,6 +55,17 @@ KillrVideo is a reference application that demonstrates best practices for build
 - Node.js (install via [nvm](https://github.com/nvm-sh/nvm#installing-and-updating))
 - npm
 
+### Environment Variables
+
+- `VITE_BACKEND_URL` - The base URL for the KillrVideo backend API.
+
+By default, the backends run on the following URL/port combinations:
+Java: https://localhost:8443
+Python: http://localhost:8080
+C#: https://localhost:7264
+
+_Note: This variable makes it easier to deploy the frontend via Docker or Podman._
+
 ### Installation
 
 ```sh

docker/nginx.conf.template

@@ -1,7 +1,17 @@
 server {
     listen 8080;
+    listen 443 ssl;
     server_name _;
 
+    # SSL certificate configuration
+    ssl_certificate /etc/nginx/ssl/cert.pem;
+    ssl_certificate_key /etc/nginx/ssl/key.pem;
+
+    # SSL settings
+    ssl_protocols TLSv1.2 TLSv1.3;
+    ssl_ciphers HIGH:!aNULL:!MD5;
+    ssl_prefer_server_ciphers on;
+
     root /usr/share/nginx/html;
     index index.html;
 

src/pages/ExploreVideos.tsx

@@ -102,7 +102,7 @@ const ExploreVideos = () => {
                   creator={video.userId}
                   creatorName={userMap[video.userId]}
                   thumbnail={video.thumbnailUrl || PLACEHOLDER_THUMB}
-                  views={video.viewCount}
+                  views={video.views}
                   rating={video.averageRating ?? 0}
                   tags={EMPTY_TAGS}
                   uploadDate={video.submittedAt}

src/pages/Trending.tsx

@@ -97,7 +97,7 @@ const Trending = () => {
                       creatorName={userMap[video.userId]}
                       thumbnail={video.thumbnailUrl}
                       duration="--:--"
-                      views={video.viewCount}
+                      views={video.views}
                       rating={video.averageRating}
                       tags={EMPTY_TAGS}
                       uploadDate={video.submittedAt}

vite.config.ts

@@ -9,7 +9,7 @@ export default defineConfig(() => ({
     port: 8080,
     proxy: {
       '/api': {
-        target: 'https://localhost:8443',
+        target: process.env.VITE_BACKEND_URL,
         changeOrigin: true,
         secure: false,
         rewrite: (path) => path,
@@ -19,6 +19,7 @@ export default defineConfig(() => ({
           });
           proxy.on('proxyReq', (proxyReq, req, _res) => {
             console.log('Sending Request to the Target:', req.method, req.url);
+            console.log('Target = ', process.env.VITE_BACKEND_URL);
           });
           proxy.on('proxyRes', (proxyRes, req, _res) => {
             console.log('Received Response from the Target:', proxyRes.statusCode, req.url);