Parcel: Why I use "parcel watch src/index.html", and then generated dist/index.html has Wrong path about I want to import the JS and CSS file

Created on 9 Dec 2017 · 10Comments · Source: parcel-bundler/parcel

Choose one: is this a 🐛 bug report or 🙋 feature request?
bug report

This is my This is my contents of dist/index.html.

<html><head>
    <link rel="stylesheet" href="/dist/70ff6adcda1019612606fd7515c8afe8.css"></head><body>
        <div id="root"></div>
        <script src="/dist/70ff6adcda1019612606fd7515c8afe8.js"></script>
    </body>
</html>

_017

🔦 Context

Source

Likebard

Most helpful comment

parcel build index.html --public-url ./

Will solve the issue of the invalid path to js and CSS files.

deepakkadarivel on 1 Feb 2018

👍6 🎉1

All 10 comments

What's wrong with the path? It looks fine

davidnagli on 9 Dec 2017

He probably just opened the index.html file in the browser and then it doesn't load js and css due to this using absolute paths. Or he pointed his webserver to another directory than the www directory in the screenshot which would also cause this.

DeMoorJasper on 9 Dec 2017

When you build the output you can use --public-url argument to specify the root. For example:
parcel build index.html --public-url='/'

adrianfaciu on 9 Dec 2017

👍1

@davidnagli @DeMoorJasper I doesn't look fine. The script tag of the generated HTML file includes dist/xxxxxx.js but the REAL path of that js file is ./xxxx.js. The generated js file and the HTML file are in the same dist directory actually. How do I fix this?

Likebard on 10 Dec 2017

Based on the screenshot you sent, the real path of the file should be dist/xxxxxx.js, not ./xxxx.js

I'm really sorry if I'm still misunderstanding you

davidnagli on 10 Dec 2017

Maybe you're looking for the --out-dir command, which would let you specify the output directory

Note: an alias for --out-dir is -d (they both do the same thing.

Example usage:

parcel src/index.html -d build

davidnagli on 10 Dec 2017

👍2

@davidnagli Thanks. It works.

Likebard on 10 Dec 2017

@davidnagli Is there a way to use the relative path instead of absolute path?
A common practice is to output the html, js and css to public dir, and host the public dir as the root dir.

xcatliu on 11 Dec 2017

👍2

parcel build index.html --public-url ./

Will solve the issue of the invalid path to js and CSS files.

deepakkadarivel on 1 Feb 2018

👍6 🎉1

I have tried all of the solutions above, but I still get the compiled index.html pointing to
<script src="/dist/......js"></script> instead of src="....js"

If I want to compile everything into a single dist/ folder and serve that folder, how can I make sure the paths are correct?