feat: dynamic api url support (#49)

* chore: update docker port to 80 * docs: helm + istio * chore: version bump * feat: dynamic api url support
xolvio · Dec 19, 2024 · 0680063 · 0680063
1 parent e710922
commit 0680063
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 17 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -38,6 +38,7 @@ COPY --from=backend-builder /app/backend/package.json ./backend/
 COPY --from=backend-builder /app/backend/node_modules ./backend/node_modules
 COPY --from=frontend-builder /app/frontend/build ./frontend/build
 
-EXPOSE 3007
+ENV PORT=80
+EXPOSE 80
 CMD ["/bin/sh", "-c", "cd /app/backend && node dist/server.js"]
 
diff --git a/README.md b/README.md
@@ -83,12 +83,58 @@ docker pull xolvio/instant-mock:<version>
 
 ### Kubernetes (K8s)
 
-A basic Helm chart is provided to deploy InstantMock with Kubernetes. Currently, it ships with SQLite and is limited to a single replica.
+A basic Helm chart is provided to deploy InstantMock with Kubernetes. Currently,
+it ships with SQLite and is limited to a single replica.
 
 > 🔮 **Coming Soon**: Full Helm chart with scaling support and PostgreSQL.
 
+## 🚢 Kubernetes Deployment with Istio
+
+### Basic Installation
+
+InstantMock is designed to work seamlessly with Istio service mesh. To deploy:
+
+1. Add the Helm repository
+2. Create a values file with your domain configuration
+3. Install using Helm
+
+The minimal configuration requires:
+
+- Your domain name
+- Istio gateway configuration
+- Backend URL (matching your domain)
+
+### Example Values File
+
+Create a `my-values.yaml` with your configuration:
+
+- Set ingress.hosts[0].host to your domain
+- Set env.BACKEND_URL to match your domain
+- Keep service.type as ClusterIP (Istio handles external access)
+- Port 80 is used internally (Istio handles SSL/TLS)
+
+### Installation Command
+
+Run Helm install with your values:
+
+    helm install instant-mock ./helm -f my-values.yaml
+
+### Accessing the Application
+
+Once deployed:
+
+1. Configure your Istio Gateway
+2. Point your domain DNS to the Istio ingress gateway
+3. Access InstantMock through your configured domain
+
+The application automatically detects the environment and configures itself for
+production use.
+
+> Note: SSL/TLS termination is handled by Istio at the gateway level
+
 ## 🙏 Acknowledgments
 
-InstantMock builds on the work from gqmock, with many of the base MockServer utilities adapted and extended for seamless integration.
+InstantMock builds on the work from gqmock, with many of the base MockServer
+utilities adapted and extended for seamless integration.
 
 > Made with ❤️ by the @xolvio team
diff --git a/backend/package-lock.json b/backend/package-lock.json
diff --git a/backend/package.json b/backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "backend",
-  "version": "1.0.0-beta.4.3",
+  "version": "1.0.0-beta.4.4",
   "main": "dist/server.js",
   "scripts": {
     "build": "rm -rf dist/ && npx tsc && npm run copy-graphql",

diff --git a/backend/src/server.ts b/backend/src/server.ts
@@ -62,7 +62,7 @@ logger.startup('Checking APOLLO_API_KEY presence', {
   present: !!process.env.APOLLO_API_KEY,
 });
 
-const port = process.env.PORT || 3033;
+const port = process.env.NODE_ENV === 'production' ? 80 : (process.env.PORT || 3033);
 
 export const DI = {} as {
   orm: MikroORM;
@@ -177,15 +177,41 @@ const initializeApp = async () => {
     logger.api('Swagger API documentation served');
   });
 
-  app.use(express.static(path.join(__dirname, '../../frontend/build')));
-  app.get('*', (_, res) => {
-    res.sendFile(path.join(__dirname, '../../frontend/build', 'index.html'));
+  app.get('*', (req, res, next) => {
+    if (req.path === '/') {
+      const indexPath = path.join(__dirname, '../../frontend/build', 'index.html');
+      let html = fs.readFileSync(indexPath, 'utf8');
+
+      const backendUrl = process.env.BACKEND_URL || 'localhost';
+      const port = process.env.NODE_ENV === 'production' 
+        ? '' 
+        : `:${process.env.PORT || '3033'}`;
+
+      const runtimeConfig = {
+        BACKEND_URL: `http://${backendUrl}`,
+        BACKEND_PORT: port
+      };
+
+      html = html.replace(
+        '<head>',
+        `<head><script>window.__RUNTIME_CONFIG__=${JSON.stringify(runtimeConfig)};</script>`
+      );
+
+      return res.send(html);
+    }
+    next();
   });
 
+  app.use(express.static(path.join(__dirname, '../../frontend/build')));
+
   app.use(authMiddleware.error);
 
   app.listen(port, () => {
-    logger.startup('Server running', {port, url: `http://localhost:${port}`});
+    logger.startup('Server running', {
+      port,
+      url: `http://localhost:${port}`,
+      env: process.env.NODE_ENV
+    });
   });
 };
 

diff --git a/frontend/src/config/config.ts b/frontend/src/config/config.ts
@@ -1,7 +1,9 @@
 export const config = {
   env: process.env.NODE_ENV as 'development' | 'production' | 'test',
   backend: {
-    url: `${process.env.REACT_APP_BACKEND_URL || 'http://localhost'}:${process.env.REACT_APP_BACKEND_PORT || '3033'}`,
+    url: typeof window !== 'undefined' && window.__RUNTIME_CONFIG__
+      ? `${window.__RUNTIME_CONFIG__.BACKEND_URL}${window.__RUNTIME_CONFIG__.BACKEND_PORT ? `:${window.__RUNTIME_CONFIG__.BACKEND_PORT}` : ''}`
+      : `${process.env.REACT_APP_BACKEND_URL || 'http://localhost'}:${process.env.REACT_APP_BACKEND_PORT || '3033'}`,
   },
   frontend: {
     url: `${process.env.REACT_APP_FRONTEND_URL || 'http://localhost'}:${process.env.REACT_APP_FRONTEND_PORT || '3032'}`,

diff --git a/frontend/src/types/window.d.ts b/frontend/src/types/window.d.ts
@@ -0,0 +1,6 @@
+declare interface Window {
+  __RUNTIME_CONFIG__: {
+    BACKEND_URL: string;
+    BACKEND_PORT: string;
+  };
+} 
diff --git a/helm/values.yaml b/helm/values.yaml
@@ -1,11 +1,28 @@
 replicaCount: 1
 image:
   repository: xolvio/instant-mock
-  tag: 1.0.0-beta.4.3
+  tag: 1.0.0-beta.4.4
   pullPolicy: Always
 service:
-  type: LoadBalancer
+  type: ClusterIP
   port: 80
+ingress:
+  enabled: true
+  className: istio
+  annotations:
+    kubernetes.io/ingress.class: istio
+  hosts:
+    - host: instant-mock.example.com
+      paths:
+        - path: /
+          pathType: Prefix
+env:
+  - name: NODE_ENV
+    value: production
+  - name: BACKEND_URL
+    value: instant-mock.example.com
+  - name: PORT
+    value: '80'
 resources: {}
 persistence:
   enabled: true

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "instant-mock",
-  "version": "1.0.0-beta.4.3",
+  "version": "1.0.0-beta.4.4",
   "description": "![instant-mock-screen-cap-final](https://github.com/user-attachments/assets/de0f50d4-5a71-4e5a-b479-37c6cfa0481d)",
   "main": "index.js",
   "module": "true",