diff --git a/.gitignore b/.gitignore index 7ec06d5..f66d422 100644 --- a/.gitignore +++ b/.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/* diff --git a/Dockerfile b/Dockerfile index b931ba2..56658e1 100644 --- a/Dockerfile +++ b/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 diff --git a/README.md b/README.md index 8744fe6..8025cb9 100644 --- a/README.md +++ b/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 diff --git a/docker/nginx.conf.template b/docker/nginx.conf.template index 4e4e1e8..3ecd5f6 100644 --- a/docker/nginx.conf.template +++ b/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; diff --git a/src/pages/ExploreVideos.tsx b/src/pages/ExploreVideos.tsx index f34ca0d..ef94cff 100644 --- a/src/pages/ExploreVideos.tsx +++ b/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} diff --git a/src/pages/Trending.tsx b/src/pages/Trending.tsx index 8616ace..961fea6 100644 --- a/src/pages/Trending.tsx +++ b/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} diff --git a/vite.config.ts b/vite.config.ts index 545b66f..8cfe352 100644 --- a/vite.config.ts +++ b/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);