Prepare deployment

.dockerignore

@@ -1,10 +1,21 @@
+node_modules
+dist
+build
+.env
+.env.local
 Dockerfile
+docker-compose.yml
+docker-compose.prod.yml
+.git
+.gitignore
+.vscode
+.idea
+*.log
+*.tsbuildinfo
+coverage
 .dockerignore
-node_modules
-npm-debug.log
 README.md
 .next
-.git
 .env.example
-mysql-init-scripts
-docker-compose.yml
+.es
+.github

.env.example

@@ -9,10 +9,12 @@ SMTP_PASSWORD=
 EMAIL_DEV=dev@email.com
 
 # Backend Configuration
-# use "host.docker.internal" as host if you are connecting to a MySQL database running on the host machine
+# use "host.docker.internal" as host if you are connecting to 
+# a MySQL database running on the host machine while the backend 
+# is running in a Docker container
 SPRING_DATASOURCE_URL=jdbc:mysql://localhost:3306/commercifydb?createDatabaseIfNotExist=true
-SPRING_DATASOURCE_USERNAME=root
-SPRING_DATASOURCE_PASSWORD=Password1234!
+SPRING_DATASOURCE_USERNAME=
+SPRING_DATASOURCE_PASSWORD=
 STRIPE_TEST_SECRET=sk_test_
 STRIPE_SECRET_WEBHOOK=whsec_
 STRIPE_WEBHOOK_ENDPOINT=we_

.gitignore

@@ -35,4 +35,6 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 .env
-.vscode
+.vscode
+
+docker-compose.prod.yml

Dockerfile

@@ -12,6 +12,18 @@ FROM build AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
+
+ARG NODE_ENV='production'
+ENV NODE_ENV=$NODE_ENV
+
+ARG NEXT_PUBLIC_COMMERCIFY_API_URL="https://dev.commercify.app/api/v1"
+ENV NEXT_PUBLIC_COMMERCIFY_API_URL=$NEXT_PUBLIC_COMMERCIFY_API_URL
+
+ARG NEXT_PUBLIC_DEV_COMMERCIFY_API_URL="http://localhost:6091/api/v1"
+ENV NEXT_PUBLIC_DEV_COMMERCIFY_API_URL=$NEXT_PUBLIC_DEV_COMMERCIFY_API_URL
+
+RUN echo "Application is running in ${NODE_ENV} mode"
+
 RUN npm run build
 
 # Production image, copy all the files and run next
@@ -43,4 +55,5 @@ ENV PORT=3000
 # server.js is created by next build from the standalone output
 # https://nextjs.org/docs/pages/api-reference/next-config-js/output
 ENV HOSTNAME="0.0.0.0"
+
 CMD ["node", "server.js"]

docker-compose.yml

@@ -1,49 +1,52 @@
 services:
-  mysql-db:
-    image: docker.io/bitnami/mysql:8.4
-    container_name: mysql-db
+  commercify-web:
+    # image: ghcr.io/zenfulcode/commercifyweb:dev
+    container_name: commercify-web
+    build:
+      context: .
+      args:
+        - NODE_ENV=production
+        - NEXT_PUBLIC_COMMERCIFY_API_URL=http://localhost:6091/api/v1
     env_file: .env
     environment:
-      ALLOW_EMPTY_PASSWORD: "no"
-      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
-      MYSQL_USER: ${MYSQL_USER}
-      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
+      - NODE_ENV=${NODE_ENV}
+      - NEXT_PUBLIC_COMMERCIFY_API_URL=${NEXT_PUBLIC_COMMERCIFY_API_URL}
+      - NEXT_PUBLIC_DEV_COMMERCIFY_API_URL=${NEXT_PUBLIC_DEV_COMMERCIFY_API_URL}
+      - SMTP_HOST=${SMTP_HOST}
+      - SMTP_PORT=${SMTP_PORT}
+      - SMTP_USER=${SMTP_USER}
+      - SMTP_PASSWORD=${SMTP_PASSWORD}
+      - EMAIL_DEV=${EMAIL_DEV}
     ports:
-      - "3307:3306"
+      - "3000:3000"
     networks:
-      - spring-net
-    volumes:
-      - mysql-data:/bitnami/mysql/data
-      - ./mysql-init-scripts:/docker-entrypoint-initdb.d
-    healthcheck:
-      test: ["CMD", "/opt/bitnami/scripts/mysql/healthcheck.sh"]
-      interval: 15s
-      timeout: 5s
-      retries: 6
+      - commercify
 
-  commercify:
-    image: ghcr.io/zenfulcode/commercify:dev
+  commercify-api:
+    image: ghcr.io/zenfulcode/commercify:main
     env_file: .env
     container_name: commercify-api
-    ports:
-      - "8080:8080"
     environment:
       - SPRING_PROFILES_ACTIVE=docker
-      - SPRING_DATASOURCE_URL=${SPRING_DATASOURCE_URL}
-      - SPRING_DATASOURCE_USERNAME=${SPRING_DATASOURCE_USERNAME}
-      - SPRING_DATASOURCE_PASSWORD=${SPRING_DATASOURCE_PASSWORD}
-      - STRIPE_TEST_SECRET=${STRIPE_TEST_SECRET}
+      - SPRING_DATASOURCE_URL=${DATASOURCE_URL}
+      - SPRING_DATASOURCE_USERNAME=${DATASOURCE_USERNAME}
+      - SPRING_DATASOURCE_PASSWORD=${DATASOURCE_PASSWORD}
       - JWT_SECRET_KEY=${JWT_SECRET_KEY}
-    depends_on:
-      mysql-db:
-        condition: service_healthy
+      - ADMIN_EMAIL=${ADMIN_EMAIL}
+      - ADMIN_PASSWORD=${ADMIN_PASSWORD}
+      - MOBILEPAY_MERCHANT_ID=${MOBILEPAY_MERCHANT_ID}
+      - MOBILEPAY_CLIENT_ID=${MOBILEPAY_CLIENT_ID}
+      - MOBILEPAY_CLIENT_SECRET=${MOBILEPAY_CLIENT_SECRET}
+      - MOBILEPAY_SUBSCRIPTION_KEY=${MOBILEPAY_SUBSCRIPTION_KEY}
+      - MOBILEPAY_API_URL=${MOBILEPAY_API_URL}
+      - MOBILEPAY_SYSTEM_NAME=${MOBILEPAY_SYSTEM_NAME}
+      - STRIPE_SECRET_TEST_KEY=${STRIPE_SECRET_TEST_KEY}
+      - STRIPE_WEBHOOK_SECRET=${STRIPE_WEBHOOK_SECRET}
+    ports:
+      - "6091:6091"
     networks:
-      - spring-net
+      - commercify
 
 networks:
-  spring-net:
+  commercify:
     driver: bridge
-
-volumes:
-  mysql-data:
-    driver: local

src/app/(client)/checkout/_components/AuthenticationStep.tsx

@@ -40,8 +40,6 @@ export function AuthenticationStep() {
         resolver: zodResolver(loginSchema),
     });
 
-    console.log(isAuthenticated);
-
     if (isAuthenticated) {
         setStep('information');
         return null;

src/app/(client)/checkout/_components/PaymentStep.tsx

@@ -28,7 +28,7 @@ type PaymentMethod = typeof PAYMENT_METHODS[keyof typeof PAYMENT_METHODS];
 export function PaymentStep() {
     const { toast } = useToast();
     const { cart, clearCart } = useCart();
-    const { state } = useCheckout();
+    const { state, setStep } = useCheckout();
     const { user } = useAuth();
     const [isProcessing, setIsProcessing] = React.useState(false);
     const [selectedMethod, setSelectedMethod] = React.useState<PaymentMethod>(PAYMENT_METHODS.MOBILEPAY);
@@ -61,16 +61,12 @@ export function PaymentStep() {
                 ...(item.selectedVariant && { variantId: item.selectedVariant.id }),
             }));
 
-            console.log(orderLines);
-
             // Create order
             const orderResponse = await orderService.createOrder(user.id, {
                 currency: "DKK",
                 orderLines,
             });
 
-            console.log(orderResponse);
-
             // Create payment based on selected method
             if (selectedMethod === PAYMENT_METHODS.MOBILEPAY) {
                 const paymentResponse = await orderService.createMobilePayPayment({
@@ -162,7 +158,7 @@ export function PaymentStep() {
                     <Button
                         type="button"
                         variant="outline"
-                        onClick={() => window.history.back()}
+                        onClick={() => setStep('information')}
                     >
                         Back
                     </Button>

src/app/(client)/page.tsx

@@ -4,17 +4,11 @@ import React, { useEffect, useState } from 'react';
 
 import { Button } from '@/components/ui/button';
 import {
-  AlertCircle,
   RefreshCw,
   ServerCrash,
   Wifi,
   WifiOff
 } from 'lucide-react';
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@/components/ui/alert";
 import { Product } from '@/types/product';
 import { useToast } from '@/hooks/use-toast';
 import { productApi } from '@/services/productsService';
@@ -67,14 +61,6 @@ export default function ProductsPage() {
     return (
       <div className="container mx-auto py-16 px-4">
         <div className="max-w-2xl mx-auto space-y-8">
-          <Alert variant="destructive" className="mb-6">
-            <AlertCircle className="h-4 w-4" />
-            <AlertTitle>Error Loading Products</AlertTitle>
-            <AlertDescription>
-              We couldn&apos;t load the products at this time.
-            </AlertDescription>
-          </Alert>
-
           <div className="bg-card rounded-lg p-8 text-center space-y-6">
             <div className="flex justify-center">
               <ServerCrash className="h-16 w-16 text-muted-foreground" />