Go Live

A few things are usually needed before going live "for real".

Make sure all links are correct

When you launch a website you don't want the first feedback to be "that link doesn't work".

To prevent this we want to execute rocket lint before going live. It will make sure all internal links are correct by using check-html-links. Typically we deploy via a Continuous Integration system like GitHub Actions or Netlify Deploy. We can also integrate the lint command into that process.

rocket build
rocket lint

Fixing broken links

If found a couple of broken links on your page and you want to fix them and verify that they are now correct it might be a little time consuming to create a full production build every time. The reason is that a production build is doing a lot of things

1. Generate HTML
2. Generate & Inject Open Graph Images
3. Optimize Images (not available yet)
4. Optimize JavaScript

But there is a way around this. We can use an optional flag --build-html which means it will run only (1) and then lint that (non-optimized) HTML output.

So for a more time efficient way of validating link use

rocket lint --build-html

Note: We can do this as 2-4 generally does not impact links/references (as long as the optimizations scripts do not have related bugs)

Check external links

rocket lint can also check external links. This will do a HEAD/GET request to every external link which means if all is green that the website only links to still active websites. It however also means that it will do a lot of network requests which will take a while.

Use with care.

rocket lint --validate-externals

Add a Not Found Page

When a user enters a URL that does not exist, a "famous" 404 Page Not Found error occurs. Many servers are configured to handle this automatically and to serve a 404.html page instead.

Be sure to check your preset if it comes with a 404 Layout you can use.

As an example

The Rocket Launch preset ships a default 404 template you can use.

To enable it, you need to create a 404.md and use the 404 layout.

👉 site/pages/404.html.rocket.js

import { Layout404 } from '@rocket/launch';

export const layout = new Layout404();

export default () => '';

This results in a 404.html page, which will do nothing by itself. But many hosting services like netlify or firebase, for example will redirect 404s to this 404.html by default.

If the hosting provider doesn't already do this, then you may be able to accomplish it via some settings for example by using a .htaccess file in case of an apache server.

Add a Sitemap

A sitemap can be used to inform search engines or services about the pages your site has.

You can create one by adding this file:

👉 site/pages/sitemap.xml.rocket.js

import { LayoutSitemap, PageTree } from '@rocket/engine';
import rocketConfig from '../config.rocket.js';

export const pageTree = new PageTree();
await pageTree.restore(new URL('./pageTreeData.rocketGenerated.json', import.meta.url));

export const layout = new LayoutSitemap({
  pageTree,
  absoluteBaseUrl: rocketConfig.absoluteBaseUrl,
});

export default () => '';

The code of the LayoutSitemap is rather short so you can copy and tweak it if needed.

export class LayoutSitemap {
  /**
   * @param {object} options
   * @param {import('../web-menu/PageTree.js').PageTree} options.pageTree
   * @param {string} options.absoluteBaseUrl
   */
  constructor({ pageTree, absoluteBaseUrl }) {
    this.pageTree = pageTree;
    this.absoluteBaseUrl = absoluteBaseUrl;
  }

  render() {
    return `
      <?xml version="1.0" encoding="utf-8"?>
      <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        ${this.pageTree.all().map(
          page => `
          <url>
            <loc>${this.absoluteBaseUrl}${page.model.url}</loc>
            <lastmod>${page.model.lastmod || new Date().toISOString()}</lastmod>
            <changefreq>${page.model.changefreq || 'monthly'}</changefreq>
          </url>
        `,
        )}
      </urlset>
    `;
  }
}