I am using Parcel JS for a personal project and I am really confused by this option:

--public-url

Here is the documentation: .html#options

which is really scarce.

1) What is the main use of it?
2) It says that it is available in: serve, watch and build.
Is there any difference between these 3 options while using --public-url?
3) And last but not least, how --public-url and --out-dir work together? Is there any limitation on the setup when we use both options at the same time?

Thanks.

I am using Parcel JS for a personal project and I am really confused by this option:

--public-url

Here is the documentation: https://en.parceljs.org/cli.html#options

which is really scarce.

1) What is the main use of it?
2) It says that it is available in: serve, watch and build.
Is there any difference between these 3 options while using --public-url?
3) And last but not least, how --public-url and --out-dir work together? Is there any limitation on the setup when we use both options at the same time?

Thanks.

• javascript
• node.js
• webpack
• frontend
• parceljs

2 Answers 2

1. --public-url is used to specify from where the bundled assets are served.

As an example:

The default value is --public-url /, which generates tags like this.

<script src="/src.133713ex.js">

Which doesn't work if the site is not served from the domains root.
E.g. on a Github Pages site where the URLs are username.github.io/project-name/, here you would need to serve them from the index.html files location.

That's where --public-url comes in to play:

--public-url ./

By adding this to our build options we change the generated tag to the following, which would work.

<script src="src.133713ex.js">

2. It just means you can use it with every way there is to start a parcel process.

3. Yes they do work together! --out-dir just defines the directory where the bundled files are generated (default is /dist) and --public-url functions as explained above.

NB: if you change --public-url, you may have to delete the .parcel-cache folder before building in order to see the changes reflected in your site. Otherwise, in my experience, index.html attempts to access the same file paths as as before the public-url change.