RPJosh
/
authelia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(web): use transformindexhtml vite hook (#2488)

pull/2489/head
Amir Zarrinkafsh 2021-10-11 20:30:02 +11:00 committed by GitHub
parent aa18fd0256
commit 9445878ca2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 58 additions and 612 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Dockerfile.coverage
View File

@ -10,8 +10,7 @@ COPY web ./
# Install the dependencies and build # Install the dependencies and build
RUN yarn global add pnpm && \ RUN yarn global add pnpm && \
pnpm install --frozen-lockfile && pnpm coverage && \ pnpm install --frozen-lockfile && pnpm coverage
sed -i -e 's/{{.[a-zA-Z]*}}/"&"/g' /node/src/internal/server/public_html/index.html
# ======================================= # =======================================
# ===== Build image for the backend ===== # ===== Build image for the backend =====

3
Dockerfile.dev
View File

@ -8,8 +8,7 @@ WORKDIR /node/src/app
COPY web ./ COPY web ./
# Install the dependencies and build # Install the dependencies and build
RUN yarn install --frozen-lockfile && yarn build && \ RUN yarn install --frozen-lockfile && yarn build
sed -i -e 's/{{.[a-zA-Z]*}}/"&"/g' /node/src/internal/server/public_html/index.html
# ======================================= # =======================================
# ===== Build image for the backend ===== # ===== Build image for the backend =====

7
cmd/authelia-scripts/cmd_build.go
View File

@ -82,13 +82,6 @@ func buildFrontend(branch string) {
if err != nil { if err != nil {
log.Fatal(err) log.Fatal(err)
} }
cmd = utils.CommandWithStdout("bash", "-c", "sed -i -e 's/{{.[a-zA-Z]*}}/\"&\"/g' internal/server/public_html/index.html")
err = cmd.Run()
if err != nil {
log.Fatal(err)
}
} }
} }

2
internal/suites/environment.go
View File

@ -55,7 +55,7 @@ func waitUntilAutheliaFrontendIsReady(dockerEnvironment *DockerEnvironment) erro
90*time.Second, 90*time.Second,
dockerEnvironment, dockerEnvironment,
"authelia-frontend", "authelia-frontend",
[]string{"vite v2.6.3 dev server running at", "ready in"}) []string{"dev server running at", "ready in"})
} }
func waitUntilSambaIsReady(dockerEnvironment *DockerEnvironment) error { func waitUntilSambaIsReady(dockerEnvironment *DockerEnvironment) error {

2
web/index.html
View File

@ -13,7 +13,7 @@
<title>Login - Authelia</title> <title>Login - Authelia</title>
</head> </head>
<body data-basepath="<%- VITE_PUBLIC_URL %>" data-rememberme="<%- VITE_REMEMBER_ME %>" data-resetpassword="<%- VITE_RESET_PASSWORD %>" data-theme="<%- VITE_THEME %>"> <body data-basepath="%VITE_PUBLIC_URL%" data-rememberme="%VITE_REMEMBER_ME%" data-resetpassword="%VITE_RESET_PASSWORD%" data-theme="%VITE_THEME%">
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/index.tsx"></script> <script type="module" src="/src/index.tsx"></script>

3
web/package.json
View File

@ -130,6 +130,7 @@
"@types/react-router-dom": "5.3.1", "@types/react-router-dom": "5.3.1",
"@typescript-eslint/eslint-plugin": "4.33.0", "@typescript-eslint/eslint-plugin": "4.33.0",
"@typescript-eslint/parser": "4.33.0", "@typescript-eslint/parser": "4.33.0",
"@vitejs/plugin-react-refresh": "1.3.6",
"esbuild-jest": "0.5.0", "esbuild-jest": "0.5.0",
"eslint-config-prettier": "8.3.0", "eslint-config-prettier": "8.3.0",
"eslint-config-react-app": "6.0.0", "eslint-config-react-app": "6.0.0",
@ -149,9 +150,9 @@
"react-test-renderer": "17.0.2", "react-test-renderer": "17.0.2",
"typescript": "4.4.3", "typescript": "4.4.3",
"vite": "2.6.5", "vite": "2.6.5",
"vite-plugin-eslint": "1.3.0",
"vite-plugin-istanbul": "2.2.0", "vite-plugin-istanbul": "2.2.0",
"vite-plugin-svgr": "0.4.0", "vite-plugin-svgr": "0.4.0",
"vite-react": "0.0.41",
"vite-tsconfig-paths": "3.3.15" "vite-tsconfig-paths": "3.3.15"
} }
} }

586
web/pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

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

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

63
web/vite.config.ts
View File

@ -1,34 +1,40 @@
import path from "path"; import path from "path";
import { loadEnv } from "vite"; import reactRefresh from "@vitejs/plugin-react-refresh";
import { defineConfig, loadEnv } from "vite";
import eslintPlugin from "vite-plugin-eslint";
import istanbul from "vite-plugin-istanbul"; import istanbul from "vite-plugin-istanbul";
import svgr from "vite-plugin-svgr"; import svgr from "vite-plugin-svgr";
import { defineConfig } from "vite-react";
import tsconfigPaths from "vite-tsconfig-paths"; import tsconfigPaths from "vite-tsconfig-paths";
const isCoverage = process.env.VITE_COVERAGE === "true"; // @ts-ignore
const istanbulPlugin = isCoverage
? istanbul({
include: "src/*",
exclude: ["node_modules"],
extension: [".js", ".jsx", ".ts", ".tsx"],
requireEnv: true,
})
: undefined;
const sourcemap = isCoverage ? "inline" : undefined;
export default defineConfig(({ mode }) => { export default defineConfig(({ mode }) => {
const env = loadEnv(mode, "env"); const env = loadEnv(mode, "env");
const isCoverage = process.env.VITE_COVERAGE === "true";
const sourcemap = isCoverage ? "inline" : undefined;
function assetOutput(name: string | undefined) { const htmlPlugin = () => {
if (name && name.endsWith(".css")) { return {
return "static/css/[name].[hash].[ext]"; name: "html-transform",
} transformIndexHtml(html: string) {
return html.replace(/%(.*?)%/g, function (match, p1) {
return env[p1];
});
},
};
};
return "static/media/[name].[hash].[ext]"; const istanbulPlugin = isCoverage
} ? istanbul({
include: "src/*",
exclude: ["node_modules"],
extension: [".js", ".jsx", ".ts", ".tsx"],
requireEnv: true,
})
: undefined;
return { return {
base: "./",
build: { build: {
sourcemap, sourcemap,
outDir: "../internal/server/public_html", outDir: "../internal/server/public_html",
@ -37,19 +43,16 @@ export default defineConfig(({ mode }) => {
output: { output: {
entryFileNames: `static/js/[name].[hash].js`, entryFileNames: `static/js/[name].[hash].js`,
chunkFileNames: `static/js/[name].[hash].js`, chunkFileNames: `static/js/[name].[hash].js`,
assetFileNames: ({ name }) => assetOutput(name), assetFileNames: ({ name }) => {
if (name && name.endsWith(".css")) {
return "static/css/[name].[hash].[ext]";
}
return "static/media/[name].[hash].[ext]";
},
}, },
}, },
}, },
envDir: "env",
eslint: {
enable: true,
},
html: {
injectData: {
...env,
},
},
server: { server: {
open: false, open: false,
hmr: { hmr: {
@ -64,6 +67,6 @@ export default defineConfig(({ mode }) => {
}, },
], ],
}, },
plugins: [istanbulPlugin, svgr(), tsconfigPaths()], plugins: [eslintPlugin(), htmlPlugin(), istanbulPlugin, reactRefresh(), svgr(), tsconfigPaths()],
}; };
}); });