tfoman/devops-directive-docker-course
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

restructure repo, separate sample app from docker configs

Browse Source
This commit is contained in:
sid palas
2023-01-27 09:26:02 -05:00
parent dd5d7bff0b
commit 08510ae883
58 changed files with 645 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
05-example-web-application/client-react/.dockerignore Normal file
View File

@ -0,0 +1 @@
node_modules

24
05-example-web-application/client-react/.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

5
05-example-web-application/client-react/README.md Normal file
View File

@ -0,0 +1,5 @@
```
npm create vite@latest
npm i @tanstack/react-query axios
```

12
05-example-web-application/client-react/index.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DevOps Directive Docker Course</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

24
05-example-web-application/client-react/nginx.conf Normal file
View File

@ -0,0 +1,24 @@
server {
listen 80;
location /api/golang/ {
resolver 127.0.0.1;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://api-golang:8080/;
}
location /api/node/ {
resolver 127.0.0.1;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://api-node:3000/;
}
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
include /etc/nginx/extra-conf.d/*.conf;
}

1024
05-example-web-application/client-react/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

23
05-example-web-application/client-react/package.json Normal file
View File

@ -0,0 +1,23 @@
{
"name": "client-react",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --host",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@tanstack/react-query": "^4.22.4",
"axios": "^1.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.9",
"@vitejs/plugin-react-swc": "^3.0.0",
"vite": "^4.0.0"
}
}

BIN
05-example-web-application/client-react/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

41
05-example-web-application/client-react/src/App.css Normal file
View File

@ -0,0 +1,41 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}

46
05-example-web-application/client-react/src/App.jsx Normal file
View File

@ -0,0 +1,46 @@
import { useState } from 'react'
import {
QueryClient,
QueryClientProvider,
useQuery,
} from "@tanstack/react-query";
import axios from "axios";
import './App.css'
const queryClient = new QueryClient();
function Example(props) {
const { isLoading, error, data, isFetching } = useQuery({
queryKey: [props.api],
queryFn: () =>
axios
.get(`${props.api}`)
.then((res) => res.data),
});
if (isLoading) return `Loading ${props.api}... `;
if (error) return "An error has occurred: " + error.message;
return (
<div className="App">
<p>---</p>
<p>API: {data.api}</p>
<p>Time from DB: {data.now}</p>
<div>{isFetching ? "Updating..." : ""}</div>
</div>
)
}
export function App() {
return (
<QueryClientProvider client={queryClient}>
<h1>Hey Team! 👋</h1>
<Example api="/api/golang/"/>
<Example api="/api/node/"/>
</QueryClientProvider>
);
}
export default App

70
05-example-web-application/client-react/src/index.css Normal file
View File

@ -0,0 +1,70 @@
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

10
05-example-web-application/client-react/src/main.jsx Normal file
View File

@ -0,0 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

26
05-example-web-application/client-react/vite.config.js Normal file
View File

@ -0,0 +1,26 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import dns from 'dns';
dns.setDefaultResultOrder('verbatim');
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
proxy: {
'/api/golang': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api\/golang/, ''),
secure: false,
},
'/api/node': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api\/node/, ''),
secure: false,
},
},
},
});