Add project files

2025-03-18 10:42:10 +01:00
parent e429c37f62
commit bc548aa8fb
22 changed files with 619 additions and 0 deletions
--- a/react-project/.dockerignore
+++ b/react-project/.dockerignore
@@ -0,0 +1,7 @@
+node_modules
+npm-debug.log
+build
+.git
+.github
+.gitignore
+README.md
--- a/react-project/Dockerfile
+++ b/react-project/Dockerfile
@@ -0,0 +1,30 @@
+# Build-Stage
+FROM node:16 AS build
+
+WORKDIR /app
+
+# Abhängigkeiten zuerst kopieren und installieren (für besseres Caching)
+COPY package*.json ./
+RUN npm install
+
+# Den Rest der Anwendung kopieren
+COPY . .
+
+# Build-Zeit-Variable setzen
+ENV REACT_APP_BUILD_TIME="$(date)"
+
+# Anwendung bauen
+RUN npm run build
+
+# Production-Stage
+FROM nginx:alpine
+
+# Build-Output vom build-Stage kopieren
+COPY --from=build /app/build /usr/share/nginx/html
+
+# Nginx-Konfiguration (optional)
+# COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
--- a/react-project/package.json
+++ b/react-project/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "react-docker-demo",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "react-scripts": "5.0.1"
+  },
+  "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"
+    ]
+  }
+}
--- a/react-project/public/index.html
+++ b/react-project/public/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="React Docker Demo App" />
+    <title>React Docker Demo</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
--- a/react-project/src/App.css
+++ b/react-project/src/App.css
@@ -0,0 +1,42 @@
+.App {
+  text-align: center;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.counter {
+  margin: 2rem 0;
+  padding: 1rem;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+}
+
+button {
+  background-color: #61dafb;
+  border: none;
+  color: #282c34;
+  padding: 10px 20px;
+  font-size: 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+button:hover {
+  background-color: #4fa8c3;
+}
+
+.info {
+  margin-top: 2rem;
+  font-size: 0.8rem;
+  opacity: 0.7;
+}
--- a/react-project/src/App.js
+++ b/react-project/src/App.js
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import './App.css';
+
+function App() {
+  const [count, setCount] = useState(0);
+  
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1>React Docker Demo</h1>
+        <p>Diese App läuft in einem Docker-Container</p>
+        
+        <div className="counter">
+          <p>Du hast den Button {count} mal geklickt</p>
+          <button onClick={() => setCount(count + 1)}>
+            Klick mich!
+          </button>
+        </div>
+        
+        <p className="info">
+          Build-Zeit: {process.env.REACT_APP_BUILD_TIME || 'Unbekannt'}
+        </p>
+      </header>
+    </div>
+  );
+}
+
+export default App;
--- a/react-project/src/index.css
+++ b/react-project/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
--- a/react-project/src/index.js
+++ b/react-project/src/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);