ad-react-components

This is React Typescript template for frontend application. Development teams should use this repo as the base template for their "REACT" frontend apps/projects.

Installation

To install Weave into your project you first need to set up npm --- if not already --- then you can install the package by following the instructions on the package page or entering npm install @averydennison/weave into your terminal.

Setting up NPM

Setting up a personal access token on Github

Go to your account setting > developer settings > personal access token and generate a new token with the scopes repo --- which includes all the repo scopes --- and read:packages. Your scopes setting page should look like the following.

After setting your personal access token scopes, you need to authorize SSO (Single Sign-On) for your organization like in the following example.

Logging into npm

To authenticate into the registry you can either use your project's .npmrc file or by using npm login.

.npmrc

Add the following into the .npmrc file, swaping TOKEN for your personal access token.

@averydennison:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=YOUR_TOKEN

npm login

$ npm login --scope=@averydennison --registry=https://npm.pkg.github.com

#You'll be prompted for the following
> Username: YOUR_GITHUB_USERNAME
> Password: YOUR_GITHUB_PERSONAL_ACCESS_TOKEN
> Email: PUBLIC-EMAIL-ADDRESS

Quick start

Build Storybook

cd frontend
npm install
npm run build-storybook

Start express server

npm install
npm start

Docker

Run with Docker

npm install frontend
npm run build-storybook --prefix frontend
docker build -t ad-storybook --build-arg PORT=3000 --no-cache .
docker run --rm -dp 3000:3000 --name ad-storybook ad-storybook

Stop container

docker stop ad-storybook