buffup-web-sdk

Sport Buff Web and Twitch SDK

Env Vars

NODE_ENV=development
TWITCH_USER_ID= # user id used for twitch dev rig config
TWITCH_CHANNEL_ID=# used to change which channel is used for buffs
TWITCH_CHANNEL_NAME=# used to change the video of the channel
DEV_STREAM_ID=# a stream id to point the dev mode to. Not required
FRIENDS_GROUP=true
EDIT_PROFILE_PICTURE=true
ENABLE_ANALYTICS=true
ENABLE_CHAT=true
PUBNUB_KEY=x
PUBNUB_PUBLISH_KEY=x
AMPLITUDE_KEY=f4b7e4e19f9033631b9500d8e771c83c
CENTRIFUGO_TOKEN= # request token to the team
FB_LOGIN=true # boolean if to display facebook login
CLIENT_NAME=develop # client name to init sdk with
ACCOUNT_NAME=develop

Twitch extension

To run the extension locally it is recommended to install Yarn through the npm package manager, which comes bundled with Node.js when you install it on your system.

Once you have npm installed you can run the following both to install and upgrade Yarn:

npm install --global yarn

In order for the app to work on Twitch, we need to create a build following this steps:

• yarn install - To install all the npm packages and dependencies
• Find and delete the /dist folder in the root folder
• yarn build:twitch - to build the code
• Zip the content within the newly created /dist folder (Attached in the main zip file as Archive.zip)

CI Pipeline & deployments

main branch auto deploys to latest https://buffup-public.s3.eu-west-2.amazonaws.com/buffup-web-sdk/latest/bundle-main.min.js pointing to https://sdk.stage.buffup.net/api Creating a tag will allow deployment to other envs such as stage, prod and client accounts. To deploy to any other env use client-accounts repo and the manifests to specify the tag version to be used per env. Creating a tag or release does not activate the pipeline in this repo.

latest/bundle-main.min.js points to https://sdk.stage.buffup.net/api staging/bundle-main.min.js points to https://sdk.stage.buffup.net/api 2.x/bundle-main.min.js points to https://sdk.prod.buffup.net/api

Code generation using hygen

Components can be generated using hygen.

Running the following command will create a Item component in ./src/components/molecules

$ npx hygen component new --type molecule --name item

All the required component files are generated including styles, stories, and tests. The new component can be viewed in Storybook immediately.

./src/components/molecules/Item
-- index.ts
-- types.ts
-- Item.tsx
-- Item.stories.tsx
-- Item.test.tsx