Compare commits
2 Commits
79c985bada
...
fbf79c71ac
| Author | SHA1 | Date | |
|---|---|---|---|
| fbf79c71ac | |||
| fadca54b3c |
32
dockerfile
32
dockerfile
@@ -1,11 +1,33 @@
|
||||
# Dockerfile
|
||||
# ------------
|
||||
# Create a production-ready Docker container to host the React app.
|
||||
|
||||
# Use an official Node.js runtime as a parent image
|
||||
FROM node:18 as build
|
||||
|
||||
# Set the working directory
|
||||
WORKDIR /app
|
||||
|
||||
# Copy package.json and package-lock.json
|
||||
COPY package*.json ./
|
||||
|
||||
# Install dependencies
|
||||
RUN npm install
|
||||
|
||||
# Copy the app's source code
|
||||
COPY . .
|
||||
|
||||
# Build the app for production
|
||||
RUN npm run build
|
||||
|
||||
# Use a lightweight web server to serve the built app
|
||||
FROM nginx:alpine
|
||||
|
||||
# Kopiere das gesamte 'view' Verzeichnis in das Nginx-HTML-Verzeichnis
|
||||
COPY view/ /usr/share/nginx/html/
|
||||
# Copy the build files from the previous stage
|
||||
COPY --from=build /app/build /usr/share/nginx/html
|
||||
|
||||
# Exponiere den Port 80 für den Container
|
||||
# Expose the port the app runs on
|
||||
EXPOSE 80
|
||||
|
||||
# Standardbefehl zum Starten von Nginx
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
# Start the Nginx server
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
35
package.json
Normal file
35
package.json
Normal file
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "nachrichten-app",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"pocketbase": "^0.13.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.14.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"tailwindcss": "^3.3.2",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"postcss": "^8.4.24"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
17
public/index.html
Normal file
17
public/index.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Nachrichten App</title>
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<!-- Tailwind CSS (optional if used) -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<!-- Root element where React mounts -->
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
93
src/App.jsx
Normal file
93
src/App.jsx
Normal file
@@ -0,0 +1,93 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path=":id" element={<Message />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
11
src/index.js
Normal file
11
src/index.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
//import './index.css'; // Falls du globale Styles hast
|
||||
import App from './App';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
Reference in New Issue
Block a user