From 740f673ab8bf77ecb42840097ec7e1cab29558da Mon Sep 17 00:00:00 2001 From: levomato Date: Mon, 14 Aug 2023 09:37:20 +0200 Subject: [PATCH 1/5] Added Docker Build --- .env | 3 ++- Dockerfile | 38 ++++++++++++++++++++++++++++++++++++++ entrypoint.sh | 15 +++++++++++++++ env.sh | 28 ++++++++++++++++++++++++++++ tsconfig.json | 2 +- 5 files changed, 84 insertions(+), 2 deletions(-) create mode 100644 Dockerfile create mode 100644 entrypoint.sh create mode 100644 env.sh diff --git a/.env b/.env index 72292c1..bfc2ab6 100644 --- a/.env +++ b/.env @@ -1 +1,2 @@ -VITE_BACKEND_URL=http://localhost:8099/api/v1 \ No newline at end of file +# Please provide the Url for dqApi +VITE_BACKEND_URL= \ No newline at end of file diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..dda3c9f --- /dev/null +++ b/Dockerfile @@ -0,0 +1,38 @@ +FROM --platform=$BUILDPLATFORM node:19-alpine AS base + +FROM base AS deps +RUN apk add --no-cache libc6-compat +WORKDIR /app + +COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./ +RUN \ + if [ -f yarn.lock ]; then yarn --frozen-lockfile; \ + elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \ + elif [ -f package-lock.json ]; then npm ci; \ + else echo "Lockfile not found." && exit 1; \ + fi + +FROM base AS builder +WORKDIR /app +COPY --from=deps /app/node_modules ./node_modules +COPY . . +RUN npm run build + +FROM --platform=$BUILDPLATFORM nginx:1.22-alpine AS runtime +COPY --from=builder /app/dist /usr/share/nginx/html + +# Adding the env-File and the Shell-Script +WORKDIR /usr/share/nginx/html +COPY ./env.sh . +COPY .env . + +COPY entrypoint.sh /usr/bin/ +RUN chmod +x /usr/bin/entrypoint.sh + +# Add bash +RUN apk add --no-cache bash + +RUN chmod +x env.sh + +# Executing the Shell-Skript +CMD ["entrypoint.sh"] \ No newline at end of file diff --git a/entrypoint.sh b/entrypoint.sh new file mode 100644 index 0000000..3dfede8 --- /dev/null +++ b/entrypoint.sh @@ -0,0 +1,15 @@ +#!/bin/bash + +# Check if the VITE_BACKEND_URL environment variable is set +if [ -z "$VITE_BACKEND_URL" ]; then + echo "Error: + The environment variable VITE_BACKEND_URL is not set. + Please enter a valid URL, for example, '-e VITE_BACKEND_URL=http://localhost:8080' on 'docker run'." + exit 1 +fi + +# Run the env.sh script +source /usr/share/nginx/html/env.sh + +# Start nginx +nginx -g "daemon off;" \ No newline at end of file diff --git a/env.sh b/env.sh new file mode 100644 index 0000000..20874ff --- /dev/null +++ b/env.sh @@ -0,0 +1,28 @@ +#!/bin/bash + +# Recreate config file +rm -rf ./env-config.js +touch ./env-config.js + +# Add assignment - window._env_ will contain all Environment-Variables, defined in .env +echo "window._env_ = {" >> ./env-config.js + +# Read each line in .env file +# Each line represents key=value pairs +while read -r line || [[ -n "$line" ]]; +do + # Split env variables by character `=` + if printf '%s\n' "$line" | grep -q -e '='; then + varname=$(printf '%s\n' "$line" | sed -e 's/=.*//') + varvalue=$(printf '%s\n' "$line" | sed -e 's/^[^=]*=//') + fi + + # Read value of current variable if exists as Environment variable + value=$(printf '%s\n' "${!varname}") + # Otherwise use value from .env file + [[ -z $value ]] && value=${varvalue} + + # Append configuration property to JS file + echo " $varname: \"$value\"," >> ./env-config.js +done < .env +echo "}" >> ./env-config.js \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 829a8fe..6325718 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,7 +14,7 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "react-jsx" + "jsx": "preserve" }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] From 68b35e60c2536353cf447f4a0162acd5a5a68ae3 Mon Sep 17 00:00:00 2001 From: levomato Date: Mon, 14 Aug 2023 10:07:50 +0200 Subject: [PATCH 2/5] typescript removed --- index.html | 2 +- package-lock.json | 15 +++++++++++++-- package.json | 3 +-- src/{main.tsx => main.jsx} | 12 +++--------- src/pages/{App.tsx => App.jsx} | 6 ++---- src/pages/{Home.tsx => Home.jsx} | 2 -- src/queries/dam.js | 1 - src/vite-env.d.ts | 1 - tsconfig.json | 21 --------------------- tsconfig.node.json | 9 --------- vite.config.js | 12 ++++++++++++ vite.config.ts | 11 ----------- 12 files changed, 32 insertions(+), 63 deletions(-) rename src/{main.tsx => main.jsx} (92%) rename src/pages/{App.tsx => App.jsx} (89%) rename src/pages/{Home.tsx => Home.jsx} (99%) delete mode 100644 src/vite-env.d.ts delete mode 100644 tsconfig.json delete mode 100644 tsconfig.node.json create mode 100644 vite.config.js delete mode 100644 vite.config.ts diff --git a/index.html b/index.html index 9298427..163197c 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@
- + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 2b0051d..9ab6e31 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@types/react-router-dom": "^5.3.3", "axios": "^1.4.0", "dagre": "^0.8.5", + "dotenv": "^16.3.1", "flowbite-react": "^0.4.11", "localforage": "^1.10.0", "match-sorter": "^6.3.1", @@ -31,7 +32,6 @@ }, "devDependencies": { "@tailwindcss/typography": "^0.5.9", - "@types/react": "^18.2.14", "@types/react-dom": "^18.2.6", "@vitejs/plugin-react": "^3.1.0", "autoprefixer": "^10.4.14", @@ -40,7 +40,6 @@ "source-map-loader": "^4.0.1", "tailwindcss": "^3.3.2", "ts-loader": "^9.4.4", - "typescript": "^5.1.6", "vite": "^4.2.0" } }, @@ -2312,6 +2311,17 @@ "csstype": "^3.0.2" } }, + "node_modules/dotenv": { + "version": "16.3.1", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz", + "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/motdotla/dotenv?sponsor=1" + } + }, "node_modules/easy-bem": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz", @@ -4239,6 +4249,7 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz", "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==", "dev": true, + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" diff --git a/package.json b/package.json index f87369e..4a5b2de 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@types/react-router-dom": "^5.3.3", "axios": "^1.4.0", "dagre": "^0.8.5", + "dotenv": "^16.3.1", "flowbite-react": "^0.4.11", "localforage": "^1.10.0", "match-sorter": "^6.3.1", @@ -32,7 +33,6 @@ }, "devDependencies": { "@tailwindcss/typography": "^0.5.9", - "@types/react": "^18.2.14", "@types/react-dom": "^18.2.6", "@vitejs/plugin-react": "^3.1.0", "autoprefixer": "^10.4.14", @@ -41,7 +41,6 @@ "source-map-loader": "^4.0.1", "tailwindcss": "^3.3.2", "ts-loader": "^9.4.4", - "typescript": "^5.1.6", "vite": "^4.2.0" } } diff --git a/src/main.tsx b/src/main.jsx similarity index 92% rename from src/main.tsx rename to src/main.jsx index 953a1b7..d9a2902 100644 --- a/src/main.tsx +++ b/src/main.jsx @@ -1,20 +1,14 @@ import React from "react"; import ReactDOM from "react-dom/client"; -import ReactTooltip from "react-tooltip"; + import App, { damLoader } from "./pages/App"; import "./index.css"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; import Home from "./pages/Home"; -import { - QueryClient, - QueryClientProvider, - useQuery, -} from "@tanstack/react-query"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import DqEdit from "./pages/DqEdit"; -import { getDomainById } from "./queries/dam.js"; import Domains from "./pages/Domains"; -import Contexts from "./pages/Contexts"; import { Link } from "react-router-dom"; import NewDomain from "./pages/NewDomain"; import CreateBlankDomain from "./pages/CreateBlankDomain"; @@ -122,7 +116,7 @@ const router = createBrowserRouter([ }, ]); -ReactDOM.createRoot(document.getElementById("root")!).render( +ReactDOM.createRoot(document.getElementById("root")).render( diff --git a/src/pages/App.tsx b/src/pages/App.jsx similarity index 89% rename from src/pages/App.tsx rename to src/pages/App.jsx index e2d188c..2537442 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.jsx @@ -1,4 +1,4 @@ -import React, { useState, useRef, useMemo } from "react"; +import { useState, useRef, useMemo } from "react"; import "reactflow/dist/style.css"; import { Background, @@ -14,12 +14,10 @@ import Sidebar from "../components/Sidebar"; import IconNode from "../nodes/IconNode"; import { createInitialElements } from "../utils/createInitialElements"; import { getLayoutedElements } from "../utils/layoutElements"; -import { RouteObject, useLoaderData, useParams } from "react-router-dom"; +import { useLoaderData, useParams } from "react-router-dom"; import { getAllRqas } from "../queries/rqa"; import { getDamById } from "../queries/dam"; -import { AppLoaderProps } from "../interfaces/AppLoaderProps"; -import { ReactJSXIntrinsicAttributes } from "@emotion/react/types/jsx-namespace"; import { string } from "prop-types"; import loadtestSpecs from "../data/loadtest-specs.json"; import { useQuery } from "@tanstack/react-query"; diff --git a/src/pages/Home.tsx b/src/pages/Home.jsx similarity index 99% rename from src/pages/Home.tsx rename to src/pages/Home.jsx index 0a90af3..363ed1d 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.jsx @@ -1,7 +1,5 @@ import dqLogo from "../assets/dqualizer_logo.png"; - import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; - import { Link, useLoaderData } from "react-router-dom"; import { getAllDams } from "../queries/dam"; diff --git a/src/queries/dam.js b/src/queries/dam.js index da0ee71..5905231 100644 --- a/src/queries/dam.js +++ b/src/queries/dam.js @@ -3,7 +3,6 @@ const backend = import.meta.env.VITE_BACKEND_URL; export const getAllDams = () => { - console.log(backend); return axios.get(`${backend}/dam/`) .then(res => res.data); } diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts deleted file mode 100644 index 11f02fe..0000000 --- a/src/vite-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/tsconfig.json b/tsconfig.json deleted file mode 100644 index 829a8fe..0000000 --- a/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "compilerOptions": { - "target": "ESNext", - "useDefineForClassFields": true, - "lib": ["DOM", "DOM.Iterable", "ESNext"], - "allowJs": false, - "skipLibCheck": true, - "esModuleInterop": false, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "module": "ESNext", - "moduleResolution": "Node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx" - }, - "include": ["src"], - "references": [{ "path": "./tsconfig.node.json" }] - } \ No newline at end of file diff --git a/tsconfig.node.json b/tsconfig.node.json deleted file mode 100644 index eedc67d..0000000 --- a/tsconfig.node.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "compilerOptions": { - "composite": true, - "module": "ESNext", - "moduleResolution": "Node", - "allowSyntheticDefaultImports": true - }, - "include": ["vite.config.ts"] - } \ No newline at end of file diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..1696969 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,12 @@ +import dotenv from 'dotenv'; +dotenv.config(); + +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'dist/app', + }, +}); diff --git a/vite.config.ts b/vite.config.ts deleted file mode 100644 index 0c20511..0000000 --- a/vite.config.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' - -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [react({ - // Add this line - include: "**/*.jsx", - })], - envDir: "./" -}) From 72aefff7fff6b7c6b762e6b99de9489b892d6083 Mon Sep 17 00:00:00 2001 From: levomato Date: Mon, 14 Aug 2023 10:13:56 +0200 Subject: [PATCH 3/5] deleted tsconfig --- tsconfig.json | 21 --------------------- 1 file changed, 21 deletions(-) delete mode 100644 tsconfig.json diff --git a/tsconfig.json b/tsconfig.json deleted file mode 100644 index 829a8fe..0000000 --- a/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "compilerOptions": { - "target": "ESNext", - "useDefineForClassFields": true, - "lib": ["DOM", "DOM.Iterable", "ESNext"], - "allowJs": false, - "skipLibCheck": true, - "esModuleInterop": false, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "module": "ESNext", - "moduleResolution": "Node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx" - }, - "include": ["src"], - "references": [{ "path": "./tsconfig.node.json" }] - } \ No newline at end of file From b3e624819e4ad1a34a90be94a46acc28909e1b33 Mon Sep 17 00:00:00 2001 From: levomato Date: Mon, 14 Aug 2023 11:41:07 +0200 Subject: [PATCH 4/5] changed nginx config --- entrypoint.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/entrypoint.sh b/entrypoint.sh index 3dfede8..504eef6 100644 --- a/entrypoint.sh +++ b/entrypoint.sh @@ -12,4 +12,4 @@ fi source /usr/share/nginx/html/env.sh # Start nginx -nginx -g "daemon off;" \ No newline at end of file +nginx -g "daemon off;" -c "/data/conf/" \ No newline at end of file From 2878d0083c64c545f976a561795f1047ad78a1bc Mon Sep 17 00:00:00 2001 From: levomato Date: Mon, 14 Aug 2023 11:41:12 +0200 Subject: [PATCH 5/5] nginx-Config added to Dockerbuild --- .dockerignore | 5 +++ .env | 2 +- Dockerfile | 6 +++- nginx.conf | 44 +++++++++++++++++++++++++++ package.json | 2 +- {public => src/assets}/werkstatt.png | Bin src/pages/Home.jsx | 3 +- vite.config.js | 22 +++++++++----- 8 files changed, 73 insertions(+), 11 deletions(-) create mode 100644 .dockerignore create mode 100644 nginx.conf rename {public => src/assets}/werkstatt.png (100%) diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..f999275 --- /dev/null +++ b/.dockerignore @@ -0,0 +1,5 @@ +node_modules / + dist +test.json +Dockerfile +npm - debug.log diff --git a/.env b/.env index bfc2ab6..2b7c036 100644 --- a/.env +++ b/.env @@ -1,2 +1,2 @@ # Please provide the Url for dqApi -VITE_BACKEND_URL= \ No newline at end of file +VITE_BACKEND_URL=http://localhost:8099/api/v1 \ No newline at end of file diff --git a/Dockerfile b/Dockerfile index dda3c9f..8278ee2 100644 --- a/Dockerfile +++ b/Dockerfile @@ -19,7 +19,7 @@ COPY . . RUN npm run build FROM --platform=$BUILDPLATFORM nginx:1.22-alpine AS runtime -COPY --from=builder /app/dist /usr/share/nginx/html +COPY --from=builder /app/dist/app /usr/share/nginx/html # Adding the env-File and the Shell-Script WORKDIR /usr/share/nginx/html @@ -27,6 +27,10 @@ COPY ./env.sh . COPY .env . COPY entrypoint.sh /usr/bin/ + +# Adding nginx-config +COPY nginx.conf /etc/nginx/conf.d/default.conf + RUN chmod +x /usr/bin/entrypoint.sh # Add bash diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 0000000..24c6ec6 --- /dev/null +++ b/nginx.conf @@ -0,0 +1,44 @@ +server { + listen 80; + server_name localhost; + + #access_log /var/log/nginx/host.access.log main; + + location / { + root /usr/share/nginx/html; + index index.html index.html; + try_files $uri $uri/ /index.html; + } + + #error_page 404 /404.html; + + # redirect server error pages to the static page /50x.html + # + error_page 500 502 503 504 /50x.html; + location = /50x.html { + root /usr/share/nginx/html; + } + + # proxy the PHP scripts to Apache listening on 127.0.0.1:80 + # + #location ~ \.php$ { + # proxy_pass http://127.0.0.1; + #} + + # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 + # + #location ~ \.php$ { + # root html; + # fastcgi_pass 127.0.0.1:9000; + # fastcgi_index index.php; + # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; + # include fastcgi_params; + #} + + # deny access to .htaccess files, if Apache's document root + # concurs with nginx's one + # + #location ~ /\.ht { + # deny all; + #} +} \ No newline at end of file diff --git a/package.json b/package.json index 4a5b2de..259ae2c 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "type": "module", "scripts": { "dev": "vite", - "build": "tsc && vite build", + "build": "vite build", "preview": "vite preview" }, "dependencies": { diff --git a/public/werkstatt.png b/src/assets/werkstatt.png similarity index 100% rename from public/werkstatt.png rename to src/assets/werkstatt.png diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 363ed1d..7f4a184 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,4 +1,5 @@ import dqLogo from "../assets/dqualizer_logo.png"; +import WerkstattScreenshot from "../assets/werkstatt.png"; import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; import { Link, useLoaderData } from "react-router-dom"; import { getAllDams } from "../queries/dam"; @@ -22,7 +23,7 @@ export default function Home() {
diff --git a/vite.config.js b/vite.config.js index 1696969..cd73074 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,12 +1,20 @@ import dotenv from 'dotenv'; dotenv.config(); -import { defineConfig } from 'vite'; +import { defineConfig, loadEnv } from 'vite'; import react from '@vitejs/plugin-react'; -export default defineConfig({ - plugins: [react()], - build: { - outDir: 'dist/app', - }, -}); + +export default ({ mode }) => { + const env = { ...process.env, ...loadEnv(mode, process.cwd(), '') }; + return defineConfig({ + plugins: [react()], + build: { + outDir: 'dist/app', + }, + define: { + __VITE_BACKEND_URL__: JSON.stringify(env.VITE_BACKEND_URL) + }, + }) + +};