Anatomy

The structure of a Lore application

index.html

This is the HTML file that gets served to the browser.

Defaults

The file included with new projects by default has inline comments, but the stripped down version looks like this:

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Lore Quickstart</title>
    <!-- 1. Favicons -->
    <!-- 2. Styles -->
  </head>
  <body>
    <!-- 4. Root -->
    <div id="root"></div>

    <!-- 5. Dialog -->
    <div id="dialog"></div>

    <!-- 6. Splash Screen -->
    <div id="splash-screen"></div>

    <!-- 3. JavaScript Bundles -->
  </body>
</html>

The commented sections will be discussed in the numbered sections below.

What's the default behavior?

The default behavior is such that the browser will display a splash screen with a "breathing logo" as soon as the index.html file is loaded, and that splash screen will fade away as soon as the JavaScript bundles have been downloaded and lore.summon() has finished building and mounting the application.

Why include inlined styles in this file?

Good question! The short answer is "to provide a pretty splash screen", and the longer answer is "...but you don't really need it".

When a new project loads, you'll notice there's a splash screen that fades away into the real application. The styles that enable this are in two places; first, here in the index.html document, but you'll alsosee them in the assets/css/main.css file.

The reason the styles are listed in two places is so you can see the effect during development. Lore uses Webpack to load styles (e.g. import "../assets/css/main.css"), and when building for production, these styles are all extracted into a single styles.css file that is loaded in the <head> of the document.

But during development, these styles aren't extracted into separate file. In fact, they aren't loaded at all until the JavaScript loads, which means you won't see a splash screen at all. And the splash screen is pretty, so we can't have that.

So to answer your question - the inlined styles are only neccesary if you want to view the splash screen during development. But if you remove them, and built the application for production, you would see the splash screen just fine.

So feel free to remove them! They exist so anyone creating a new project will see the effect.

1. Favicons

Webpack will automatically convert the high-resolution image saved to assets/images/favicon.png into a series of favicons for various devices like the browser, android, apple, windows, etc.

By default, only the favicons for the browser are generated, but you can change that by modifying the settings for the FaviconsWebpackPlugin in the webpack config. The generated favicons all contain a unique hash in the URL to facilitate cache busting, and will look like this:

<link rel="icon" type="image/png" sizes="32x32" href="/favicons-[hash]/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicons-[hash]/favicon-16x16.png">
<link rel="shortcut icon" href="/favicons-[hash]/favicon.ico">

If you'd like to take full control over favicon generation process, or learn more about why favicon generation can be challenging, the Real Favicon Generator website is a great resource.

2. Styles

Webpack will automatically inject styles into the header, and they will be placed below this comment.

During development, this happens once the JavaScript bundles have been loaded, and they will be included inline, like this:

<style>
  ... your styles ...
</style>

In production, the ExtractTextPlugin in the webpack config will extract all styles and place them in a file called styles.main.css, which will be included like this:

<link href="/styles.main.css" rel="stylesheet">

To facilitate cache busting, this file will also contain a unique hash, to prevent browsers from using old styles once they've been updated. The final production file will look something like this:

<link href="/styles.main.bb904647341499c464e6.css" rel="stylesheet">

3. JavaScript Bundles

Webpack will place your JavaScript bundles below this comment.

The number of bundles your project has can have a large impact on your first page load time, since it takes longer to load one single large bundle (with all your code inside) compared to loading multiple smaller bundles that can be fetched in parallel.

New Lore projects include two bundles by default. The first is called main and includes the Lore core and your custom project files. The second is called vendor and includes vendor libraries like React, React DOM, and React Router.

To further optimize the first page load time of your application, you are encouraged to add more libraries to the vendor bundle, or to create new bundles as needed.

In development, the bundles will be included like this:

<script type="text/javascript" src="/bundle.vendor.js"></script>
<script type="text/javascript" src="/bundle.main.js"></script>

In production, in order to facilitate cache busting, these files will also contain a unique hash, to prevent browsers from using old files once they've been updated. The final production files will look something like this:

<script type="text/javascript" src="/bundle.vendor.bbf77f84f00fd43296cb.js"></script>
<script type="text/javascript" src="/bundle.main.bb904647341499c464e6.js"></script>

4. Root

This is the DOM element where the application will be rendered (the mounting point for ReactDOM).

5. Dialog

This DOM element is intended to be used for mounting dialogs. This is reccomended for the following reasons:

Mounting a dialog within the root DOM element makes it susceptible to the CSS cascade, which means the styling of the dialog could be affected based where it's mounted in the DOM.
It also means that components higher in the DOM have the ability to cancel event bubbling, which could lead to typing and click events within the dialog not behaving as expected.

6. Splash Screen

This DOM element is intended to be used to render a splash screen (a way of providing an experience to the user while the JavaScript bundles are being loaded).

Example

A production build of the application will look something like this:

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Lore Quickstart</title>

    <!-- 1. Favicons -->
    <link rel="icon" type="image/png" sizes="32x32" href="/favicons-6dfcffec256e1e0e983385526b6c97ff/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicons-6dfcffec256e1e0e983385526b6c97ff/favicon-16x16.png">
    <link rel="shortcut icon" href="/favicons-6dfcffec256e1e0e983385526b6c97ff/favicon.ico"

    <!-- 2. Styles -->
    <link href="/styles.main.bb904647341499c464e6.css" rel="stylesheet">

  </head>
  <body>
    <div id="root"></div>
    <div id="dialog"></div>
    <div id="splash-screen"></div>

    <!-- 3. JavaScript Bundles -->
    <script type="text/javascript" src="/bundle.vendor.bbf77f84f00fd43296cb.js"></script>
    <script type="text/javascript" src="/bundle.main.bb904647341499c464e6.js"></script>
  </body>
</html>