11.0.1 • Published 4 years ago

adt-sticky-footer v11.0.1

Weekly downloads
Last release
4 years ago

Sticky Footer

Creates a sticky footer, by making the below component stick to the bottom of the page. Usually the below component is a Hero Image.


Feature requests

  • Smooth-scrolling to internal links
  • Allow toggle stickiness by device



This Boilerplate enhances the developer experience when setting up new Halfpipe components. It checks for code quality, prevents deployments from overwriting existing components and makes local development easier by providing a public url accessible from any device. In addition, asset paths are auto-generated during the build to ensure they are served through Cloudfront (CDN) for a low-latency CX.

Using the boilerplate

Use the boilerplate in a new project. Follow these steps:

  1. Create a new package with the name ADT-HalfpipeComponent-{NAME}.
  2. Clone your new package.
  3. Run the following inside your new package: git remote add boilerplate ssh://git.amazon.com/pkg/ADT-Boilerplate-Halfpipe && git pull boilerplate mainline --allow-unrelated-histories && git remote remove boilerplate && git branch set-upstream-to origin mainline.

First time set-up

Only needed the first time when working with Halfpipe:

  1. Set-up your work environment, so it can interact with the Halfpipe AWS account. Follow steps 1-5 here.
  2. Use Node v10 or above. Use nvm or n to manage multiple versions of NodeJS on your machine.
  3. Install yarn

Install dependencies


Creating a component

A component has three parts:

  1. Component information, such as displayName, releaseLevel and supportedLocales, inside package.json
  2. Form props, stored in src/props.json.
  3. The component itself, stored in src/component/Main.

Component Information

In your package.json, update the following:

"name": "{component-name}",
"displayName": "{Component Name}",
"description": "{component description}",
"homepage": "{wiki url}",
"releaseLevel": "{beta | stable}",
"supportedLocales": ["uk" | "us"],
"author": {
  "name": "{Full Name}",
  "url": "https://phonetool.amazon.com/users/{alias}"
"buddy": "{buddy alias}", // used to submit code reviews. Default to "all" ADT Chime group
"repository": {
  "type": "git",
  "url": "https://code.amazon.com/packages/ADT-Boilerplate-webpack-preact" // used to submit code reviews

Form props

  "formParams": {
    "defaultValues": {
      "title": "Welcome to Halfpipe",
      "isAwesome": true,
      "asins": ["B0792KTHKJ", "B079QHML21"]
    "formInputs": [
        "key": "title",
        "label": "Title",
        "type": "string"
        "key": "isAwesome",
        "label": "Enable awesomeness?",
        "type": "checkbox"
        "key": "prodcuts",
        "label": "Featured Products",
        "type": "asins"

React Component

Update src/Main


Local development

yarn run dev

Public development (using Ngrok)

yarn run dev --public

This will create a new Ngrok instance and make your local server publically available. Additionally, all URLs will be prefixed for easy Remote Debugging.


yarn run lint

Will parse your code using eslint and Flow.


yarn run test

Will run all *.test.jsx? files.


yarn run docs

Will generate a complete documentation of your App, using your ESDoc comments.


yarn run build

Will build all your component for production, using a new version number for statics.

By default, all asset and bundle paths will be prefixed with your CDN url. You can override this public path with:

yarn run build --publicPath=https://mycomponent.com/

Absolute paths are also available. e.g:

yarn run build --publicPath=/subfolder/


yarn run analyze will analyze your Bundle's size


yarn run deploy

Will build and deploy your component to the Halfpipe registry.

Code Reviews

Generate a new Code review

yarn run review

By default, all new Code Reviews will compare your current branch to mainline. It is recommended to follow Git Flow's guidelines and always work from a feature/- branch. Once the feature is ready, please submit your code review.

Overrides are possible.

yarn run review --parent develop

The task above will compare your branch to the remote's develop

As per best practicies, it is also recommended that you provide a quick description for your Code Review.

yarn run review --desc "My short description"

Will help watchers understand the purpose of the Review straight from the Chime channel.

Once a Code Review is submitted, you can start publishing new revisions:

yarn run review --r 1234

This task will submit a new revision for the CR-1234.

Editor set-up

This boilerplate works best with VSCode. Install the following extensions:

And set the following inside the settings.json:

  "javascript.validate.enable": false,
  "prettier.eslintIntegration": true,
  "flow.useNPMPackagedFlow": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"



Build tools

Testing tools

Coding style




In your build-tools/config/webpack/index.js

  devServer: {
    port: 8080 // dev port
  dist: {
    pngQuantQuality: '85', // png compression quality


My component does not show up in Landing Page Builder?

There are a few reasons a component will not render in Landing Page Builder (LPB).

  1. Make sure the component is available in LPB's locale. Make sure that the LPB locale (e.g. US), is also included in the supportedLocales field.
  2. The deployment to Halfpipe AWS worked, but it crashed within the AWS account itself. Sign in to the AXTDT-DACX Shared AWS account, once signed in view the HalfpipePublish logs. If this fails consistently, it opens a TT assigned to DT.

cross-env is not defined

Install the global dependency cross-env, by running npm install cross-env -g.

I deployed an update, but my component does not update in Landing Page Builder.

A Halfpipe component deployment does not automatically update all components in Landing Page Builder. This is to prevent a component update from changing all live pages.

Instead, follow these steps:

  1. Remove all instances of the existing component.
  2. Save the page.
  3. Refresh the page.
  4. Add the component.



  • Add screenshots (--public etc)
  • Add docs for static / staticRoot
  • Add troubleshooting for Metadata does not match the expected Halfpipe format.


  • Deploy to an S3 bucket inside the Halfpipe AWS account (instead of ksomedia).
  • Check for duplicate keys inside src/props.json.


  • Set-up ADT-Halfpipe-Utils and ADT-Halfpipe-CoreComponents

Local Development:

  • Local asin offer data
  • Give Main component all the props it has in dev (e.g. XXX)

Feature Request

Please submit your requests here:

Add Auto-generated Freeform@danieapt2
Prefix css to avoid instances conflicts@abiteau2
Add support for TypeScript@abiteau5
Use css variables + IE polyfill@abiteau5

4 years ago


4 years ago


4 years ago


4 years ago


4 years ago