parcel: Wrong path for css and js file on build

I suggest the same thing @TomasHubelbauer has said.

I couldn’t make it work until I set the command from parcel build src/index.html -d public to parcel build src/index.html -d public --public-url ./

This is due to the fact that it feels natural that ./ or . is set as default, even if it’s not.

I have a similar concern here. My source folder structure is pretty simple:

src
  index.html
  styles
    styles.css
  scripts
    scripts.is
  images

When I run parcel src/index.html from the root directory, Parcel creates a dist folder alongside src with a modified index.html file that references my CSS and JS files using the /dist/<file name>.js as @j-o-d-o described.

Problem 1: My index.html file is inside the dist folder (effectively at the root of the dist directory) so, to begin with, requiring it to look inside /dist by default isn’t helpful; and Problem 2: Parcel seems to completely ignore the asset folder structure when it compiles the dist version and I can’t work out how to change the default behaviour to respect it.

I tried running parcel --out-dir src/index.html and that just created a index.html directory and replaced /dist/ with /index.html/ in my paths.

Desired behaviour

When I run parcel index.html (or perhaps parcel src/index.html), I’d expect Parcel to create a dist folder alongside my source files with CSS and JS paths that correctly load those assets when I view the newly compiled/created index.html in the dist folder.

What am I missing here?

Navigating through 100 issues and I don’t see anything resolved. It doesn’t make sense that all images, css and js are put in root directory.

This should definitely be changed so that it behaves as though the --public-url . option was set by default. One should be able to just run parcel build index.html, move the files in dist to a file server and have everything work. The current behavior of the index.html file in dist loading assets from dist as if it was in the super directory makes no sense. I hope #557 can be merged so the default behavior is user friendly.

@mohsen1 Doesn’t Parcel already have that?

--public-url <url>    set the public URL to serve on. defaults to the same as the --out-dir option

Just another reminder that the --public-url has to be set to ./ manually to enable dropping the production folder anywhere. This needs to be standard behaviour and has not been addressed yet. Can we have an update on this?

Okay, I have another problem regarding this issue. If I want to use static images I would do something like this:

import testImage from './assets/images/test.png';

class HelloMessage extends React.Component {
  render() {
    return <div>
      Hello {this.props.name}  
      <img src={testImage} />
    </div>;
  }
}

When using >> parcel src/index.html the path to the image is wrong. To resolve this I have to change the path: <img src={"dist/" + testImage} />. But Then, when I build my project with “–public-dir /” flag, the image has the wrong path in the build project…

How can I resolve that?

Maybe we should add an issue to the /website repo to get the docs fixed

If that works than this is probably bad documentation not a parcel bug

There needs to be a “public path” option. It would be useful when assets are uploaded to a CDN or served under a special path in production.

I agree that --public-url ./ seems like it should be a default. My simple CSS and JS references in an HTML file does not work until I set this.

Ah, thanks @Giorat - I was just running into this exact problem, and your comment still didn’t make sense until I saw for myself: [16:33:43] me ~/Code/devops-dashboard $ node_modules/parcel-bundler/bin/cli.js build src/public/segments.html --out-dir src/public/dist --public-url ./dist/ vs [16:38:16] me ~/Code/devops-dashboard $ node_modules/parcel-bundler/bin/cli.js build src/public/segments.html --out-dir src/public/dist --public-url ./

This does feel strange to me. I agree that it feels natural for ./ or . to be set as default.

use the cli flag --out-dir to change this behaviour

Read this https://parceljs.org/production.html the default dir is dist

Okay turns out #557 was closed in favor of a different PR which doesn’t deliver this, which is most unfortunate and there is a conversation lockdown with a message to open up a new issue to discuss this. @davidnagli could this issue be reopened to track this request to have the default be sensible in terms of static file serving?

@j-o-d-o this is another issue that should need a seperate bugreport

Sorry for closing this, u are correct this would be a better approach (in some cases) i’m not sure but think there is already an issue concerning this