[BUG?] - Paths other than `/`are not working

[t3chn0m4g3]

Description As solved in #31 I was using VUE_APP_PUBLIC_PATH=/elasticvue/ yarn build to adjust the base path which was working fine with v0.44.0. Today I was trying to build elasticvue v1.0.4 which went fine, howeverVUE_APP_PUBLIC_PATH=/elasticvue/ yarn build and VITE_APP_PUBLIC_PATH=/elasticvue/ yarn build are both (at least partially) ignored.

Steps To Reproduce The Dockerfile I am using (I can see no difference in the docker or web build):

FROM node:20-alpine AS builder
#
# Prep and build Elasticvue 
RUN apk -U --no-cache add git && \
    git clone https://github.com/cars10/elasticvue /opt/src && \
# We need to adjust consts.ts so the user has connection suggestion for reverse proxied ES
    sed -i "s#export const DEFAULT_CLUSTER_URI = 'http://localhost:9200'#export const DEFAULT_CLUSTER_URI = window.location.origin + '/es'#g" /opt/src/src/consts.ts && \
    sed -i 's#href="/images/logo/favicon.ico"#href="images/logo/favicon.ico"#g' /opt/src/index.html && \
    mkdir /opt/app && \
    cd /opt/app && \
    cp /opt/src/package.json . && \
    cp /opt/src/yarn.lock . && \
    yarn install && \
    cp -R /opt/src/* . && \
    VITE_APP_BUILD_MODE=docker VUE_APP_PUBLIC_PATH=/elasticvue/ yarn build && \
    yarn build && \
    cd dist && \
    tar cvfz esvue.tgz *
#    
FROM scratch AS exporter
COPY --from=builder /opt/app/dist/esvue.tgz /

In the index.html from the distI noticed the links to the assets are beginning with /assets instead of the expected relative assets as path. This I could easily solve and I could start elastivcue, but the page had the wrong fonts and the scripts did not work correctly. Checking the nginx logs I could see direct requests to /cluster, /assets, etc. So I am guessing during the yarn build some paths are not correctly replaced.

I identified an import of router.js instead of router.ts, however fixing it did not solve it for me: https://github.com/cars10/elasticvue/blob/868e20e662de24a384f839d7fcd7e7eb7c7487b2/src/main.ts#L6

Adjusting the paths in the router.ts helped and in the logs I can now see requests are being made to i.e. /elasticvue/assets but some assets, i.e. the font, still seem to try loading from static resources, the cause is the index.css which still holds static paths such as /assets:

Any help / tips appreciated. Thanks in advance.

[cars10]

hey @t3chn0m4g3 , i will look into this. BTW: you don't need to adjust the source code to provide default credentials. Elasticvue supports providing default clusters since 1.0.1 :)

[cars10]

Can you please try the following:

1. Adjust your build command to use VITE_APP_PUBLIC_PATH, e.g.:

RUN VITE_APP_BUILD_MODE=docker VITE_APP_PUBLIC_PATH=/elasticvue/ yarn build

2. Adjust your nginx config - i used the default config that is used for the docker image (docker/nginx/elasticvue.conf)

server {
  listen 8080;
  server_name _;
  root /usr/share/nginx/html;

  location / {
    try_files $uri $uri/ /index.html?$args;
  }
}

This setup works as expected. Elasticvue is reachable via localhost:8080/elasticvue, and even redirects from localhost:8080 to /elasticvue. I still recommend using subdomains instead of subdirectories if you can - to completely prevent these issues.

[t3chn0m4g3]

@cars10 Thanks for the checking this out. I have tried VITE_APP_BUILD_MODE=docker VITE_APP_PUBLIC_PATH=/elasticvue/ yarn build and this resulted still in some index.css and index.html pointing to the wrong paths / resources.

Also I can confirm, when location is on root as / it works since NGINX will find the resources. Using /elasticvue/ and checking the logs reveals the same issues as mentioned.

In the vite.config.mjs something like base seems to be missing.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'url'

function removeDataTestid(node) {
  if (node.type === 1 /* NodeTypes.ELEMENT */) {
    node.props = node.props.filter(prop => prop.type === 6 ? prop.name !== 'data-testid' : true)
  }
}

const prod = process.env.NODE_ENV === 'production'

export default defineConfig({
  base: '/elasticvue/', // base missing?
  plugins: [
    vue({
      template: {
        transformAssetUrls,
        compilerOptions: {
          nodeTransforms: prod ? [removeDataTestid] : [],
        }
      }
    }),
    quasar(),
    VueI18nPlugin({
      include: resolve(dirname(fileURLToPath(import.meta.url)), './src/locales/**'),
      strictMessage: false
    })
  ],
  build: {
    sourcemap: true
  },
  define: {
    '__APP_VERSION__': JSON.stringify(process.env.npm_package_version),
  }
})

[cars10]

Have you checked for caching issues? I cannot reproduce a single failing resource when using VITE_APP_PUBLIC_PATH. The base setting that you mentioned is setup in the router.

[cars10]

You can try the following:

1. Edit vite.config.mjs and add base: process.env.VITE_APP_PUBLIC_PATH || '/'
2. use this in docker: RUN VITE_APP_BUILD_MODE=docker VITE_APP_PUBLIC_PATH=/elasticvue/ yarn build
3. this nginx config

server {
  listen 8080;
  server_name _;
  root /usr/share/nginx/html;

  location ^~ /elasticvue {
    alias /usr/share/nginx/html;
    try_files $uri $uri/ /index.html?$args;
  }
}

This setup also works and is closer to the old version, maybe it fixes your issues. Both versions work for me though.

[t3chn0m4g3]

@cars10 Thanks for the assist. Will give it a try. Are there any logs or debugging I can enable during the build?

[t3chn0m4g3]

Ran the build with the ENVs pointing to elasticvue using the Dockerfile from the repo, ran the container and reviewed index.html with vi /usr/share/nginx/html/index.html. Still showing /assets.

After adjusting vite.config.mjs to ...

[...]
export default defineConfig({
  base: process.env.VITE_APP_PUBLIC_PATH || '/',
  plugins: [
[...]

... all the resources were built as expected.

[cars10]

Alright, i will close this issue. I have already added the additional base setting in the vite config - if this fixes your setup we will keep it.

[t3chn0m4g3]

BTW: 1.0.x is working great!