mfp-react-components v0.4.4

MyFitnessPal web component library

See the docs

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  $ npm install --save mfp-react-components

importing components

import both CSS and JS required at top of file

  import Button from 'mfp-react-components/dist/Button'
  import 'mfp-react-components/dist/Button.css'

files

• buildspec.yml - this file is used by AWS CodeBuild to build Storybook, setup S3 bucket settings, and deploy
• Dockerfile - this creates a AWS / Node environment image

quick start

with npm / yarn

  $ npm install   # or `yarn`
  $ npm run build # or `yarn build`
  $ npm start     # or `yarn start` to start server on `9001`

with docker

  $ npm run docker-install  # install node_modules
  $ npm run docker-build    # build storybook into `dist`
  $ npm run docker-start    # start server on `9001`

development

first, link this project locally:

  $ npm link

then, link to this project from another. ex from mfp-react-main:

  $ npm link mfp-react-components

now, you should be able to import components and their CSS. ex:

  import Button from 'mfp-react-components/lib/Button'
  import 'mfp-react-components/lib/Button.css'

scripts

npm start - starts a local development server on port 9001; reads from dist/ (see npm run build below) npm run build - builds storybook using the config in .storybook; compiled files are generated into lib/ npm run docker-install - used to install node_modules; useful in yolo environments npm run docker-build - used to build storybook; useful in yolo environments npm run docker-start - builds and starts a development webserver on port 9001; useful in yolo environments npm run prepublish - (auto) this hook fires along side of two other hooks: before npm publish and after npm install; this can be called manually to create a dist that contains files used to house the library

deployment

There is a deployment pipeline that can be used to build the project and deploy the static site to an S3 bucket. To deploy, push to the master branch and the site will update once the pipeline completes (appx. ~3 minutes currently)

  $ git remote add upstream ssh://git-codecommit.us-west-2.amazonaws.com/v1/repos/component-lib
  $ git push upstream master

using your AWS credentials

install the aws cli

  $ pip install --upgrade --user awscli

configure access key id, secret key, and region

  $ aws configure

Note: use us-west-2 for default region and json for output type