How to serve static files?

[srttk]

How to serve static files like json , csv, tsv etc.

🤔 Expected Behavior

axios.get('data/data.json',).then((data) => console.log(data))

😯 Current Behavior

http request failed!!!

[DeMoorJasper]

To get the url you can do something like this:

const csvFile = require('./data/data.csv');

This will return the new hashed unique url of the file instead of the original filename.
JSON Files however return the content instead of the url.
Copying over the files manually should also work

[donmccurdy]

The option of bundling a static file is not a real replacement for the option of serving a static file in many cases. For example, an application may have several large datasets in separate files, and should only load them one at a time when needed.

[tad-lispy]

Please correct me if I'm wrong, but it seems like one easy way to achieve that is to run Parcel like this:

npx parcel index.html data/**/*

That way all the files in the data/ directory are considered entry-points, get copied to dist/data/ and then served at /data/.... In my case I only need it for images. Perhaps other types of assets will get processed and won't work so well.

edit: it only works if index.html is in the root directory of the project, not in src/.

There is also this: https://www.npmjs.com/package/parcel-plugin-static-files-copy

[michaschwab]

@tad-lispy I couldn't get it to run with the combined command, but the plugin you referenced works wonderfully. Thanks!

[willin]

@tad-lispy json files are compiled to js files this way...

[mischnic]

It just occurred to us that with Parcel 2 alpha 3 and this parcelrc

{
  "extends": "@parcel/config-default",
  "transformers": {
    "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)...