Parcel: 🙋 Static Site Folder Structure?

[mattdesl]

🙋

I'm looking to create a project with a folder structure similar to this:

package.json
src/
  index.js
app/
  index.html  <-- not generated
  bundle.js   <-- generated
  assets/
    foo.png   <-- not generated via import

Where the code is in one folder (src), and the static files are in another (app). The same static folder is then used during dev and production.

The main goal of this is a clean repo without unnecessarily duplicated folders/files and clean relative URLs to PNG/JPG/etc assets (not all of which can be imported). The structure is ideal for gh-pages demos or basically any small static site.

For an example of how an entire repo and static site will look with this structure:
https://github.com/mattdesl/webgl-wireframes

🎛 Test Case

For example, index.js which just tries to load an image with a runtime (not imported) URL.

const getRuntimeURL = () => 'assets/foo.jpg';

const url = getRuntimeURL();
const img = new Image();
img.onload = () => {
  console.log('Loaded!');
};
img.onerror = () => {
  console.error('Fail...');
}
img.src = url;

🎛 Failed Attempts

For now, I'm trying with index.html in the lib folder.

parcel ./lib/index.html --out-dir app/

This is OK, but the URL needs to be '/app/assets/foo.jpg' which means the static site will have to be under /app.

parcel ./lib/index.html --out-dir app/ --public-url ./

This gives me a more correct URL pathing in the served HTML, but I get "Uncaught SyntaxError: Unexpected token <" since it's responding with the HTML instead of JavaScript.

🤔 Expected Behavior

A way to structure static sites with minimal duplication and clean URLs.

I'm also open to other ways of structuring my site with parcel, just looking for something that could work nicely with the above JavaScript test.

[DeMoorJasper]

duplicate of #233

[mattdesl]

I've been looking through that issue, and I don't think it's a duplicate.

That issue is asking for an option to specify a sub-folder for the output assets. Whereas I am proposing a change in architecture of how parcel handles its paths & static folders to support a simple static site structure. This allows users to build a site in a single root folder (not possible right now with parcel) or in a sub folder like dist or app (seems challenging right now).

IMHO there should just be a flag --dir that does two things:

• Be the directory that generated files are written to
• Be the root directory that is passed to serve-static

This way, you can use the following commands for your entire static site, deployed to gh-pages, surge.sh or whatever.

# dev
parcel src/index.js --dir app/

# production
parcel build src/index.js --dir app/

And your project folder would simply be structured like so:

app/
  index.html <-- written by user, points to src="index.js"
  index.js   <-- generated by parcel
src/
  index.js   <-- source code

During development, you just open localhost:1234 and you will be served your static site.

To support the same directory (which is even more useful for gh-pages), parcel would need an additional flag to specify what the output file name is.

parcel index.js --dir . --out-file bundle.js

Your entire static site & project folder would look like this:

index.js    <-- source code
index.html  <-- source HTML
bundle.js   <-- generated by parcel

Forgive me if I'm misunderstanding some core concept of parcel... I am struggling to understand how you are using it right now to build static sites with clean URLs.

[DeMoorJasper]

Sorry for misunderstanding, i'll reopen the issue --out-file seems like a good idea to add, now it's standard name is the name of the project JSON.parse('package.json').name + extension
Dir is already possible though it's called --out-dir

[mattdesl]

I think there is an issue with --out-dir, the following does not work:

parcel index.js --out-dir app/

I would expect that opening localhost:1234 would load the app/index.html file I've written, but it serves a dummy HTML with no script tag.

Using an HTML entry point is a little better, as I can actually run my code:

src/index.html --out-dir app/

But then all the URLs are relative to /app/... which will not work if I deploy my static site using the app folder as root.

I would have expected this to fix the latter issue, but it runs into an error I mentioned in my OP:

src/index.html --out-dir app/ --public-url ./

[DeMoorJasper]

Yeah, i marked it as a bug/feature, if u want u can have a look at it, otherwise somebody else probably will later on

[naturalethic]

https://github.com/parcel-bundler/parcel/pull/536

[sdaitzman]

Has anyone managed to find a workaround for this?