Issues with mount/baseUrl with a non root path

[atombrenner]

I want to use snowpack for many small PoC projects that should run on the same domain but with different paths.

• https://my.domain.net/app1
• https://my.domain.net/app2
• ...

Ideally, my app should contain only relative paths so that I can develop locally with / as root, then run snowpack build and copy them to the app1 folder. To have a compact deploy package I use the following bundling configuration:

optimize: {
    bundle: true,
    minify: true,
    target: 'es2020',
  },

Unfortunately, I can't figure out how to use relative paths. The best I could achieve was to put relative paths in index.html and configure the mount and build options:

mount: {
    public: { url: '/', static: true },
    src: { url: '/' },
  },
buildOptions: {
    baseUrl: './',
  },

Through magic, all css files are then bundled and correctly referenced in index.html with this generated line

<link rel="stylesheet" href="./index.css">

But all images are missing in the built app, because the path to images is still absolute, something like this is generated:

// logo.png.proxy.js
var logo_png_proxy_default = "/logo.png";

Using relative paths in mount option gives me an error. My next try was to configure the desired path everywhere and fix the links in index.html:

mount: {
    public: { url: '/app1', static: true },
    src: { url: '/app1' },
  },
buildOptions: {
    baseUrl: '/app1',
  },

Now the built app runs as expected. But unfortunately, now I can't use snowpack start anymore as this expects that everything runs at root level /. I have found this line in utils.ts, which indicates to me, that local development should only be done at the root level:

  const url = `${protocol}//${hostname}:${port}`;

Do you have any suggestions? I can see two options:

1. Allow local development on a path by changing the openInBrowser method (seems to be the easiest way, new config option or use by default the path configured in mount.public.)
2. Allow relative paths in mount options. Also, improve the documentation of the baseUrl option vs mount url option.

[FredKSchott]

Snowpack v3.0 got more explicit with how we treat URLs in your source code:

• Relative: the import/reference is relative to the current file on disk. import './App.jsx' for example, is valid.
• Absolute: the import/reference is final, we don't touch it. import '/dist/App.js' for example, is valid.
• Strings: Tooling can't touch anything that we can't statically analyze as an ESM import, and that includes bundlers.

Not sure if that directly answers your question, but is just to say that relative imports are 100% supported and even encouraged in almost all cases when importing files.

[atombrenner]

To clarify, I would ask if it is possible to generate relative URLs for images in built/bundled app with snowpack build. Currently, always absolute URLs are generated (e.g. --template @snowpack/app-template-preact-typescript)

// logo.png.proxy.js
export default "/logo.png";

[atombrenner]

It would be a sufficient workaround for me to use the configured path when opening the browser in snowpack dev. I do not dare to open a PR, but if you don't mind opening the browser with a specific path it could look like this: https://github.com/snowpackjs/snowpack/compare/main...atombrenner:open-browser-with-configured-public-path?expand=1

[sebastienbarre]

@atombrenner I'm having the same issues with images. Did you end up solving it? All my images are served from / as opposed to the baseUrl :(

[FredKSchott]

fix added to #2707 (commit f48f7c4)

[clhenrick]

@atombrenner I was also running into this same problem. For me the fix was setting buildOptions.baseUrl to "."

Also, for my assets I did not start their file paths with a "/" in my JS as you mentioned for your image path, just "path/to/asset.png" as if it was relative to the public directory in my project.