Parcel: Parcel 2: Serving static data from the dev server

[magcius]

🙋 Feature request

Currently, there's no way easy way to add additional data into the dist dir provided by serve. I've previously advocated for this use case (#2461), where I have large binary files like 3D data that I do not want to push through the build process. The intermediate workaround has been to place a folder symlink into the dist/ directory, which works OK -- I can filter out text/html responses on the client and pretend they are 404s.

Parcel 2 moves the dist dir into .parcel-cache, and seems to more aggressively wipe it. This means it's very hard to get Parcel 2's dev server to serve static data again. The code for serving static data is still there, however.

🤔 Expected Behavior

I would like a supported mechanism to serve static, unbuilt data from the Parcel dev server.

😯 Current Behavior

There is no way to serve static data, and the existing workarounds for Parcel 1 which were relied on by many is now effectively unusable.

💁 Possible Solution

Support extra configuration to the parcel dev server, either based on the code in #2461 or not.

🔦 Context

I believe I have provided a sufficient amount of context above.

[DeMoorJasper]

We actually have something like this in parcel atm although it's kinda weird for this use-case.
We have the entire codebase hosted through the server to make sourcemaps work in dev without needing to inline code, you can see it here: https://github.com/parcel-bundler/parcel/blob/v2/packages/reporters/dev-server/src/Server.js#L75 which is mounted under /__parcel_source_root

In theory we could add a folder like /static or something. But this might conflict with existing codebases. Adding additional config for this seems like a bad idea.

Another way to fix this is using our upcoming proxy config we're working on, see: https://github.com/parcel-bundler/parcel/pull/3281 for details

[magcius]

I don't see why additional config is a bad idea. Parcel theoretically has similar cases with --public-dir (though this apparently was removed from Parcel 2 for currently unknown reasons).

As you might be able to guess from the votes on #1080, this is a pretty well-requested feature that is important for a lot of use cases.

[DeMoorJasper]

@magcius it will be possible with proxies like I mentioned.

—public-dir never was a cli flag, I think, —public-url was removed and —out-dir got moved to config in pkg.json

_{Sent with GitHawk}

[devongovett]

publicUrl is also in package.json now, under targets.

I think ideally those files wouldn't just be copied or served by the dev server. They need to be part of the parcel asset graph as well. This will ensure they are watched, that things like HMR work, etc.

[magcius]

Admittedly my use case is probably a bit out there, but my static data is over 1GB+ in size, and since I fetch it with XHR, there's no way URLs could be mangled. Think of anything big like videos. Having Parcel copy 1GB+ of data would be unfortunate to me. If we could watch the static data dir in its entirety and simply trigger HMR in that case, but otherwise serve it without copying, that would be fine.

[alvinometric]

Hello,
So far I've been using parcel-plugin-static-files-copy to solve this, but ideally this should be built-in.
Adding a +1 for this!

[mischnic]

Maybe this is helpful in your case:

{
  "extends": "@parcel/config-default",
  "transforms": {
    "url:*": ["@parcel/transformer-raw"]
  }
}

you can import files which will then be copied to the dist folder:

import file from "url:./static.json"
fetch(file)...

[magcius]

That requires that all data is statically importable, no? If I have ./scene.json that then says "please fetch my3dmodel.bin", then Parcel can't know to that file over.

[mischnic]

Correct (we just can't analyze the JSON file and guess which files you want to have available).

[magcius]

Right, that doesn't work for my workflow, though it might work for some others. I am suggesting a data directory that can be monitored / served directly.

[alvinometric]

Hey, just also wanted to mention that these assets are:

• very large
• usually loaded anytime after build and depend on a user's choice

So it definitely needs a directory that the app has access to when it's running.

[czyzby]

This plugin was sufficient for my use case.

[odbol]

Any word on progress on this? It's baffling that you spent all this time to make Parcel and Parcel 2 but it can't do the most basic of tasks which is serve up unaltered static files.

[mischnic]

I think you should be able to use some static middleware with the proxy functionality: https://v2.parceljs.org/features/api-proxy/#.proxyrc.js

[subuta]

Based on @mischnic 's advice, Now I can serve static files of ./static dir by following.

Create .proxyrc.js with these contents.

const serveStatic = require('serve-static')

module.exports = function (app) {
  // Use static middleware
  app.use(serveStatic('static'))
}

Then you may access your static file like this http://localhost:1234/test.txt