Static assets

Jutro app (and the applications based on that) are based on create-react-app. Because of that, the same tooling recommendations apply.

Location of static assets

Apps generated by create-react-app use the ./public directory for keeping static assets (images, etc.), but Jutro app uses ./src/assets instead.

That custom directory is configured using the paths.appPublic property in ./config-overrides.js. All files in that directory are static assets and are easily referenced at runtime. The only exception here is index.html, which is inside the ./html folder.

Data URIs

To avoid bundling and webpack issues, you can use data URIs for images. That way you do not reference an image file, but embed the image in your source. You can use inline SVGs in props:

<Image
  src="data:image/svg+xml;utf8,<svg ... > ... </svg>"
  alt="cooking apron"
/>

or in CSS:

.background {
  background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}

You can also encode an image into Base64 and add it as a prop:

<Image
  alt=""
  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo etc"
/>

or in CSS:

.background {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo etc');
}

Referencing static assets in the code

Depending on the place where the reference is, it can be done in two ways: bundled and unbundled.

Bundled

To bundle an asset, import it in your JavaScript code and use it in a component:

import logo from '../images/logo.svg';

<img src={logo} />;

Learn more in the documentation for create-react-app here.

Unbundled

You can reference assets from your static assets directory in one of two ways:

• from HTML templates using the %PUBLIC_URL% placeholder prefix, for example:

  <img src="%PUBLIC_URL%/<path-to-the-image-under-src-assets>" />
• from JS code (e.g., as part of the component's render()), using the env variable PUBLIC_URL, for example:

  render() {
      return (
          <img src={`${process.env.PUBLIC_URL}/<path-to-the-image-under-src-assets>`} />
      );
  }

Dev vs dist

When you npm run build, it copies the static assets from ./src/assets into an appropriate location under the ./dist subdir, making the assets available during runtime as well. Remember to keep the assets referenced using PUBLIC_URL as mentioned above. This variable is resolved to an appropriate location at build time by react-scripts.