Parcel: Wrong path for css and js file on build

[j-o-d-o]

🐛 bug report

When using build (or start) the path to the .js and .css file in the index.html in the dist folder don't make much sense to me.
For example, the .js file is included like that:
<script src="/dist/7d97f2dde78701558fc2691e34c9052b.js"></script>

shouldn't the path be without the dist like this:
<script src="/7d97f2dde78701558fc2691e34c9052b.js"></script>

makes it much easier to serve the files.

| Software | Version(s)
| ---------------- | ----------
| Parcel | v1.2.0

[StarpTech]

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

[DeMoorJasper]

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

[j-o-d-o]

I think I didn't explain mayself well enough. I am not arguing about the folder, I am arguing about the path that is used for the .js file and .css file. Let's say I want to server my built app with a node server like this:

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static('./build'));

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, './build', 'index.html'));
});

app.listen(9000);
console.log('Listening on Port: 9000');

That does not work because the paths are wrong, I have to manually remove the 'dist' from the path in order to make it work or I have to change the express static folder:

app.use(express.static('./'));

But that is a really bad idea, now all other folders like 'src' are potentially accessible...

[DeMoorJasper]

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

[mohsen1]

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.

[davidnagli]

@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

[mohsen1]

Then this is not an issue? Just set the public url to /

[DeMoorJasper]

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

[davidnagli]

Ok cool, I’m gonna close this issue since it looks like we answered the question :)

[davidnagli]

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

[j-o-d-o]

Yep, that worked. It is in the docu here: https://parceljs.org/production.html : )

[j-o-d-o]

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?

[DeMoorJasper]

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

[pauljacobson]

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?

[TomasHubelbauer]

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.

[riccardogiorato]

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.

[TomasHubelbauer]

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?

[allentsai]

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.

[dons20]

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?

[chiqui3d]

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.

[bunnyhero]

Yep, that worked. It is in the docu here: https://parceljs.org/production.html : )

perhaps this info used to be on that page, but right now, i don't see anything mentioning arguments for public URLs etc.

[parker-codes]

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.

[bLeveque42]

Took me a while to figure this out on an existing project using parcel-bundler, a bit sad to see this thread and nothing changed since late 2017 :(

[SoyDiego]

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.

THANKS!