wme-gep-component-service v1.16.0

wme-gep-component-service (Internal Use Only)

Overview:

This project contains the following services:

• GraphQL server that exposes component's metadata consumed primarily by the CMS and Render Engine services.
• Storybook component's explorer that contains a preview for each component used in the site isolated with all the properties that can be set up form the CMS.
• Theme development and theme version management

In order to be able to use the Storybook library this repository is a meta repo, which basically means that it wraps one or more repos. Check the meta project for more info.

• GEP Component Service
  • Overview
  • Environments
  • Local Development
    • Getting Started
    • Steps to run Storybook locally
    • Running in docker container
    • Steps to run explorer repo
  • Adding a new component to the meta repo
  • Uploading component
    • Uploading component's metadata
    • Uploading all component's metadata
  • Publishing an updated component
  • Unit Testing
  • Commit Messages
    • Example
  • NPM Commands
  • Build to Staging

Environments

Environment	URL	Branch/tag	Aure Pipeline
🚧 dev	https://dev-component-service.wme-digital.com/	develop
🧪 qa	https://gep-component-service-qa.wme-digital.com	main
🏁 staging	https://gep-component-service-staging.wme-digital.com	rc-* tag	Component Service Pipeline
🚀 production	https://gep-component-service-prod.wme-digital.com	N/A (promoted from staging artifact)

Local Development

Follow the instructions below to run storybook and explorer locally:

Getting Started

1. Enable SSO authentication for all organizations on your SSH key in GitHub. Click the Configure SSO dropdown to verify that all organizations are authorized.
2. Clone this repository: git clone git@github.com:warnermediacode/wme-gep-component-service.git
3. Install dependencies
   • AWS CLI v2
   • Node.js 14.16.0: Install npm using nvm by running nvm install 14.16.0 then nvm use 14.16.0.

   • gimme-aws-creds: Install gimme-aws-creds by running pip3 install --upgrade git+git://github.com/WarnerMedia/gimme-aws-creds.git

     • Set your profile: export AWS_PROFILE=aws-wme-entertainment:aws-wme-entertainment-devops

Steps to run Storybook locally

1. Run one of the following commands at the root level of the project (based on your case):

   • If this is your first time with this repo and you are about to start working on it, run: npm run clean:local (DANGER - this command will delete all the files that haven't been added to the git index).

   • If this is not your first time working on the repo and you have already ran the above command in the past, you should run npm run setup.

   Both commands will add a .npmrc file to the root directory and a explorer/config/localEnv.json config file, then install the dependencies in the root of the repo.

   • If you get weird errors about missing dependencies in the components, try running npm run clean:all, and then continue to the next step (Be careful that clean:all will act as clean:local in terms of destruction).

   • If you get stuck on the following line (or similar) when running npm run clean:local, ⸨░░░░░░░░░░░░░░░░░░⸩ ⠧ rollbackFailedOptional: verb npm-session 16ea8e89da049e33,

     run the following command to add ssh key

     ssh-add -k ~/.ssh/id_rsa
     Enter passphrase for your .ssh/id_rsa key: 
     then run npm 'run clean:local'

2. Run npm install to add the rest of the dependencies if there are any missing dependencies after running step #1

3. Run npm run meta:update. This will install all of the components from git repo of those components into the src directory.

   If you need to checkout updates from other branch, you can also run the following command to ensure components are up to date in the correct branch. ex:

   • npm run meta:checkout develop (checkout updates from the develop branch)
   • npm run meta:checkout main (checkout updates from the main branch)
   • npm run meta:pull (checkout from all branches)

   npm run meta [arguments] can be used for any other meta command you want to run.

4. Run npm run storybook to build the stories and start the local Storybook instance on http://localhost:6006/

Running in docker container:

1. docker-compose build --build-arg NPM_TOKEN="$(cat ~/.npmrc)" --build-arg SSH_PRIVATE_KEY="$(cat ~/.ssh/id_rsa)" --build-arg NPM_TOKEN_COMPONENTS="$(cat .npmrc)"

Please make sure that you have the next files:

• .npmrc
• ~/.npmrc
• ~/.ssh/id_rsa

2. docker-compose up

Steps to run explorer repo

The explorer directory is a separate repo, it contains component dictionary info. You will need to install dependencies there to run it locally. You can build and start the explorer on its own, independently from the storybook instance. 1. Run npm run setup to install the dependencies, the config and context.js (make sure you have .npmrc in the root directory)

2. Run npm run start:local to start the instance on http://localhost:8080/catalog/

3. You can also check the query from graphql on http://localhost:8080/graphql

   `query ($brand: String!) { components(brand:$brand) { name version brands } }

   { "brand": "hbomax" }`

Adding a new component to the meta repo

For warnermediacode repos run the command npm run meta:import:WMCode repo name, this will clone the repo into the src directory ex: npm run meta:import:WMCode wme-component-band

For non-warnermediacode repos run the command npm run meta:import repo name ex: npm run meta:import:WMCode component git@github.com:some-org/component.git

NOTE: This command will also update the .gitignore and .meta files.

Uploading component

Follow the instructions below to upload component metadata or all component metadata:

Uploading component metadata

To upload the metadata of a component to the s3 bucket, you need to run the script from the /src/ folder with the following command

`node metadataUpload.js <component-name>`

The parameter should be the exact same as the name of the repository for the component (after the wme-component-). To check if the components being uploaded successfully, you can check it on s3://gep-component-service-dev, inside the components directory for the matching component name. For example, if you upload from src/wme-component-audio-player directory, you shall see the updates in s3://gep-component-service-dev/components/audio-player folder.

Uploading all component metadata

THIS SHOULD BE DONE WITH EXTREME PRECAUTION

If for any reason you need to upload the metadata of all the components inside the /src/ folder, follow the pattern hbomax-component-*, you need to run the script from the /src/ folder,

 `node uploadAllMetadataFiles.js` 

This will send all the *.metadata.json file inside each component folder and overriding the existing files in the s3 bucket.

NOTE: Azure copies all components from its lower environment. See below:

• When Azure builds to qa, it runs:

aws sync s3://gep-component-service-dev s3://gep-component-service-qa

• When Azure builds to staging, it runs:

aws sync s3://gep-component-service-qa s3://gep-component-service-staging

Publishing an updated component

In your component's PR:

• Update the version in your component's package.json. Make sure to follow semantic version standards.

Once your component's PR is merged, run npm i in order to compile the files and upload them to S3. NOTE: If you haven't run npm i yet, you'll need to set up the repo first (which is basically identical to steps to setup the explorer repo):

• Copy the .npmrc from the component service directory to your component's directory (run cp .npmrc [relative path to your component]/.npmrc from the component service)
• Run npm i

Note: .npmrc is a hidden file, it is included in .npmignore, will be ignored in git commit.

Next, we need to publish the component by running npm publish to publish its metadata to S3, and publish the package to Github.(see reference https://docsprod.turner.com/pages/viewpage.action?pageId=229840781)

Finally:

• Make sure to update the services that using your component. Below are the 3 apps using your component

  • https://github.com/warnermediacode/wme-gep-component-service
  • https://github.com/warnermediacode/wme-gep-web
  • https://github.com/warnermediacode/wme-gep-renderengine/

• You can update each of these repos by running the following command from within the repo to be updated: npm i [component name]@[version], for example: npm i @warnermediacode/wme-component-season-episode@1.3.0. Then open a PR in that repo and merge the change.

Unit Testing

To run unit tests:

• npm run unit-test

  Mocha will pick up any file that has the word test in the name. Current convention is to put unit test files alongside the modules you are testing. (ie: <module_name>.test.js)

  GEP Testing Strategy

Commit Messages

Commit messages should include a reference to your JIRA ticket (or NOTICKET). Here's a good practice for commit messages: Conventional Commits:

Format: <type>[optional scope]: <ticket> <description>

(<scope>) is optional

Example

feat: WMEEPP-123 create new feature
^--^  ^--------^ ^----------------^
|     |          |
|     |          +- Summary in present tense.
|     |
|     +------------ JIRA ticket number.
|
+------------------ build, chore, docs, feat, fix, refactor, style, or test.

Types:

• build: Changes related to the build process.
• chore: Updating grunt tasks, etc.; no production code change.
• docs: Changes to the documentation.
• feat: New feature for the user, not a new feature for build script.
• fix: Bug fix for the user, not a fix to a build script.
• refactor: Refactoring production code, eg. renaming a variable.
• style: Formatting, missing semi colons, etc; no production code change.
• test: Adding missing tests, refactoring tests; no production code change.

NPM Commands

Run with npm run [command]:

Build to Staging

For reference only (devs don't typically run staging builds, except in the case of a regression or hotfix):

Code builds to staging by tagging main with a rc-* tag in the Repo Tagging Pipeline Script. To do so, add your tag and, optionally, the latest commit sha in the pipeline ui. This tagged version builds to staging.

GEP uses custom tagging in this pattern: rc-<year number>.<sprint number>.<build number of this sprint>. rc-1.3.2 means year 2, sprint 4, build 3 of this sprint (zero-based numbering).

Monitor the build in the Azure Pipeline

Validate on staging