Skip to main content

Creating a Custom Document

The document is an HTML file served by the Node server whenever a page request is made. It contains the head, body, and all HTML tags.

Custom Document enables ability to update these tags and render the data according to the needs.

Setting up a custom document​

Create a file named document.js inside the server folder with the following content.

server/document.js

import { Head, Body } from "catalyst"

function Document(props) {
    return (
        <html lang={props.lang}>
            <Head {...props} />
            <Body {...props} />
        </html>
    )
}
export default Document

This file is auto-generated when the application is made using create-catalyst-app

This document is always rendered on the server.

Head and Body tags are required and the application won't work without it. It is mandatory to pass props because they are used in Head and Body tags.

Custom tags should be added between the Head and Body tags.

Meta tags​

Meta tags can be added in the Head component which will be present in the document served from the server.

server/document.js

import { Head, Body } from "catalyst"

function Document(props) {
    return (
        <html lang={props.lang}>
              <Head {...props}>
                <meta charset="final" />
              </Head>
            <Body {...props} />
        </html>
    )
}
export default Document

Adding Third-Party scripts​

This party scripts too can be added in the HEAD tag.

server/document.js

import { Head, Body } from "catalyst"

function Document(props) {
    return (
        <html lang={props.lang}>
            <Head {...props}>
                <script dangerouslySetInnerHTML={{ __html: `
                    document.getElementById('banner').classList.remove('hidden')
                  `}} />
            </Head>
            <Body {...props} />
        </html>
    )
}
export default Document