snowpack: reference files outside of project folder

Question

Our team develops a bunch of JavaScript browser apps. These apps share functionality (core) and Web Components (shared). The folder structure is:

/apps
     /app-1
     /app-2
     ...
/core
/shared

Each folder contains a src folder.

Considering using snowpack in the folder app-1 I want to reference js files in /core/src or /shared/src both for development (using snowpack dev) and packaging (using snowpack build)

1. is this possible?
2. are there best practices how to achieve this?
3. are there examples for such a situation (or a similar one)

What I tried:

Step 1: I used paths like this: ../../core/src/router.js. This didn't work, maybe because the resources were outside of the webroot of the test server (snowpack dev).

Step 2: I created two symlinks:

apps/app-1/src/@core   -> ../../../core/src
apps/app-1/src/@shared -> ../../../shared/src

Now the local server found all the resources. The build process however found only those files, that were direct children of core/src or shared/src, but not any file within a subfolder as e.g. shared/src/component/filter.js.

Any ideas or thoughts?

Appendix

The snowpack.config.json of app-1:

{
    "devOptions": {
        "port": 8082,
        "open": "none"
    },
    "mount": {
        "public": "/",
        "src": "/_dist_"
    },
    "plugins": [
        "@snowpack/plugin-babel",
        "@snowpack/plugin-dotenv",
        "@snowpack/plugin-sass"
    ]
}

Example for import in app-1/src/handler:

import { loadRoute } from '../@core/router'    // works fine
import '../@shared/component/filter'           // does not work
// or:
import { loadRoute } from '../@core/router.js' // works fine, too
import '../@shared/component/filter.js'        // does not work neither

Tweed

Answer 1

You can solve your problem just adding:

  workspaceRoot: '..',

to your snowpack.config.js file.

Basically it tells snowpack to process everything from the parent folder (..) through it's pipeline. It will pick up dependencies and process everything.

In your case, you could import files from shared in app-1 by using relative paths, and without creating any symlinks:

import something from '../shared/something';

You can find more about workspaceRoot property in snowpack's documentation.

Orndorff

This was useful for me also because I wanted to import package.json (in order to display the app's name/version for example) in the UI. As in: import module from '../package.json' – Quid

Answer 2

You should be able to specify a relative path to the folder in your mount object as another key:

{
  "mount": {
    "../../shared": "/_dist_"
  }
}

this should serve your files from the shared directory from the /_dist_ folder.

Rhapsody

I followed this way, and snow find js files in ../../shared/dist, but canont find ../../shared/node_modules nor dependencies in it. – Lentigo