Create CI.

.dockerignore

@@ -0,0 +1,3 @@
+frontend/node_modules
+backend/server/.env
+backend/server/node_modules

.github/workflows/docker-image.yml

@@ -0,0 +1,25 @@
+name: Docker Image CI
+
+on:
+  push:
+    branches: [ "main" ]
+
+jobs:
+
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+    - name: Write .env file
+      run: echo "${{secrets.FRONTEND_DOT_ENV}}" > ./frontend/.env
+    - name: Login Dockerhub
+      env:
+        DOCKER_USERNAME: ${{secrets.DOCKER_USERNAME}}
+        DOCKER_PASSWORD: ${{secrets.DOCKER_PASSWORD}}
+      run: echo $DOCKER_PASSWORD | docker login -u $DOCKER_USERNAME --password-stdin
+    - name: Build the Docker image
+      run: docker build -t jamesmurdza/sandbox .
+    - name: Push to Dockerhub
+      run: docker push jamesmurdza/sandbox:latest

dockerfile

@@ -0,0 +1,41 @@
+# docker build -t myimage .
+# docker run --env-file backend/server/.env -p 3000:3000 -p 4000:4000 myimage
+
+FROM node:20
+
+# Security: Drop all capabilities
+USER root
+RUN apt-get update && apt-get install -y libcap2-bin
+RUN setcap cap_net_bind_service=+ep /usr/local/bin/node
+
+# Build backend
+WORKDIR /backend
+COPY backend/server/package*.json ./
+RUN npm install
+COPY backend/server/ .
+RUN npm run build
+
+# Build frontend
+WORKDIR /frontend
+COPY frontend/package*.json ./
+RUN npm install
+COPY frontend .
+RUN npm run build
+
+# Set working directory to the root directory
+WORKDIR /
+
+# Security: Create non-root user and assign ownership
+RUN useradd -m appuser
+RUN mkdir -p /backend/projects && chown -R appuser:appuser /backend/projects
+USER appuser
+
+# Start both backend and frontend
+ENV BACKEND_PORT=4000
+ENV FRONTEND_PORT=3000
+
+EXPOSE 5173
+EXPOSE $BACKEND_PORT
+EXPOSE $FRONTEND_PORT
+
+CMD ["sh", "-c", "cd /backend && PORT=$BACKEND_PORT npm run start & cd /frontend && PORT=$FRONTEND_PORT npm run start"]

frontend/components/editor/index.tsx

@@ -42,7 +42,7 @@ export default function CodeEditor({
   reactDefinitionFile: string
 }) {
   const socket = io(
-    `${window.location.protocol}//${window.location.hostname}:${process.env.NEXT_PUBLIC_SERVER_PORT}?userId=${userData.id}&sandboxId=${sandboxData.id}`,
+    `http://localhost:${process.env.NEXT_PUBLIC_SERVER_PORT}?userId=${userData.id}&sandboxId=${sandboxData.id}`,
     {
       timeout: 2000,
     }

frontend/components/editor/navbar/share.tsx

@@ -120,7 +120,7 @@ export default function ShareSandboxModal({
             <Button
               onClick={() => {
                 navigator.clipboard.writeText(
-                  `${window.location.protocol}//${window.location.hostname}/code/${data.id}`
+                  `${process.env.NEXT_PUBLIC_APP_URL}/code/${data.id}`
                 )
                 toast.success("Link copied to clipboard.")
               }}

frontend/components/editor/preview/index.tsx

@@ -45,7 +45,7 @@ export default function PreviewWindow({
 
                 <PreviewButton
                   onClick={() => {
-                    navigator.clipboard.writeText(`${window.location.protocol}//${window.location.hostname}:5173`)
+                    navigator.clipboard.writeText(`http://localhost:5173`)
                     toast.info("Copied preview link to clipboard")
                   }}
                 >
@@ -73,7 +73,7 @@ export default function PreviewWindow({
             ref={ref}
             width={"100%"}
             height={"100%"}
-            src={`${window.location.protocol}//${window.location.hostname}:5173`}
+            src={`http://localhost:5173`}
           />
         </div>
       )}