How do I include asset files with parcel js?

Question

I have a folder of dynamically loaded asset files I want to include in my parcel output directory. How can I include unreferenced static asset files like .json, .jpeg, .txt, .etc with my parcel build command?

score 9 · Answer 1 · answered Jun 23 '22 at 02:27

9

With Parcel v2 there's a different plugin: https://github.com/elwin013/parcel-reporter-static-files-copy

yarn add parcel-reporter-static-files-copy --dev

then you need to create .parcelrc or add to the following to it. (Note: "..." is literal not something you need to fill in):

{
  "extends": ["@parcel/config-default"],
  "reporters":  ["...", "parcel-reporter-static-files-copy"]
}

now any files (and sub-directories) in a directory named static will be automatically copied to the website (typically your dist folder) when you do the regular parcel build.

answered Jun 23 '22 at 02:27

Ultrasaurus

3,031
2
33
52

1

This plugin seems to break the local dev server though, at least when using the `-p` option. I saw it successfully copy the files over but my local site stopped responding and removing the plugin fixed that. – Greg Venech Jan 09 '23 at 14:54
1

The plugin broke the development server, but the fault is mine, I am too lazy to read that the "..." from the answer is literal. – Alex Rintt Mar 10 '23 at 19:24
1

Note this may require to install config-default, so run `npm install @parcel/config-default` – Simon Mourier May 04 '23 at 18:01

score 4 · Answer 2 · edited Jun 23 '22 at 02:28

4

Note: This answer is for Parcel v1

There is a parcel plugin for that:

https://www.npmjs.com/package/parcel-plugin-static-files-copy

Install it:

yarn add parcel-plugin-static-files-copy --dev

Or

npm install -D parcel-plugin-static-files-copy

Then, in package.json, add:

"staticFiles": {
   "staticPath": ["path/to/a/staticFolder"]
}

It should copy your files to the public folder.

Stay safe!

edited Jun 23 '22 at 02:28

Ultrasaurus

3,031
2
33
52

answered Dec 30 '20 at 08:16

Daniyel.Me

436
2
8

2

so there's no native way to do this without a plugin? – ermish Jan 12 '21 at 07:07
No, It's still an open issue. – Daniyel.Me Jan 20 '21 at 08:22

score 3 · Answer 3 · answered Dec 16 '21 at 09:37

The best way to handle this is having control of the code. npm already provides the tools needed for this job. In the package.json, when running commands with &&, the first command will run, and if it does finish without any error, the second command will also be executed. Running &, however, will run each command in the background independently, regardless of what happens to the other command. In other words:

Use && for sequential execution.
Use & for parallel execution.

For example:

project/
|dist/
    |...
|src/
    |assets/
        |text.txt
        |memos.txt
        |info.ini
    |css/
        |style.css
    |img/
        |a.png
        |b.jpg
        |c.jpeg
    |data.json
    |not-to-copy.json
    |not-to-copy.conf
    |index.js
    |index.html
|package.json

If you have a project structure like this add, some scripts to the package.json

{
    ...
    "source": "src/index.html",
    "scripts": {
        "clean-dist": "rm -rf dist && mkdir dist",
        "copy-img": "cp -vR ./src/img ./dist",
        "copy-data": "cp -r src/data.json dist",
        "copy-assets": "cp -r src/assets/* dist",
        "copy-files": "npm run copy-img & npm run copy-assets & npm run copy-data",
        "init": "npm run clean-dist && npm run copy-files",
        "start": "npm run init && parcel",
        "build": "npm run init && parcel build"
    },
    ...
}

This configuration will sequentially run clean-dist and copy-files. The former will delete the dist directory and make the directory again. Then copy-files will copy src/img -> dist/img, src/assets/* -> dist/* and src/data.json -> dist/data.json in parallel. Finally, parcel will be executed.

so far, this has been a workaround, but was hoping for something built into parcel itself — ermish, Jan 29 '22 at 13:12

score 0 · Answer 4 · answered Nov 22 '21 at 09:51

0

You can edit your package.json scripts to copy the files after the build has executed. This is how I had a .htaccess file to the dist folder:

"build": "rm -rf dist && parcel build src/index.html -d dist --public-url ./ '.' cp src/.htaccess dist"

answered Nov 22 '21 at 09:51

SamHeyman

207
3
13

While this works, I was hoping for parcel to do this as part of the build. – ermish Nov 25 '21 at 06:13
Yes, I totally agree. – SamHeyman Nov 25 '21 at 10:13

score 0 · Answer 5 · answered Jun 25 '23 at 13:45

0

package.json

{
  ...
  "scripts": {
    "start": "npm run build-img && parcel",
    "build-img": "parcel build assets/* --no-cache"
  }
}

answered Jun 25 '23 at 13:45

kossyak

1

How do I include asset files with parcel js?

5 Answers5

Linked