build bundle.js only

[fatlinesofcode]

using the preact-cli build is it possible to build the bundle.js file only?

Currently I'm trying out the widget template and building using preact build --no-prerender --no-service-worker --template src/index.ejs

Then I'm seeing the following in the build folder

Ideally, I want to only output bundle.js + index.html as the other files are not used. If it possible to disable manifest.json, push-manifest.json, favicon and sw.js outputting?

[prateekbh]

Given the project(preact-cli) is focussed on building PWAs primarily, I don't think that there is something that would get rid of all the files you are referring to.

But if for the widget template is makes sense to ideally just output those 2 files and other files are some sort of noise, then I would happily add a post:build script that would just delete the extra files.

[fatlinesofcode]

maybe consider a --no-pwa option @prateekbh ?

[prateekbh]

The problem is that the term is super overloaded.

Does --no-pwa means

• delete manifest?
• delete SW?
• delete both? because all of the above means its not a PWA.

Also that still leaves you with push-manifest and favicon. Do you think just deleting those files would be easier?

[fatlinesofcode]

deleting files via a post build script would work fine for me @prateekbh

But I think it would usefully to add something like a --bundle-only or --minimal flag which would only build the bundle.js and template for non-pwa apps

[alxvallejo]

Hey use Preact and install with Preact-CLI - it's the smaller, lighter version of React! Proceeds to generate ~20 bundle files that assume you're building a PWA

[prateekbh]

Does your app have 10ish routes?

[reznord]

@alxvallejo you end up seeing ~20 bundle files because preact-cli publishes .esm bundles (for the latest browsers) and transpiled bundles (for the remaining browsers) by default.

Also, as your number of routes increases in the app, the number of bundle files also increases. What ever the subfolders you keep in routes folder, all those are considered as different chunks (i.e. route-based code splitting).

[alxvallejo]

Ok then really quick question, if i want to just reference the dynamic bundle.xyz123,js file and embed Preact into a parent html file, how can load what's in bundle.xYz.js?

[reznord]

you can use a regex match like: <link href="/bundle.w{5}.css" rel="preload" as="style"> for matching it with the bundle file.

[alxvallejo]

@reznord Does html support regex? I've never seen that before and that gives me a 404 on this: http://localhost:8080/preact/build/bundle.w%7B5%7D.js \

?

[prateekbh]

Ok then really quick question, if i want to just reference the dynamic bundle.xyz123,js file and embed Preact into a parent html file, how can load what's in bundle.xYz.js?

What do you mean? Like preact coming from some other previously bundled app and this one just load the route file? Like some sort of embedding just one page but in some other app?

[dungle-scrubs]

I'm hoping to use Preact to build a widget over existing sites and would prefer to build everything into one .js file.

With create-react-app, I am able to eject and modify the webpack config directly to make this happen, but not sure how to approach it with Preact.

Any advice?

[rschristian]

@dungle-scrubs

The CLI has two widget templates for exactly this purpose. Widget and TS-Widget

I believe I do have PRs open for both that overhaul them a fair bit. Might want to check those out first.

[dungle-scrubs]

@dungle-scrubs

The CLI has two widget templates for exactly this purpose. Widget and TS-Widget

I believe I do have PRs open for both that overhaul them a fair bit. Might want to check those out first.

Awesome, appreciate it.

[dungle-scrubs]

@dungle-scrubs

The CLI has two widget templates for exactly this purpose. Widget and TS-Widget

I believe I do have PRs open for both that overhaul them a fair bit. Might want to check those out first.

Is there a way to use your unpublished PR #14 as a template via preact-cli?

[rschristian]

Is there a way to use your unpublished PR #14 as a template via preact-cli?

Yep! You can either download from source (not recommended) or use Preact-CLI to initialize it:

npx preact-cli create rschristian/widget my-new-widget

[dungle-scrubs]

works great, thank you

[dungle-scrubs]

Yep! You can either download from source (not recommended) or use Preact-CLI to initialize it:

What's the best way for me to give you feedback on your PR? Everything has gone super smooth up until build and dist are run. I'm a little new to how PR's work and don't want to muddy up this thread. Thanks!

[rschristian]

@dungle-scrubs Are you on the slack? Probably best for discussions. If that's the JS/widget template I know there's a few things I'm not a fan of myself at the moment, just lacking better solutions. Happy to try to help though.

[abdulimr]

For anyone looking at ways to remove the use of manifest.json, here's a simple postbuild script that does the job.

// postbuild.js
const fs = require("fs")

// This could be extended to use prerender-urls.json
const pages = [
  "/index.html",
  "/about/index.html",
  "/***/index.html",
  "/200.html",
]

pages.forEach(page =>
  fs.readFile(`build${page}`, "utf8", (err, data) => {
    if (err) return console.log(err)

    const result = data.replace(
      '<link rel="manifest" href="/manifest.json">',
      ""
    )

    fs.writeFile(`build${page}`, result, "utf8", err => {
      if (err) return console.log(err)
    })
  })
)

And the following script can be added to package.json to run it.

"scripts":  {
    "postbuild": "node postbuild.js",
},

The postbuild script automatically runs after the build script.

Hope this helps someone out!

[rschristian]

Going to close this out, this isn't going to be an officially supported thing.

You can maybe bend the Webpack config into shape via preact.config.js, but I'd probably discourage it.