GUM/e Prototyping

Prototype various self-contained experimental components for use across different services.

Access the prototype demo site at https://rel-discovery-prototyping.cnnio.net/

Table of Contents

• Setup
• Component Development
• Deployment
  • Deploying Individual Components
    • NPMJS Publish
    • S3 Bucket
  • Deploying the Demo Site
• Linting and Testing
• Contributors

Setup

$ nvm use
$ make install

Component Development

You can use a combination of any of the following to build a new component with this app...

• Handlebars - For clay/stellar component prototyping
• Vanilla JS - For those of us who like to live on the edge!!!
• Svelte - https://svelte.dev/
• SASS - https://sass-lang.com/

To create a new component

The recommended way to scaffold a new component is to run plop using the following command syntax:

$ make generate-component

Begin development

$ make develop

Then in a browser, visit: http://localhost:5000/. Your new component's folder name will appear as a link on the left sidenav.

Deployment

Deploying Individual Components

NPMJS Publish

First, export the component using the following command

$ make export-component ENV=prod GUM_COMPS=[component folder name] GUM_E_TYPE=stellar

This will create an ../cnn-rel-discovery-prototyping/dist/export/packed/[component folder name]/ directory on your localhost.

Navigate to that folder and do the normal npm publish steps to publish.

Note: This will publish the component to https://www.npmjs.com/package/@cnnprivate/ as an NPM module with a package prefix of 'gum-'.

OR

Web Bundle

$ make export-component ENV=prod GUM_COMPS=[component folder name] GUM_E_TYPE=web

Deploying the Demo Site

Create a Release

Merge your branch into the develop branch and then:

$ git fetch -p
$ git checkout master
$ git pull origin master
$ git checkout develop
$ git pull origin develop
$ grep version package.json
  "version": "1.18.0",  #Previous version
$ git checkout -b release/1.19.0  #Branch name is new version
$ vim package.json #Bump the version to 1.19.0 in package.json
$ git commit -am '1.19.0' #Commit message with the new version
$ git checkout master
$ git merge --no-ff release/1.19.0
$ git push origin master
$ git tag 1.19.0
$ git push origin 1.19.0
$ git checkout develop
$ git merge --no-ff master
$ git push origin develop
$ git branch -d release/1.19.0

(Note: Version numbers above are examples)

Linting and Testing

Lint

You can run eslint locally using the following command:

$ make lint

To automagically fix lint issues, you can run the following command:

$ make fix-lint-[problem|suggestion|layout|directive]

... where problem, suggestion, or layout will trigger one of lint's predefined Fix Types.

Test

Testing is done via Jest

You can run jest locally using the following command:

$ make test

Contributors

The GUM/e Bears.