try another pattern

clowder-framework · Aug 19, 2024 · 8f4800c · 8f4800c
1 parent 1153545
commit 8f4800c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 34 deletions.
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -5,10 +5,11 @@
 FROM node:16.15.1 AS clowder-build
 WORKDIR /usr/src/app
 
-ARG BASE_URL_ROUTE
-ENV BASE_URL_ROUTE=${BASE_URL_ROUTE:-/}
-RUN BASE_URL_ROUTE=${BASE_URL_ROUTE%/} && BASE_URL_ROUTE=${BASE_URL_ROUTE#/} && BASE_URL_ROUTE=/${BASE_URL_ROUTE}
-RUN echo "BASE_URL_ROUTE: ${BASE_URL_ROUTE}"
+# Define the argument and environment variable
+# Make sure BASE_URL_ROUTE starts with a slash and does not end with a slash
+ARG BASE_URL_ROUTE=""
+ENV BASE_URL_ROUTE=${BASE_URL_ROUTE:-}
+RUN echo "Build time BASE_URL_ROUTE: ${BASE_URL_ROUTE}"
 
 # copy only package for caching purposes
 COPY ["package.json", "package-lock.json*", "./"]
@@ -28,21 +29,21 @@ RUN npm run build
 
 FROM nginx:alpine as clowder-runtime
 
-# Set the environment variable with a default value if not provided
-ARG BASE_URL_ROUTE
-ENV BASE_URL_ROUTE=${BASE_URL_ROUTE:-/}
-RUN BASE_URL_ROUTE=${BASE_URL_ROUTE%/} && BASE_URL_ROUTE=${BASE_URL_ROUTE#/} && BASE_URL_ROUTE=/${BASE_URL_ROUTE}
-RUN echo "BASE_URL_ROUTE: ${BASE_URL_ROUTE}"
+# Define the argument and environment variable
+# Make sure BASE_URL_ROUTE starts with a slash and does not end with a slash
+ARG BASE_URL_ROUTE=""
+ENV BASE_URL_ROUTE=${BASE_URL_ROUTE:-}
+RUN echo "Runtime BASE_URL_ROUTE: ${BASE_URL_ROUTE}"
 
 # Adjust the paths based on BASE_URL_ROUTE
 RUN rm -rf /usr/share/nginx/html/ && \
- mkdir -p /usr/share/nginx/html${BASE_URL_ROUTE}/public && \
- mkdir -p /usr/share/nginx/html${BASE_URL_ROUTE}/styles
+ mkdir -p /usr/share/nginx/html/${BASE_URL_ROUTE}/public && \
+ mkdir -p /usr/share/nginx/html/${BASE_URL_ROUTE}/styles
 
 # Copy the built application from the previous stage
-COPY --from=clowder-build /usr/src/app/dist/ /usr/share/nginx/html${BASE_URL_ROUTE}/
-COPY src/public /usr/share/nginx/html${BASE_URL_ROUTE}/public/
-COPY src/styles /usr/share/nginx/html${BASE_URL_ROUTE}/styles/
+COPY --from=clowder-build /usr/src/app/dist/ /usr/share/nginx/html/${BASE_URL_ROUTE}
+COPY src/public /usr/share/nginx/html/${BASE_URL_ROUTE}/public/
+COPY src/styles /usr/share/nginx/html/${BASE_URL_ROUTE}/styles/
 
 # Copy the NGINX configuration template
 COPY clowder.conf.template /etc/nginx/conf.d/default.conf.template

diff --git a/frontend/clowder.conf.template b/frontend/clowder.conf.template
@@ -3,18 +3,10 @@ server {
 
  root /usr/share/nginx/html;
 
- location ${BASE_URL_ROUTE}/ {
- root /usr/share/nginx/html/;
- index index.html;
- try_files $uri $uri/ ${BASE_URL_ROUTE}/index.html;
- }
-
- location ${BASE_URL_ROUTE}/public/ {
- root /usr/share/nginx/html${BASE_URL_ROUTE};
- }
-
- location ${BASE_URL_ROUTE}/style/ {
- root /usr/share/nginx/html${BASE_URL_ROUTE};
+ location / {
+ root /usr/share/nginx/html;
+ index index.html index.htm;
+ try_files $uri ${BASE_URL_ROUTE}/index.html;
  }
 
  error_page 500 502 503 504 /50x.html;

diff --git a/frontend/src/index.ejs b/frontend/src/index.ejs
@@ -26,7 +26,7 @@
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
  />
- <link href="<%= htmlWebpackPlugin.options.publicPath !=='auto' ? htmlWebpackPlugin.options.publicPath + 'styles/main.css' :'styles/main.css' %>" rel="stylesheet">
+ <link href="<%= htmlWebpackPlugin.options.publicPath !=='auto' ? htmlWebpackPlugin.options.publicPath + '/styles/main.css' :'styles/main.css' %>" rel="stylesheet">
  <title>Clowder v2</title>
 </head>
 <body>

diff --git a/frontend/webpack.config.prod.js b/frontend/webpack.config.prod.js
@@ -35,9 +35,6 @@ export default {
  filename: "[name].bundle.js",
  chunkFilename: "[name].chunk.bundle.js",
  path: path.resolve(__dirname, "dist"),
- publicPath: process.env.BASE_URL_ROUTE
- ? `${process.env.BASE_URL_ROUTE}/`
- : "/", // Ensure trailing slash
  },
  plugins: [
  // NOTE: `npm run preinstall` currently runs eslint
@@ -68,7 +65,7 @@ export default {
  // Generate HTML file that contains references to generated bundles. See here for how this works: https://github.com/ampedandwired/html-webpack-plugin#basic-usage
  new HtmlWebpackPlugin({
  template: "src/index.ejs",
- favicon: "./src/public/favicon.ico",
+ favicon: `src/public/favicon.ico`,
  minify: {
  removeComments: true,
  collapseWhitespace: true,
@@ -85,9 +82,6 @@ export default {
  // Note that you can add custom options here if you need to handle other custom logic in index.html
  // To track JavaScript errors via TrackJS, sign up for a free trial at TrackJS.com and enter your token below.
  trackJSToken: "",
- publicPath: process.env.BASE_URL_ROUTE
- ? `${process.env.BASE_URL_ROUTE}/`
- : "/", // Ensure trailing slash
  }),
 
  new webpack.LoaderOptionsPlugin({