qwik

qwik copied to clipboard

Is your feature request related to a problem?

How to deploy the application under a sub-path of a domain? e.g. http:/localhost:3000/mysubpath/xxxxxx

Describe the solution you'd like

Could qwik provide a configuration to setup the basepath just like nextjs config? e.g. https://nextjs.org/docs/api-reference/next.config.js/basepath

Describe alternatives you've considered

no idea

Additional context

No response

Hi @jasonc08 👋 Thanks for proposing this feature. As far as i am aware of, this is already possible by defining the base option (defaults to /build/) on your entry.ssr.tsx file like:

export default function (opts: RenderToStreamOptions) {
  return renderToStream(<Root />, {
    manifest,
    ...opts,
    base: "/subdomain/",
    containerAttributes: {
      lang: "de",
    },
    prefetchStrategy: {
      implementation: {
        linkInsert: null,
        workerFetchInsert: null,
        prefetchEvent: "always",
      },
    },
  });
}

The value is then rendered as q:base on the generated HTML and picked up by the qwik loader. Is this what you expect?

It does not work. The path of static photos , pages and service-worker.js remain the same.

thanks for your feedback. i will have a look at it later this week 👍

Update Had another look at it and since qwik does not create a <base> tag on the head, it can't work as expected. from the code perspective, the base is used for the container handling.

docs says:

Specifies the root of the JS files of the client build. Setting a base, will cause the render of the q:base attribute in the q:container element.

imo it shouldn't be to hard to set the base tag but i am not sure how to implement it to avoid collisions when working with containers 😅 so i would leave it to smb with more experience 👼

+1, to me #1488 wasn't fixed.

I'm really looking to be able to publish a SSG Qwik site on GH pages !

I was able to deploy a working demo app here (repo).

I had to tweak entry.ssr.tsx by setting : base: '/qwik-app/build', where qwik-app is the pathname where the app is located.

How dirty is that and are there any downsides ?

This does work for the javascript but any CSS that's linked doesn't include the pathname.

As a use case, this comes in handy when an organization wants to transition slowly page by page. So the pages can be hosted on a sub-path an reverse proxied.

any updates on this?

This should be fixed using the base vite config with the latest release. Please let us know if this is still an issue, thanks.

@adamdbradley it seems not working, I'm using qwik 0.24.0, latest version as of writting

entry.ssr.tsx

then I run npm run preview

files(q-xxx.js) are still generated to dist/build instead of dist/build2

and of course the page won't load these q-xxx.js files

The early days of Gatsby had similar issues. There was the need to deploy to a subpath, as well as placing files in a different location. So the URL could be https://example.com/sub/path/here/ and place all the files into a different location such as a CDN, eg. https://cdn.example.com/files/go/here

Gatsby added both an assetPrefix and pathPrefix configuration.

Asset Prefix Docs https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/asset-prefix/

Path Prefix Docs https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/

Since 1.0.0 base path deplpying should work much better, out e2e test themselves are deployed with a custom base path! if issue persist, let's open a new issue!

@manucorporat what should the plugin config be ?

In my case I have :

      staticAdapter({
        origin: 'https://jeanmeche.github.io',
        base: 'qwik-city',
      })

But files are still pulled from the origin https://jeanmeche.github.io.

@JeanMeche you need to pass base: '/qwik-city/' to vite in your vite.config

The issue still remains. I tried about everything mentioned here and in similar issues but without any luck.

I am trying to host on GitHub pages but only the main page is loaded. All others are pulled from the GitHub root instead of the subpath of the repo.

@GerardStelt can you post the link? You're using latest qwik, right?

I'm facing the same issue in my repository https://github.com/mrcwbr/pizza-dough-calculator

my static adapter looks like this

    staticAdapter({
        origin: 'https://mrcwbr.github.io',
        base: 'pizza-dough-calculator',
      })

i fixed this issue with a hacky workaround. I just patch the generated index.html file in my GitHub action

    sed -i 's|q:base="/build/"|q:base="/pizza-dough-calculator/build/"|g' ./dist/index.html

See: https://github.com/mrcwbr/pizza-dough-calculator/blob/main/.github/workflows/deploy.yml#L32