Meteor : add elements to the app.html

StackOverflow https://stackoverflow.com/questions/20177544

  •  04-08-2022
  •  | 
  •  

Question

The sourcecode of the app.html in a meteor app will look like this :

<!DOCTYPE html>
    <html>
    <head>
      <link rel="stylesheet" href="/846a8d9499cc559cd36226c07803f069a9b314a4.css">
      <script type="text/javascript" src="/bd418141a43a911de5fcb0fc9eef1599abd72874.js"></script>
    <title>application title</title>
    </head>
    <body>
    </body>
    </html>

This is simple and nice. (you can add meta in the head part).

But what if I want to add a loader for the app ?

I use a few libraries and my main js is probably going to weight a little more than one mo. I cannot image display nothing while it's loading.

The easier way would be to write a few line of classic inline html. But when I write something in the html, it's inclueded in my templates.

How would you change the app.html ?

Was it helpful?

Solution

Short answer: You can't. As far as I'm aware, Meteor will always send down an empty <body> tag and fill it in via templates.

If you have so much code that the concatenated JavaScript is quite heavy, you can split parts of it off. See this question for some techniques on how to do so. Personally I try to load from CDN any libraries that I'm using "out of the box," like Bootstrap (not an option for jQuery, unfortunately). To load from CDN, just include a <head> block in one of your HTML files and link to the CDN-hosted library files like normal, and leave them out of your project. Another option is to use jQuery's $.getScript() to load specific scripts on demand only on the pages that need them.

But that just lessons the load of your concatenated JavaScript file, it still doesn't really answer your question of having some HTML sent to the client immediately. To accomplish that, the only method I'm aware of is to have some other Web server in front of Meteor. For example have an Apache or Nginx server listening on port 80 that sends down a simple HTML file that has your initial content, and also loads the two Meteor-generated concatenated .js and .css files. Meteor would either replace the contents of <body> on load, or you would need to write some JavaScript to do so so that it gets "handed off" to Meteor so that Meteor can start rendering its templates there. I doubt the handoff would be very smooth, unfortunately. Alternatively if your initial page is more of a splash page, for example a simple login form, it could exist by itself served by Apache/Nginx and then on submit the user moves into the Meteor-served world. While the user is filling in the form the concatenated .css file (if not both the .css and .js files, or the .css file and any CDN-served or non-concatenated .js files) could be downloading in the background and getting cached. To be honest though I'm not sure it's worth all this effort, it adds a lot of complexity for what's probably only a very slight speed improvement (and even then, only on the initial load of the home page).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top