Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug?]: Defining "base" in app.config.ts are not expected, for building SPA #1606

Closed
2 tasks done
hdeyana opened this issue Aug 19, 2024 · 5 comments
Closed
2 tasks done
Labels
bug Something isn't working

Comments

@hdeyana
Copy link

hdeyana commented Aug 19, 2024

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

In build index.html

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="/favicon-32x32.png"><link href="/_build/assets/client-rU9vljyo.css" rel="stylesheet" fetchPriority="high" /><link href="/_build/assets/web-BbtXVSek.js" rel="modulepreload" /><link href="/_build/assets/moment-DQVBMp9o.js" rel="modulepreload" /><link href="/_build/assets/config-8fxIt9Gq.js" rel="modulepreload" /><link href="/_build/assets/tslib.es6-BGVaTf34.js" rel="modulepreload" /><link href="/_build/assets/firestoreListener-_80a_VOd.js" rel="modulepreload" /><link href="/_build/assets/HttpStatusCode-CXSCv5bj.js" rel="modulepreload" /><link href="/_build/assets/index-DCx6ewsr.js" rel="modulepreload" /><link href="/_build/assets/routing-0v0Q_k18.js" rel="modulepreload" /><link href="/_build/assets/Focusable-Ml_eQ73Y.js" rel="modulepreload" /><link href="/_build/assets/client-cVyifNeO.js"

Expected behavior 🤔

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="/favicon-32x32.png"><link href="_build/assets/client-rU9vljyo.css" rel="stylesheet" fetchPriority="high" /><link href="_build/assets/web-BbtXVSek.js" rel="modulepreload" /><link href="_build/assets/moment-DQVBMp9o.js" rel="modulepreload" /><link href="_build/assets/config-8fxIt9Gq.js" rel="modulepreload" /><link href="_build/assets/tslib.es6-BGVaTf34.js" rel="modulepreload" /><link href="_build/assets/firestoreListener-_80a_VOd.js" rel="modulepreload" /><link href="_build/assets/HttpStatusCode-CXSCv5bj.js" rel="modulepreload" /><link href="_build/assets/index-DCx6ewsr.js" rel="modulepreload" /><link href="_build/assets/routing-0v0Q_k18.js" rel="modulepreload" /><link href="_build/assets/Focusable-Ml_eQ73Y.js" rel="modulepreload" /><link href="_build/assets/client-cVyifNeO.js"

Steps to reproduce 🕹

  1. define app app.config.ts

`
import { defineConfig } from "@solidjs/start/config";
import legacy from "@vitejs/plugin-legacy";

export default defineConfig({
ssr: false,
solid: {
ssr: false,
},
vite: {
define: { globalThis: "window" },
optimizeDeps: {
esbuildOptions: {
define: {
global: "globalThis",
},
},
},
//@ts-ignore
base: "",
server: {
origin: "",
},
plugins: [
// For production build environments only
legacy({
targets: ["chrome >= 64", "edge >= 79", "safari >= 11.1", "firefox >= 67"],
modernPolyfills: ["es/global-this"],
}),
// viteSingleFile(),
],
},
});
`

  1. pnpm build

Context 🔦

Im building app for smart tv

Your environment 🌎

{ "name": "stv-vision-3", "type": "module", "scripts": { "dev": "vinxi dev", "build": "vinxi build --base=./", "webos-build": "ares-package -n .", "start": "vinxi start", "version": "vinxi version", "preview": "vinxi build && node .output/server/index.mjs", "build:webos": "ares-package -n ." }, "dependencies": { ... "@sentry/solid": "^8.26.0", "@solid-primitives/intersection-observer": "^2.1.6", "@solid-primitives/raf": "^2.2.0", "@solid-primitives/scheduled": "^1.4.3", "@solid-primitives/storage": "^3.8.0", "@solidjs/meta": "^0.29.4", "@solidjs/router": "^0.13.4", "@solidjs/start": "^1.0.6", "@tanstack/solid-virtual": "^3.9.0", "@types/tizen-common-web": "^2.0.6", "@types/tizen-tv-webapis": "^2.0.6", "@types/ua-parser-js": "^0.7.39", "@types/webostvjs": "^1.2.5", "@vitejs/plugin-legacy": "^5.4.2", "adblock-detector": "^2.1.0", "axios": "^1.7.4", "axios-cache-interceptor": "^1.5.3", "base-64": "^1.0.0", "core-js": "^3.38.0", "cross-fetch": "^4.0.0", "firebase": "^10.13.0", "globalthis": "^1.0.4", "nanoid": "^5.0.7", "nanostores": "^0.10.3", "shaka-player": "^4.10.9", "solid-firebase": "^0.3.0", "solid-icons": "^1.1.0", "solid-js": "^1.8.21", .. }, "engines": { "node": ">=18" }, "devDependencies": { "@iconify-icon/solid": "^2.1.1", "@tailwindcss/typography": "^0.5.14", "autoprefixer": "^10.4.20", "daisyui": "^4.12.10", "moment": "^2.30.1", "postcss": "^8.4.41", "swiper": "^10.3.1", "tailwindcss": "^3.4.10", "terser": "^5.31.6" } }

@hdeyana hdeyana added the bug Something isn't working label Aug 19, 2024
@ryansolid
Copy link
Member

ryansolid commented Aug 19, 2024

If I understand the problem, it is that we are inserting leading / which mess with stuff? Generally leading slashes would be needed in case someone reloads on a page that isn't the root. This would be equally true for a SPA too.

Like if someone went to page /profile/feed. And then hit refresh you wouldn't want all the assets to be prefixed with /profile/. You'd still want them from the root.

Maybe I'm misunderstanding the bug report.

@hdeyana
Copy link
Author

hdeyana commented Aug 20, 2024

Thanks for your response, sorry for miss comm

Yes that correct we want to remove / leading, our use case are embed the index.html into smart tv application not in web server, so the ref should be from /some-chunk.js to ./some-chunk.js or some-chunk.js

https://forum.webostv.developer.lge.com/t/image-not-loading-in-lg/6385/6
https://forum.webostv.developer.lge.com/t/web-application-is-not-location-static-folder-directly/6388

The problem i cant add 'base' in app.config.ts, https://vitejs.dev/config/shared-options.html#base

@Brendonovich
Copy link
Contributor

FYI server: { preset: 'static' } can be helpful for building an SPA, only .output/public will be generated

@hdeyana
Copy link
Author

hdeyana commented Aug 21, 2024

Correct @Brendonovich, .output/plublic already there, the problem is the content inside index.html

@hdeyana
Copy link
Author

hdeyana commented Aug 28, 2024

Closed, the solution are using vite directly into project, in vite configuration will be something like this

import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";
import legacy from "@vitejs/plugin-legacy";
import { viteSingleFile } from "vite-plugin-singlefile";

export default defineConfig({
  define: { globalThis: "window" },
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: "globalThis",
      },
    },
  },
  base: "./",
  build: {
    outDir: "tizen",
  },
  resolve: {
    alias: {
      "~": "/src",
    },
  },
  plugins: [
    solidPlugin(),
    legacy({
      targets: ["chrome >= 64", "edge >= 79", "safari >= 11.1", "firefox >= 67"],
      modernPolyfills: ["es/global-this"],
    }),
    // viteSingleFile(),
  ],
});

@hdeyana hdeyana closed this as completed Aug 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants