search

solidjs / solid-start

SolidStart, the Solid app framework
https://start.solidjs.com
MIT License
5.23k stars 374 forks source link

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

Closed hdeyana closed 3 months ago

hdeyana commented 3 months ago

Duplicates

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" } }

ryansolid commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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

hdeyana commented 3 months ago

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

hdeyana commented 3 months ago

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(),
  ],
});