Splash Screen with Built-in Bundler

Help Requests
1

When I used the CLI with Webpack, I could add a spash screen using index.ejs. What is the recommended way to do this when using the built-in bundler?

1 Like
2

Havent tried but why wouldnt that work with the index.html?

1 Like
3

Just write it in index.html, when Aurelia loads, it replace the whole body marked by <body aurelia-app="main">. This is what I do in my app (removed some noise).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
    <title>Buttonwood Broker</title>
    <base href="/">
  </head>

  <body aurelia-app="main">
    <div style="position: fixed; top: 0; bottom: 0; left: 0; right: 0; color: #212529; background-color: #e9ecef;">
      <div style="position: absolute; top: 20%; margin: 0; padding: 0 1rem; line-height: 1.5; left: 0; right: 0; text-align: center; font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, Arial;">
        <img src="buttonwood.png" alt="Buttonwood" style="max-width: 250px; display: block; margin: 0 auto;">
        Loading Buttonwood&#0153 Cloud Broker ...
      </div>
    </div>
    <script src="dist/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
  </body>
</html>
4 Likes
4

I thought the prod build would overwrite index.html on each build.

1 Like
5

For cli-bundler, the prod build uses rev hash which only rewrites vendor-bundler.js string.

1 Like
6

Perfect, that will do it then. :slightly_smiling_face:

1 Like