index.html

At the root of your app, the index.html file serves as the base HTML file for your entire app. When Joystick server-side renders a page, that page is mounted into the <div id="app"></div> element inside of the file (included in the template created for you when you run joystick create <app_name>).Any global HTML tags that need to be present in the app should be placed in this file (e.g., meta tags for Google Fonts).

index.html

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <title>App</title>
    <meta name="description" content="A new Joystick app.">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#FFCC00">
    <link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png">
    <link rel="stylesheet" href="/_joystick/index.css">
    <link rel="manifest" href="/manifest.json">
    ${css}
  </head>
  <body>
    <div id="app"></div>
    <script>
      if ("serviceWorker" in navigator) {
        navigator.serviceWorker.register("/service-worker.js");
      }
    </script>
  </body>
</html>

SSR CSS Target

Inside of the template, Joystick anticipates a {{css}} placeholder to be present. During a server-side render, Joystick automatically injects the CSS for your component tree into this slot. If you notice that your app is missing its CSS in the browser, double-check that this placeholder is present.

Service Workers

To enable basic Progressive Web App (PWA) support, Joystick's default index.html template includes a call to import a generic service-worker.js file. This file is stored in the /public folder of your app (this makes it accessible to the index.html file when it's loaded in the browser). If your app does not require (or you don't want) service workers, the <script></script> tag wrapping this import can be commented out or deleted entirely.