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.

Links:

• Component Wiki

Feature requests

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

ADT-Boilerplate-Halfpipe

Description

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

yarn

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

Usage

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.

Lint

yarn run lint

Will parse your code using eslint and Flow.

Test

yarn run test

Will run all *.test.jsx? files.

Documentation

yarn run docs

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

Build

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/

Analyze

yarn run analyze will analyze your Bundle's size

Deploy

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:

• ESLint
• Prettier

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"
  }
}

Features

Framework

• React

Build tools

• Webpack 4
• SCSS
• CSS Modules
• PostCSS with postcss-preset-env
• Image optimization

Testing tools

• Public DevServer using Ngrok (Custom made Webpack Plugin)
• Jest Unit Testing

Coding style

• Airbnb coding standard (integrated with es-lint)
• Prettier (integrated with es-lint)
• Flow Types (variable types in JavaScript)
• Husky (Lint code before commiting)
• Async

Documentation

• ESDoc

Setup

Optional

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

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

Troubleshooting

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.

Roadmap

Documentation:

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

Deployment:

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

Development:

• 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:

| Request | DT | Severity | Status | | --------------------------------------- | :-------- | -------: | -----: | | Add Auto-generated Freeform | @danieapt | 2 | ✓ | | Prefix css to avoid instances conflicts | @abiteau | 2 | ✓ | | Add support for TypeScript | @abiteau | 5 | | | Use css variables + IE polyfill | @abiteau | 5 | ✓ |