How to Create 1 Bundle JS File (inline CSS, fonts, images, etc)

[matthewhartman]

Hi There,

First off, thank you so much for Parcel JS! 👍

I have a project in React/Typescript and I'm trying to create 1 single JS bundle file (inline all CSS, Fonts, images, etc).

Do you mind pointing me in the right direction on how I can do this.

Cheers,
Matt

[devongovett]

Check out the docs for bundle inlining. You can use the bundle-text: scheme for the css and the data-url: scheme for the fonts. https://parceljs.org/features/bundle-inlining/

[matthewhartman]

Thanks man!

[zaini]

Hey, do you mind sharing how you ended up solving this?

Maybe I'm not understanding what this post (https://parceljs.org/features/bundle-inlining/) is suggesting, but I don't want to have to rewrite my CSS or image imports to include data-url: or bundle-text:

Is it possible to just take a regular React app, with CSS and Images, and bundle it into a single HTML file with everything inline?

[matthewhartman]

Hey @zaini

I ended up doing something like this...

In package.json

  "scripts": {
    "build": "parcel build src/index.html --no-scope-hoist"
  },
  "devDependencies": {
    "@parcel/optimizer-data-url": "^2.3.1",
    "@parcel/transformer-inline-string": "^2.3.1",
    "@parcel/transformer-sass": "^2.3.2",
    "@types/react": "^17.0.30",
    "@types/react-dom": "^17.0.11",
    "parcel": "^2.8.0",
    "postcss": "^8.4.7",
    "postcss-modules": "^4.3.1",
    "process": "^0.11.10"
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }

Main react app entry file (index.js):

import React from "react";
import * as ReactDOM from 'react-dom/client';
import App from "./components/app";
import cssText from "bundle-text:./css/index.scss";

// inject <style> tag
let style = document.createElement('style');
style.textContent = cssText;
document.head.appendChild(style);

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(
  <App />
);

In SCSS file (index.scss)

@font-face {
  font-display: fallback;
  font-family: 'Helvetica';
  font-style: normal;
  font-weight: 400;
  src: url('data-url:../fonts/helvetica.woff') format('woff');
}

This should have the base64 encoded assets in the output JS bundle.

Let me know how you go. I will be happy to help you further debug and resolve this.

Cheers.

[zaini]

Hey, thanks for the response.

Few issues I'm running into in general:

1. Without adding --public-url ./ to my build script, the files in the bundled index.html don't properly link. e.g. href="/index.d3464724.css" which should be href="./index.d3464724.css" (missing .) Is this normal?
2. I don't want to have to rewrite my CSS or image imports to include data-url: or bundle-text:, would that be possible with Parcel? Use case is I want users to be able to write normal React code and have it bundle in a single HTML file. Using data-url: or bundle-text: isn't really nice for users.

[matthewhartman]

Hey @zaini ,

No problems.

In my above example, the CSS/SCSS file is linked directly in index.js. You are trying to link a CSS file from index.html yeah? I didn't have much luck doing it this way. You could potentially have another build step that does this ( I know it sucks 😞 ).

On your second point, I agree, it's a little crap that you have to tag things with data-url and bundle-text, but this seems like the current parcel way 😵‍💫

Alternatively, I have done a similar setup using Rollup JS where you don't need this additional bundle-text etc.

You can DM me and I will send you a config / sample repository (I'm conscious that this specific question is more parcel related and don't want to add rollup stuff here lol).

Cheers.