refactor(web): use transformindexhtml vite hook (#2488)
Amir Zarrinkafsh
GitHub
parent
aa18fd0256
commit
9445878ca2
|
|
@ -10,8 +10,7 @@ COPY web ./
|
|||
|
||||
# Install the dependencies and build
|
||||
RUN yarn global add pnpm && \
|
||||
pnpm install --frozen-lockfile && pnpm coverage && \
|
||||
sed -i -e 's/{{.[a-zA-Z]*}}/"&"/g' /node/src/internal/server/public_html/index.html
|
||||
pnpm install --frozen-lockfile && pnpm coverage
|
||||
|
||||
# =======================================
|
||||
# ===== Build image for the backend =====
|
||||
|
|
|
|||
|
|
@ -8,8 +8,7 @@ WORKDIR /node/src/app
|
|||
COPY web ./
|
||||
|
||||
# Install the dependencies and build
|
||||
RUN yarn install --frozen-lockfile && yarn build && \
|
||||
sed -i -e 's/{{.[a-zA-Z]*}}/"&"/g' /node/src/internal/server/public_html/index.html
|
||||
RUN yarn install --frozen-lockfile && yarn build
|
||||
|
||||
# =======================================
|
||||
# ===== Build image for the backend =====
|
||||
|
|
|
|||
|
|
@ -82,13 +82,6 @@ func buildFrontend(branch string) {
|
|||
if err != nil {
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ func waitUntilAutheliaFrontendIsReady(dockerEnvironment *DockerEnvironment) erro
|
|||
90*time.Second,
|
||||
dockerEnvironment,
|
||||
"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 {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<title>Login - Authelia</title>
|
||||
</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>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
|
|
|
|||
|
|
@ -130,6 +130,7 @@
|
|||
"@types/react-router-dom": "5.3.1",
|
||||
"@typescript-eslint/eslint-plugin": "4.33.0",
|
||||
"@typescript-eslint/parser": "4.33.0",
|
||||
"@vitejs/plugin-react-refresh": "1.3.6",
|
||||
"esbuild-jest": "0.5.0",
|
||||
"eslint-config-prettier": "8.3.0",
|
||||
"eslint-config-react-app": "6.0.0",
|
||||
|
|
@ -149,9 +150,9 @@
|
|||
"react-test-renderer": "17.0.2",
|
||||
"typescript": "4.4.3",
|
||||
"vite": "2.6.5",
|
||||
"vite-plugin-eslint": "1.3.0",
|
||||
"vite-plugin-istanbul": "2.2.0",
|
||||
"vite-plugin-svgr": "0.4.0",
|
||||
"vite-react": "0.0.41",
|
||||
"vite-tsconfig-paths": "3.3.15"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1 +0,0 @@
|
|||
/// <reference types="react-scripts" />
|
||||
|
|
@ -1,12 +1,29 @@
|
|||
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 svgr from "vite-plugin-svgr";
|
||||
import { defineConfig } from "vite-react";
|
||||
import tsconfigPaths from "vite-tsconfig-paths";
|
||||
|
||||
// @ts-ignore
|
||||
export default defineConfig(({ mode }) => {
|
||||
const env = loadEnv(mode, "env");
|
||||
const isCoverage = process.env.VITE_COVERAGE === "true";
|
||||
const sourcemap = isCoverage ? "inline" : undefined;
|
||||
|
||||
const htmlPlugin = () => {
|
||||
return {
|
||||
name: "html-transform",
|
||||
transformIndexHtml(html: string) {
|
||||
return html.replace(/%(.*?)%/g, function (match, p1) {
|
||||
return env[p1];
|
||||
});
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const istanbulPlugin = isCoverage
|
||||
? istanbul({
|
||||
include: "src/*",
|
||||
|
|
@ -15,20 +32,9 @@ const istanbulPlugin = isCoverage
|
|||
requireEnv: true,
|
||||
})
|
||||
: undefined;
|
||||
const sourcemap = isCoverage ? "inline" : undefined;
|
||||
|
||||
export default defineConfig(({ mode }) => {
|
||||
const env = loadEnv(mode, "env");
|
||||
|
||||
function assetOutput(name: string | undefined) {
|
||||
if (name && name.endsWith(".css")) {
|
||||
return "static/css/[name].[hash].[ext]";
|
||||
}
|
||||
|
||||
return "static/media/[name].[hash].[ext]";
|
||||
}
|
||||
|
||||
return {
|
||||
base: "./",
|
||||
build: {
|
||||
sourcemap,
|
||||
outDir: "../internal/server/public_html",
|
||||
|
|
@ -37,18 +43,15 @@ export default defineConfig(({ mode }) => {
|
|||
output: {
|
||||
entryFileNames: `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: {
|
||||
open: false,
|
||||
|
|
@ -64,6 +67,6 @@ export default defineConfig(({ mode }) => {
|
|||
},
|
||||
],
|
||||
},
|
||||
plugins: [istanbulPlugin, svgr(), tsconfigPaths()],
|
||||
plugins: [eslintPlugin(), htmlPlugin(), istanbulPlugin, reactRefresh(), svgr(), tsconfigPaths()],
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue