rework.js
Edit page
IntroductionGetting StartedRoutingCSS & StylingPublic ResourcesPage Metadata (head)Runtime metadataStatic metadataInternationalization (i18n)Server Side Rendering
JavaScript flavors
Advanced Topics
APICommand Line InterfaceBuild time parametersChangelogLicensePwa

Page Metadata

Runtime metadata

Setting the page metadata is handled by react-helmet-async. There is no need to setup it, simply start using it!

// pages/home/home.view.tsx
import * as React from 'react';
import { Helmet } from 'react-helmet-async';
export default function HomeView() {
  return (
    <>
      <Helmet>
        <title>HomePage | MyCoolSite</title>
      </Helmet>
      <p>Welcome to my cool site</p>
    </>
  );
}

We recommend you place the default Helmet configuration inside of the Root component

Static metadata

Sometimes, you need to send metadata even if JavaScript is disabled, or before any JavaScript executes.

If you use Server-Side-Rendering, the HTML sent by the server will contain all the metadata provided by Helmet. If you don't use SSR, you can still send some metadata by modifying the base index.html file.

Note: Without SSR, index.html is built only once and used for all pages. With SSR, it is rebuilt for each page.

Setup:

In the following example, we're adding Google Tag Manager on all pages

First you need to tell the framework to use a custom html file generator:

// .reworkrc
{
  "render-html": "./src/render-html.js"
}
// src/render-html.js
// note: this file is loaded by the builder itself, it needs to be valid JavaScript for your current version of Node.
// "data" contains the metadata generated by helmet & the framework
module.exports = function renderHtml(data) {
  return `
<!DOCTYPE html>
<html ${data.htmlAttributes}>
<head>
  ${data.head}
  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','xxx');</script>
  <!-- End Google Tag Manager -->
</head>
<body ${data.bodyAttributes}>
  <!-- Google Tag Manager (noscript) -->
  <noscript>
    <iframe
      src="https://www.googletagmanager.com/ns.html?id=xxx"
      height="0"
      width="0"
      style="display:none;visibility:hidden"
    ></iframe>
  </noscript>
  <!-- End Google Tag Manager (noscript) -->
  ${data.body}
</body>
</html>
  `;
};