Merge pull request #1 from HiEventsDev/frontend-ssr

init ssr integration

backend/app/Resources/Event/EventResourcePublic.php

@@ -26,6 +26,7 @@ public function toArray(Request $request): array
             'currency' => $this->getCurrency(),
             'slug' => $this->getSlug(),
             'status' => $this->getStatus(),
+            'timezone' => $this->getTimezone(),
             'location_details' => $this->when((bool)$this->getLocationDetails(), fn() => $this->getLocationDetails()),
 
             'tickets' => $this->when(

backend/bootstrap/cache/packages.php

@@ -0,0 +1,53 @@
+<?php return array (
+  'laravel/sanctum' => 
+  array (
+    'providers' => 
+    array (
+      0 => 'Laravel\\Sanctum\\SanctumServiceProvider',
+    ),
+  ),
+  'laravel/tinker' => 
+  array (
+    'providers' => 
+    array (
+      0 => 'Laravel\\Tinker\\TinkerServiceProvider',
+    ),
+  ),
+  'maatwebsite/excel' => 
+  array (
+    'providers' => 
+    array (
+      0 => 'Maatwebsite\\Excel\\ExcelServiceProvider',
+    ),
+    'aliases' => 
+    array (
+      'Excel' => 'Maatwebsite\\Excel\\Facades\\Excel',
+    ),
+  ),
+  'nesbot/carbon' => 
+  array (
+    'providers' => 
+    array (
+      0 => 'Carbon\\Laravel\\ServiceProvider',
+    ),
+  ),
+  'nunomaduro/termwind' => 
+  array (
+    'providers' => 
+    array (
+      0 => 'Termwind\\Laravel\\TermwindServiceProvider',
+    ),
+  ),
+  'php-open-source-saver/jwt-auth' => 
+  array (
+    'aliases' => 
+    array (
+      'JWTAuth' => 'PHPOpenSourceSaver\\JWTAuth\\Facades\\JWTAuth',
+      'JWTFactory' => 'PHPOpenSourceSaver\\JWTAuth\\Facades\\JWTFactory',
+    ),
+    'providers' => 
+    array (
+      0 => 'PHPOpenSourceSaver\\JWTAuth\\Providers\\LaravelServiceProvider',
+    ),
+  ),
+);

docker/.env

@@ -3,7 +3,7 @@ APP_ENV=local
 APP_KEY=base64:z7qfYEwsFdTn6zMCYwgSwDoWZlk6SuKU54+woXYNHlk=
 APP_DEBUG=true
 
-API_URL=http://localhost:1234
+API_PORT=1234
 
 DB_CONNECTION=pgsql
 DB_HOST=pgsql

docker/docker-compose.dev.yml

@@ -21,23 +21,44 @@ services:
         networks:
             - app
 
-    frontend:
+    frontend-csr:
         build:
             context: ./../frontend
-            dockerfile: Dockerfile.dev
-        container_name: frontend
+            dockerfile: Dockerfile.csr.dev
+        container_name: frontend-csr
+        profiles:
+            - csr
         ports:
             - "5678:5678"
         volumes:
             - ./../frontend:/app
             - /app/node_modules
 
-        command: yarn dev
+        command: yarn dev:csr
         environment:
-            VITE_API_URL: '${API_URL}'
+            VITE_API_URL_CLIENT: 'http://localhost:${API_PORT:-1234}'
         networks:
             - app
+    frontend-ssr:
+        build:
+            context: ./../frontend
+            dockerfile: Dockerfile.ssr.dev
+        container_name: frontend-ssr
+        profiles:
+            - ssr
+        ports:
+            - "5678:5678"
+            - "24678:24678"
+        volumes:
+            - ./../frontend:/app
+            - /app/node_modules
 
+        command: yarn dev:ssr
+        environment:
+            VITE_API_URL_CLIENT: 'http://localhost:${API_PORT:-1234}'
+            VITE_API_URL_SERVER: 'http://host.docker.internal:${API_PORT:-1234}'
+        networks:
+            - app
     redis:
         image: 'redis:alpine'
         ports:

docker/start-dev.sh

@@ -2,6 +2,12 @@
 
 COMPOSE_CMD="docker-compose -f docker-compose.dev.yml"
 
+if [[ "$1" == "csr" || "$1" == "ssr" ]]; then
+    COMPOSE_CMD+=" --profile $1"
+else
+    COMPOSE_CMD+=" --profile csr"
+fi
+
 RED='\033[0;31m'
 GREEN='\033[0;32m'
 BG_BLACK='\033[40m'

frontend/.env

@@ -1,3 +1,9 @@
 VITE_APP_NAME="Hi.Events"
-VITE_API_URL=https://demo.hi.events/api
+
+# These are usually the same when not in a development environment
+VITE_API_URL_CLIENT=https://localhost:1234
+VITE_API_URL_SERVER=https://localhost:1234
+
+VITE_APP_FRONTEND_URL=http://localhost:5678
+
 VITE_STRIPE_PUBLISHABLE_KEY=pk_test_51Ofu1CJKnXOyGeQuDPUHiZcJxZozRuERiv4vQRBtCscwTbxOL574cxUjAoNRL2YLCumgC5160pl6kvTIiAc9mOeM0058KAWQ55

frontend/Dockerfile → frontend/Dockerfile.csr

@@ -10,7 +10,7 @@ RUN yarn install
 
 COPY . .
 
-RUN yarn build
+RUN yarn build:csr
 
 FROM nginx:alpine
 

frontend/Dockerfile.dev → frontend/Dockerfile.csr.dev

@@ -10,4 +10,4 @@ COPY . ./
 
 EXPOSE 5678
 
-CMD ["yarn", "dev"]
+CMD ["yarn", "dev:csr"]

frontend/Dockerfile.ssr

@@ -0,0 +1,18 @@
+FROM node:alpine as build-stage
+
+WORKDIR /app
+
+RUN apk add --no-cache yarn
+
+COPY package.json yarn.lock ./
+
+RUN yarn install
+
+COPY . .
+
+RUN yarn build:ssr
+
+EXPOSE 5678
+
+CMD ["yarn", "start:ssr"]
+

frontend/Dockerfile.ssr.dev

@@ -0,0 +1,13 @@
+FROM node:alpine
+
+WORKDIR /app
+
+COPY ./package.json ./yarn.lock ./
+
+RUN yarn install
+
+COPY . ./
+
+EXPOSE 5678
+
+CMD ["yarn", "dev:ssr"]

frontend/index.html

@@ -3,13 +3,21 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="stylesheet"
-          href="https://fonts.googleapis.com/css2?family=Varela+Round">
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Varela+Round"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Hi.Events</title>
+
+    <!--render-helmet-->
+
+
   </head>
-  <body>
-    <div id="hievents-root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+  <body >
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/src/entry.client.tsx"></script>
+    <!--dehydrated-state-->
+    <!--extra-state-->
   </body>
 </html>

frontend/package.json

@@ -4,11 +4,16 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --port 5678 --host 0.0.0.0",
-    "build": "vite build",
-    "build-strict": "tsc && vite build",
+    "dev:csr": "vite --port 5678 --host 0.0.0.0",
+    "build:csr": "vite build",
+    "build-strict:csr": "tsc && npm run build:csr",
+    "preview:csr": "vite preview",
+    "dev:ssr": "cross-env NODE_ENV=development node server.js --port 5678",
+    "build:ssr": "npm run build:ssr:client && npm run build:ssr:server",
+    "build:ssr:client": "vite build --ssrManifest --outDir dist/client",
+    "build:ssr:server": "vite build --ssr src/entry.server.tsx --outDir dist/server",
+    "start:ssr": "cross-env NODE_ENV=production node server.js --port 5678",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
     "messages:extract": "lingui extract",
     "messages:compile": "lingui compile"
   },
@@ -18,18 +23,19 @@
     "@dnd-kit/utilities": "^3.2.1",
     "@lingui/macro": "^4.7.0",
     "@lingui/react": "^4.7.0",
-    "@mantine/carousel": "^7.5.2",
-    "@mantine/charts": "^7.5.2",
-    "@mantine/core": "^7.5.2",
-    "@mantine/dates": "^7.5.2",
-    "@mantine/dropzone": "^7.5.2",
-    "@mantine/form": "^7.5.2",
-    "@mantine/hooks": "^7.5.2",
-    "@mantine/modals": "^7.5.2",
-    "@mantine/notifications": "^7.5.2",
-    "@mantine/nprogress": "^7.5.2",
-    "@mantine/tiptap": "^7.5.2",
+    "@mantine/carousel": "^7.7.1",
+    "@mantine/charts": "^7.7.1",
+    "@mantine/core": "^7.7.1",
+    "@mantine/dates": "^7.7.1",
+    "@mantine/dropzone": "^7.7.1",
+    "@mantine/form": "^7.7.1",
+    "@mantine/hooks": "^7.7.1",
+    "@mantine/modals": "^7.7.1",
+    "@mantine/notifications": "^7.7.1",
+    "@mantine/nprogress": "^7.7.1",
+    "@mantine/tiptap": "^7.7.1",
     "@react-pdf/renderer": "^3.3.4",
+    "@remix-run/node": "^2.8.1",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.1",
     "@tabler/icons-react": "^2.44.0",
@@ -43,22 +49,28 @@
     "axios": "^1.4.0",
     "classnames": "^2.3.2",
     "collect.js": "^4.36.1",
+    "compression": "^1.7.4",
+    "cookie-parser": "^1.4.6",
+    "cross-env": "^7.0.3",
     "dayjs": "^1.11.8",
+    "express": "^4.19.2",
     "qr-scanner": "^1.4.2",
     "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^2.0.4",
     "react-qr-code": "^2.0.12",
-    "react-query": "^3.39.3",
     "react-router-dom": "^6.11.2",
-    "recharts": "2"
+    "recharts": "2",
+    "sirv": "^2.0.4"
   },
   "devDependencies": {
     "@lingui/cli": "^4.7.0",
     "@lingui/vite-plugin": "^4.7.0",
     "@swc/core": "1.3.105",
-    "@types/node": "^20.3.1",
+    "@types/express": "^4.17.21",
+    "@types/lodash": "^4.17.0",
+    "@types/node": "^20.12.2",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
@@ -75,7 +87,7 @@
     "postcss-simple-vars": "^7.0.1",
     "sass": "^1.63.4",
     "typescript": "^5.0.2",
-    "vite": "^5.0.0",
+    "vite": "^5.2.7",
     "vite-bundle-visualizer": "^1.0.1",
     "vite-plugin-copy": "^0.1.6"
   }