dsc-header-footer-helmet

This repository holds the sources to provide the DSC Header/Footer, as well as the Helmet for consumption on 3rd party sites.

Pipeline | Metrics

Build process

We use Rollup for providing a bundled version of Header/Footer and respective the Helmet. To provide these builds two scripts are defined in package.json.

yarn build:headerfooter
yarn build:helmet

Both commands can also be executed in an chained way using yarn build.

On build the relevant components for header/footer/helmet will be extracted out of the @salesforcedevs/dx-components package and then bundled as single JavaScript components.

The output for Header/Footer will be stored in /public/header-footer, and the output for the Helmet in /public/helmet.

For sites that use a REST based set up (Component Library and Metadata Coverage Report) relevant configuration files will be created under public/config.

QA

The helmet is consumed by apps like www.heroku.com, which has a staging app at www-staging.heroku.com (has basic auth: leave user empty, password is "ronin"). Those apps have a HELMET_HOST config var that can be pointed to your review app, making www-staging fetch the helmet from your PR:

heroku config-set HELMET_HOST=https://your-review-app-name.herokuapp.com -a www-staging

Remember to roll back www-staging after the QA process:

heroku rollback -a www-staging

Server setup

Assets are currently served from the https://developer.salesforce.com/shared-components URL (e.g: https://developer.salesforce.com/shared-components/helmet/import.js).
The developer.salesforce.com domain is served via Fastly, with the shared-components proxying to a Heroku app (e.g: Fastly fetches https://developer.salesforce.com/shared-components/helmet/import.js from https://dsc-header-server-p.herokuapp.com/helmet/import.js)
The Heroku app uses the static Heroku buildpack. The configuration is stored in the static.json file that sets HTTP headers for caching and CORS.

Example markup

The folder scripts/src/templates contains two example HTML files that showcase how to integrate the JavaScript files, and the custom elements.