Marbes/Luncher
5
2
Fork 0
Code Issues 6 Pull Requests Packages Projects Releases Wiki Activity

Migrace sestavování klienta na Vite

Browse Source
This commit is contained in:
Martin Berka 2024-12-11 22:54:57 +01:00
parent b0d8a1a830
commit 18f2b72133
16 changed files with 5786 additions and 11889 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
Dockerfile
View File

@ -3,26 +3,44 @@ FROM node:18-alpine3.18 AS builder
WORKDIR /build WORKDIR /build
COPY package.json . # Zkopírování závislostí - server
COPY yarn.lock .
COPY server/package.json ./server/ COPY server/package.json ./server/
COPY client/package.json ./client/ COPY server/yarn.lock ./server/
# Zkopírování závislostí - klient
COPY client/package.json ./client/
COPY client/yarn.lock ./client/
# Instalace závislostí - server
WORKDIR /build/server
RUN yarn install --frozen-lockfile RUN yarn install --frozen-lockfile
# Instalace závislostí - klient
WORKDIR /build/client
RUN yarn install --frozen-lockfile
WORKDIR /build
# Zkopírování build závislostí - server
COPY server/tsconfig.json ./server/ COPY server/tsconfig.json ./server/
COPY server/src ./server/src/ COPY server/src ./server/src/
# Zkopírování build závislostí - klient
COPY client/tsconfig.json ./client/ COPY client/tsconfig.json ./client/
COPY client/vite.config.ts ./client/
COPY client/vite-env.d.ts ./client/
COPY client/index.html ./client/
COPY client/src ./client/src COPY client/src ./client/src
COPY client/public ./client/public COPY client/public ./client/public
# Zkopírování společných typů
COPY types ./types/ COPY types ./types/
# Sestavení serveru
WORKDIR /build/server WORKDIR /build/server
RUN yarn build RUN yarn build
# Sestavení klienta
WORKDIR /build/client WORKDIR /build/client
RUN yarn build RUN yarn build
@ -33,11 +51,18 @@ ENV NODE_ENV production
WORKDIR /app WORKDIR /app
COPY --from=builder /build/node_modules ./node_modules # Vykopírování sestaveného serveru
COPY --from=builder /build/server/node_modules ./server/node_modules
COPY --from=builder /build/server/dist ./ COPY --from=builder /build/server/dist ./
COPY server/resources ./server/resources COPY server/resources ./server/resources
COPY --from=builder /build/client/build ./public
# Vykopírování sestaveného klienta
COPY --from=builder /build/client/dist ./public
# Zkopírování produkčních .env serveru
COPY /server/.env.production ./server/src COPY /server/.env.production ./server/src
# Zkopírování konfigurace easter eggů
# TODO tohle spadne když nebude existovat! # TODO tohle spadne když nebude existovat!
COPY /server/.easter-eggs.json ./server/ COPY /server/.easter-eggs.json ./server/

1
client/.gitignore vendored
View File

@ -1,2 +1,3 @@
build build
dist
src/types src/types

21
client/index.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Moderní webová aplikace pro lepší správu obědových preferencí" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<title>Luncher</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>

16
client/package.json
View File

@ -3,6 +3,7 @@
"version": "0.1.0", "version": "0.1.0",
"license": "MIT", "license": "MIT",
"private": true, "private": true,
"type": "module",
"homepage": ".", "homepage": ".",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.0", "@fortawesome/fontawesome-svg-core": "^6.4.0",
@ -13,31 +14,30 @@
"@types/node": "^20.11.20", "@types/node": "^20.11.20",
"@types/react": "^18.0.33", "@types/react": "^18.0.33",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^4.3.4",
"bootstrap": "^5.2.3", "bootstrap": "^5.2.3",
"react": "^18.2.0", "react": "^18.2.0",
"react-bootstrap": "^2.7.2", "react-bootstrap": "^2.7.2",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-jwt": "^1.2.0", "react-jwt": "^1.2.0",
"react-modal": "^3.16.1", "react-modal": "^3.16.1",
"react-scripts": "5.0.1",
"react-select-search": "^4.1.6", "react-select-search": "^4.1.6",
"react-snowfall": "^2.2.0", "react-snowfall": "^2.2.0",
"react-toastify": "^10.0.4", "react-toastify": "^10.0.4",
"sass": "^1.80.6", "sass": "^1.80.6",
"socket.io-client": "^4.6.1", "socket.io-client": "^4.6.1",
"typescript": "^5.3.3" "typescript": "^5.3.3",
"vite": "^6.0.3",
"vite-tsconfig-paths": "^5.1.4"
}, },
"scripts": { "scripts": {
"copy-types": "cp -r ../types ./src", "copy-types": "cp -r ../types ./src",
"start": "yarn copy-types && react-scripts start", "start": "yarn copy-types && vite",
"build": "yarn copy-types && GENERATE_SOURCEMAP=false react-scripts build", "build": "yarn copy-types && vite build"
"test": "react-scripts test",
"eject": "react-scripts eject"
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [
"react-app", "react-app"
"react-app/jest"
] ]
}, },
"browserslist": { "browserslist": {

43
client/public/index.html
View File

@ -1,43 +0,0 @@
<!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="Moderní webová aplikace pro lepší správu obědových preferencí" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Luncher</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

12
client/src/Utils.tsx
View File

@ -1,15 +1,3 @@
/**
* Vrátí kořenovou URL serveru na základě aktuálního prostředí (vývojovou či produkční).
*
* @returns kořenová URL serveru
*/
export const getBaseUrl = (): string => {
if (process.env.PUBLIC_URL) {
return process.env.PUBLIC_URL;
}
return 'http://127.0.0.1:3001';
}
const TOKEN_KEY = "token"; const TOKEN_KEY = "token";
/** /**

8
client/src/api/Api.ts
View File

@ -1,5 +1,5 @@
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import { getBaseUrl, getToken } from "../Utils"; import { getToken } from "../Utils";
/** /**
* Wrapper pro volání API, u kterých chceme automaticky zobrazit toaster s chybou ze serveru. * Wrapper pro volání API, u kterých chceme automaticky zobrazit toaster s chybou ze serveru.
@ -23,7 +23,7 @@ async function request<TResponse>(
config.headers = config?.headers ? new Headers(config.headers) : new Headers(); config.headers = config?.headers ? new Headers(config.headers) : new Headers();
config.headers.set("Authorization", `Bearer ${getToken()}`); config.headers.set("Authorization", `Bearer ${getToken()}`);
try { try {
const response = await fetch(getBaseUrl() + url, config); const response = await fetch(url, config);
if (!response.ok) { if (!response.ok) {
// TODO tohle je blbě, jelikož automaticky očekáváme, že v případě chyby přijde vždy JSON, což není pravda // TODO tohle je blbě, jelikož automaticky očekáváme, že v případě chyby přijde vždy JSON, což není pravda
const json = await response.json(); const json = await response.json();
@ -48,7 +48,7 @@ async function blobRequest(
config.headers = config?.headers ? new Headers(config.headers) : new Headers(); config.headers = config?.headers ? new Headers(config.headers) : new Headers();
config.headers.set("Authorization", `Bearer ${getToken()}`); config.headers.set("Authorization", `Bearer ${getToken()}`);
try { try {
const response = await fetch(getBaseUrl() + url, config); const response = await fetch(url, config);
if (!response.ok) { if (!response.ok) {
const json = await response.json(); const json = await response.json();
// Vyhodíme samotnou hlášku z odpovědi, odchytí si jí errorHandler // Vyhodíme samotnou hlášku z odpovědi, odchytí si jí errorHandler
@ -67,7 +67,7 @@ export const api = {
} }
export const getQrUrl = (login: string) => { export const getQrUrl = (login: string) => {
return `${getBaseUrl()}/api/qr?login=${login}`; return `/api/qr?login=${login}`;
} }
export const getData = async (dayIndex?: number) => { export const getData = async (dayIndex?: number) => {

1
client/src/react-app-env.d.ts vendored
View File

@ -1 +0,0 @@
/// <reference types="react-scripts" />

5
client/tsconfig.json
View File

@ -1,11 +1,14 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "ESNext",
"lib": [ "lib": [
"dom", "dom",
"dom.iterable", "dom.iterable",
"esnext" "esnext"
], ],
"types": [
"vite/client"
],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": true, "esModuleInterop": true,

1
client/vite-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

16
client/vite.config.ts Normal file
View File

@ -0,0 +1,16 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import viteTsconfigPaths from 'vite-tsconfig-paths'
export default defineConfig({
// depending on your application, base can also be "/"
base: '',
plugins: [react(), viteTsconfigPaths()],
server: {
open: true,
port: 3000,
proxy: {
'/api': 'http://localhost:3001',
}
},
})

1574
client/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@ -1,7 +0,0 @@
{
"private": true,
"workspaces": [
"client",
"server"
]
}

1
server/package.json
View File

@ -15,6 +15,7 @@
"@babel/preset-env": "^7.22.20", "@babel/preset-env": "^7.22.20",
"@babel/preset-typescript": "^7.23.0", "@babel/preset-typescript": "^7.23.0",
"@types/express": "^4.17.17", "@types/express": "^4.17.17",
"@types/jest": "^29.5.14",
"@types/jsonwebtoken": "^9.0.6", "@types/jsonwebtoken": "^9.0.6",
"@types/node": "^20.11.20", "@types/node": "^20.11.20",
"@types/request-promise": "^4.1.48", "@types/request-promise": "^4.1.48",

4123
server/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff

11805
yarn.lock
View File

File diff suppressed because it is too large Load Diff