Prepare frontend container

Author: gavlyukovskiy

.github/workflows/on-release-tag.yml

@@ -15,7 +15,7 @@ on:
         type: boolean
 
 jobs:
-  build-image:
+  build-course-hub-backend:
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -53,13 +53,54 @@ jobs:
 
       - name: Build
         env:
-          DOCKER_PUSH: true
+          DOCKER_PUSH: ${{ github.repository == 'HackYourFuture/CourseHub' }}
         run: ./gradlew -Pversion=${{ steps.get-version.outputs.version }} bootBuildImage
 
+  build-course-hub-frontend:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v5
+
+      - uses: docker/setup-buildx-action@v3
+        with:
+          platforms: linux/amd64
+
+      - uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - id: get-version
+        run: |
+          # Determine version from tag or input
+          VERSION="${{ inputs.version || '' }}"
+          if [ -z "$VERSION" ]; then
+            VERSION="${GITHUB_REF_NAME#v}"
+          fi
+          echo "version=${VERSION}" >> $GITHUB_OUTPUT
+
+      - name: Build and push Docker image
+        env:
+          DOCKER_PUSH: ${{ github.repository == 'HackYourFuture/CourseHub' }}
+        run: |
+          docker build \
+            --build-arg VERSION=${VERSION} \
+            -t ghcr.io/hackyourfuture/course-hub-frontend:${{ steps.get-version.outputs.version }} \
+            -t ghcr.io/hackyourfuture/course-hub-frontend:latest \
+            .
+          if [ "$DOCKER_PUSH" = "true" ]; then
+            docker push ghcr.io/hackyourfuture/course-hub-frontend:${{ steps.get-version.outputs.version }}
+            docker push ghcr.io/hackyourfuture/course-hub-frontend:latest
+          fi
+
   deploy:
     # do not execute on forks
     if: ${{ github.repository == 'HackYourFuture/CourseHub' && inputs.deploy }}
-    needs: build-image
+    needs: [build-course-hub-backend, build-course-hub-frontend]
     permissions:
       contents: read
     uses: ./.github/workflows/deploy-to-digital-ocean.yml

README.md

@@ -52,12 +52,16 @@ To run the backend application:
 
 The application is accessible on `http://localhost:8080`.
 
-### Building docker image
+### Building docker images
 
-To build a Docker image of the application, run the following command:
+To build a Docker image of the course-hub backend, run the following command:
 ```bash
 ./gradlew bootBuildImage
 ```
+To build a Docker image for the frontend, from the `ui` directory, run:
+```bash
+docker build -t ghcr.io/hackyourfuture/course-hub-frontend ui
+```
 
 #### Running docker image
 

docker-compose.yaml

@@ -15,7 +15,14 @@ services:
     container_name: redis
     ports:
       - "6379:6379"
-  course-hub:
+  course-hub-frontend:
+    image: ghcr.io/hackyourfuture/course-hub-frontend:latest
+    container_name: course-hub-frontend
+    environment:
+      BACKEND_URL: http://host.docker.internal:8080
+    ports:
+      - "80:80"
+  course-hub-backend:
     image: ghcr.io/hackyourfuture/course-hub-backend:latest
     container_name: course-hub
     profiles:

src/main/java/net/hackyourfuture/coursehub/SecurityConfig.java

@@ -13,13 +13,23 @@
 import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
 import org.springframework.security.crypto.password.PasswordEncoder;
 import org.springframework.security.web.SecurityFilterChain;
+import org.springframework.web.cors.CorsConfiguration;
 
 @Configuration
 @EnableWebSecurity
 public class SecurityConfig {
     @Bean
     public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
         return http.csrf(AbstractHttpConfigurer::disable)
+                .cors(cors -> cors.configurationSource(request -> {
+                    var config = new CorsConfiguration();
+                    config.addAllowedOriginPattern("http://localhost:8080");
+                    config.addAllowedOriginPattern("http://host.docker.internal:8080");
+                    config.addAllowedOriginPattern("https://coursehub.hyf.dev");
+                    config.addAllowedHeader("*");
+                    config.addAllowedMethod("*");
+                    return config;
+                }))
                 .authorizeHttpRequests(auth -> auth.requestMatchers("/login", "/register")
                         .permitAll()
                         .requestMatchers(HttpMethod.GET, "/courses")

ui/Dockerfile

@@ -0,0 +1,16 @@
+# Stage 1: Build the React app
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+# Stage 2: Serve with nginx
+FROM nginx:alpine
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY public/images /usr/share/nginx/html/images
+COPY nginx-entrypoint.sh /usr/local/bin/nginx-entrypoint.sh
+
+EXPOSE 80
+ENTRYPOINT ["nginx-entrypoint.sh"]

ui/index.html

@@ -8,6 +8,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <script src="/config.js"></script>
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>

ui/nginx-entrypoint.sh

@@ -0,0 +1,8 @@
+#!/bin/sh
+cat <<EOF > /usr/share/nginx/html/config.js
+// nginx-entrypoint.sh
+window.__CONFIG__ = {
+  backendUrl: "${BACKEND_URL}"
+};
+EOF
+nginx -g 'daemon off;'

ui/public/config.js

@@ -0,0 +1,4 @@
+// default
+window.__CONFIG__ = {
+  backendUrl: "http://localhost:8080"
+};

ui/src/ConfigContext.ts

@@ -0,0 +1,19 @@
+import {createContext, useContext} from "react";
+
+export type Config = {
+    backendUrl: string;
+};
+
+export const config = loadConfig();
+export const ConfigContext = createContext<Config>(config);
+
+function loadConfig(): Config {
+    if ((window as any).__CONFIG__) {
+        return (window as any).__CONFIG__;
+    }
+    return {
+        backendUrl: 'http://localhost:8080'
+    };
+}
+
+export const useConfig = () => useContext(ConfigContext);

ui/src/main.tsx

@@ -3,13 +3,16 @@ import {createRoot} from "react-dom/client";
 import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
 import App from "./App";
 import "./index.css";
+import { ConfigContext, config } from './ConfigContext';
 
 const queryClient = new QueryClient();
 
 createRoot(document.getElementById("root")!).render(
     <StrictMode>
-        <QueryClientProvider client={queryClient}>
-            <App/>
-        </QueryClientProvider>
+        <ConfigContext.Provider value={config}>
+            <QueryClientProvider client={queryClient}>
+                <App/>
+            </QueryClientProvider>
+        </ConfigContext.Provider>
     </StrictMode>
 );