Split the file.

dockerfile

@@ -1,11 +1,7 @@
-# Dockerfile
-# ------------
-# Create a production-ready Docker container to host the React app.
-
-# Use an official Node.js runtime as a parent image
+# Stage 1: Build React App
 FROM node:18 as build
 
-# Set the working directory
+# Set working directory
 WORKDIR /app
 
 # Copy package.json and package-lock.json
@@ -14,20 +10,23 @@ COPY package*.json ./
 # Install dependencies
 RUN npm install
 
-# Copy the app's source code
+# Copy the rest of the source code
 COPY . .
 
-# Build the app for production
+# Build the app
 RUN npm run build
 
-# Use a lightweight web server to serve the built app
+# Stage 2: Serve the app using Nginx
 FROM nginx:alpine
 
-# Copy the build files from the previous stage
+# Copy custom Nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Copy build artifacts to Nginx's web root
 COPY --from=build /app/build /usr/share/nginx/html
 
-# Expose the port the app runs on
+# Expose port 80
 EXPOSE 80
 
-# Start the Nginx server
-CMD ["nginx", "-g", "daemon off;"]
+# Start Nginx
+CMD ["nginx", "-g", "daemon off;"]

nginx.conf

@@ -0,0 +1,13 @@
+server {
+    listen 80;
+    server_name test.out.jafre.li;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri /index.html;
+    }
+
+    error_page 404 /index.html;
+}

package.json

@@ -5,7 +5,8 @@
     "dependencies": {
       "pocketbase": "^0.13.0",               
       "react": "^18.2.0",                    
-      "react-dom": "^18.2.0",                
+      "react-dom": "^18.2.0",
+      "react-scripts": "^5.0.1",                
       "react-router-dom": "^6.14.1"          
     },
     "devDependencies": {

src/App.jsx

@@ -1,83 +1,7 @@
-import React, { useState, useEffect } from 'react';
-import PocketBase from 'pocketbase';
-import { useParams, BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
-
-const pb = new PocketBase('https://db.out.jafre.li');
-
-const Home = () => {
-    const [message, setMessage] = useState('');
-    const [submitted, setSubmitted] = useState(false);
-    const [error, setError] = useState(null);
-
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        try {
-            const data = { message };
-            const record = await pb.collection('jbin').create(data);
-            setSubmitted(record.id);
-        } catch (err) {
-            setError('Fehler beim Erstellen der Nachricht');
-        }
-    };
-
-    return (
-        <div className="flex flex-col items-center p-4">
-            <h1 className="text-2xl font-bold mb-4">Nachricht erstellen</h1>
-            <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full max-w-md">
-                <textarea
-                    className="p-2 border rounded-xl w-full"
-                    placeholder="Nachricht hier eingeben..."
-                    value={message}
-                    onChange={(e) => setMessage(e.target.value)}
-                    required
-                ></textarea>
-                <button type="submit" className="bg-blue-500 text-white py-2 rounded-xl hover:bg-blue-600">
-                    Nachricht posten
-                </button>
-            </form>
-            {submitted && (
-                <p className="mt-4 text-green-500">
-                    Nachricht erstellt! Schaue sie dir hier an: <Link to={`/${submitted}`} className="text-blue-500 underline">/{submitted}</Link>
-                </p>
-            )}
-            {error && <p className="mt-4 text-red-500">{error}</p>}
-        </div>
-    );
-};
-
-const Message = () => {
-    const { id } = useParams();
-    const [message, setMessage] = useState(null);
-    const [error, setError] = useState(null);
-
-    useEffect(() => {
-        const fetchMessage = async () => {
-            try {
-                const record = await pb.collection('jbin').getOne(id);
-                setMessage(record.message);
-            } catch (err) {
-                setError('Nachricht nicht gefunden');
-            }
-        };
-
-        fetchMessage();
-    }, [id]);
-
-    return (
-        <div className="flex flex-col items-center p-4">
-            {error ? (
-                <h1 className="text-xl font-bold text-red-500">{error}</h1>
-            ) : message ? (
-                <>
-                    <h1 className="text-2xl font-bold mb-4">Nachricht</h1>
-                    <p className="p-4 border rounded-xl bg-gray-100 w-full max-w-md">{message}</p>
-                </>
-            ) : (
-                <p className="text-gray-500">Lädt...</p>
-            )}
-        </div>
-    );
-};
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import Home from './components/Home';
+import Message from './components/Message';
 
 const App = () => {
     return (
@@ -90,4 +14,4 @@ const App = () => {
     );
 };
 
-export default App;
+export default App;

src/components/Home.jsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import PocketBase from 'pocketbase';
+import MessageForm from './MessageForm';
+
+const pb = new PocketBase('https://db.out.jafre.li');
+
+const Home = () => {
+    const [submitted, setSubmitted] = useState(false);
+    const [error, setError] = useState(null);
+
+    const handleSubmit = async (message) => {
+        try {
+            const data = { message };
+            const record = await pb.collection('jbin').create(data);
+            setSubmitted(record.id);
+        } catch (err) {
+            setError('Fehler beim Erstellen der Nachricht');
+        }
+    };
+
+    return (
+        <div className="flex flex-col items-center p-4">
+            <h1 className="text-2xl font-bold mb-4">Nachricht erstellen</h1>
+            <MessageForm onSubmit={handleSubmit} />
+            {submitted && (
+                <p className="mt-4 text-green-500">
+                    Nachricht erstellt! Schaue sie dir hier an: <Link to={`/${submitted}`} className="text-blue-500 underline">/{submitted}</Link>
+                </p>
+            )}
+            {error && <p className="mt-4 text-red-500">{error}</p>}
+        </div>
+    );
+};
+
+export default Home;

src/components/Message.jsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import PocketBase from 'pocketbase';
+import { useParams, Link } from 'react-router-dom';
+
+const pb = new PocketBase('https://db.out.jafre.li');
+
+const Message = () => {
+    const { id } = useParams();
+    const [message, setMessage] = useState(null);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const fetchMessage = async () => {
+            try {
+                const record = await pb.collection('jbin').getOne(id);
+                setMessage(record.message);
+            } catch (err) {
+                setError('Nachricht nicht gefunden');
+            }
+        };
+
+        fetchMessage();
+    }, [id]);
+
+    return (
+        <div className="flex flex-col items-center p-4">
+            {error ? (
+                <h1 className="text-xl font-bold text-red-500">{error}</h1>
+            ) : message ? (
+                <>
+                    <h1 className="text-2xl font-bold mb-4">Nachricht</h1>
+                    <p className="p-4 border rounded-xl bg-gray-100 w-full max-w-md">{message}</p>
+                </>
+            ) : (
+                <p className="text-gray-500">Lädt...</p>
+            )}
+            <Link to="/" className="mt-4">
+                <button className="bg-blue-500 text-white py-2 px-4 rounded-xl hover:bg-blue-600">
+                    Neue Nachricht
+                </button>
+            </Link>
+        </div>
+    );
+};
+
+export default Message;

src/components/MessageForm.jsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+
+const MessageForm = ({ onSubmit }) => {
+    const [message, setMessage] = useState('');
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onSubmit(message);
+        setMessage('');
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full max-w-md">
+            <textarea
+                className="p-2 border rounded-xl w-full"
+                placeholder="Nachricht hier eingeben..."
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                required
+            ></textarea>
+            <button type="submit" className="bg-blue-500 text-white py-2 rounded-xl hover:bg-blue-600">
+                Nachricht posten
+            </button>
+        </form>
+    );
+};
+
+export default MessageForm;