Parcel: How to serve static files?

[saratonite]

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)...

[daggerok]

according to @tad-lispy solution, I found this almost working:

folder structure:

my-app-repo-name/
 +- public/
     +- images/
         +- bg.svg
         +- menu.svg
     +- .nojekyll
 +- src/
     +- app.js
     +- index.html
     +- favicon.ico
     +- main.css
 +- package.json

_package.son_

{
  "scripts": {
    "build": "parcel build src/index.html",
    "postbuild": "parcel build 'public/**/*'",
    "gh": "npm run build -- --public-url='/my-app-repo-name/'"
  }
}

_usage_

npm run gh
tree dist -a
dist
├── app.f84e1103.js
├── app.f84e1103.js.map
├── bg.svg
├── favicon.9c9f1c97.ico
├── index.html
├── main.dc25f873.css
├── main.dc25f873.css.map
└── menu.svg

but unfoturnately unknown raw files wont be processed as well as directory structure will be broken...

so I have simply implemented this easily just by using ncp (npm i -ED ncp):

{
  "scripts": {
    "build": "parcel build src/index.html",
    "postbuild": "ncp ./public ./dist --filter '**/*.*'",
    "gh": "npm run build -- --public-url='/my-app-repo-name/'"
  }
}

_now everything is working as expected_

npm run gh
tree dist -a
dist
├── .nojekyll
├── app.f84e1103.js
├── app.f84e1103.js.map
├── favicon.9c9f1c97.ico
├── images
│   ├── bg.svg
│   └── menu.svg
├── index.html
├── main.dc25f873.css
└── main.dc25f873.css.map

Hope this helps.

---

Regards,
Maksim

[bergkvist]

For the current version of parcel 2 I'm using (^2.0.0-alpha.3.2), the url:path pattern is default behaviour. So simply use the snippet below to get the url of a static file that you don't want any transpiler to modify:

import csvFileUrl from 'url:./file.csv'

// Use the url to fetch the file asynchronously
fetch(csvFileUrl)
  .then(response => ...)

You no longer need to modify/create any .parcelrc file.

On a side-note, it also seems like "transforms" has been renamed to "transformers" in .parcelrc.

[vincelwt]

What I did is use a postbuild script to copy over the static assets:

"scripts": {
  "postbuild": "cp -r public/* dist/",

[mischnic]

Have you seen https://github.com/parcel-bundler/website/issues/655 (or the linked issue)?

[nardove]

Hi @bergkvist
I try you snippet but I get the following error: Failed to install url:..
I'm using let latest version of Parcel and axios, am I missing another install or plugin?

[mischnic]

@nardove Are you sure you're using Parcel 2?

[nardove]

I just did npm -v parcel-bundler and got 6.14.5 🤔 weird

[mischnic]

yarn parcel --version or npm ls parcel

But if you've installed parcel-bundler instead of parcel, it's V1 in any case.

[nardove]

Correct I made the installation global and look and the package.json file and is indeed v1.12.4, I'll delete this version and install V2 Thank you!

[DeMoorJasper]

It does seem this has been fixed by the url: and proxy support in parcel 2. Will close this feel free to re-open and comment if I'm mistaken.