@beatchainmusic/ui v1.0.57

The single page application for the main Beatchain web app. Built with custom webpack config and deployed to S3/Cloudfront static hosting.

Useful commands

Run development server in watch mode

npm start

Run development server against localhost API

npm run local

Run full minified build locally

npm run build-development && npx serve build

🚨 Run localhost against production API (use with caution! but sometimes useful for debugging and with real users and data)

npm run debug-prod

HTTPS in development

Useful for testing stripe payment request button or API integrations that require https.

Instructions for MAC: 1. Install mkcert: brew install mkcert 2. Create certificates: mkcert -key-file ./key.pem -cert-file ./cert.pem "localhost" 3. Grab local IP: ifconfig en0 | grep inet | grep -v inet6 | awk '{print $2}' 4. Run docker replacing ip_address with the output from 3. : docker run --name nginx_proxy -d -v `pwd`:/etc/nginx/conf.d --add-host localnode:192.168.0.66 -p 443:443 nginx 5. Access your locahost:3000 development server through https://localhost

Data fetching

Please use the withData higher order component as this simplifies and standardises common CRUD requirements. This replaces custom ajax logic, redux-saga and apollo/graphql entirely.

Basic example

This simple example wraps your component and handles data fetching (using React.useEffect internally), presenting standard props of props.data and props.isLoading. props.getData is also passed down to allow re-fetching data. apiPath is a function that should return the required api route. actId plus any props from the component are available as parameters.

export default withData({ component: Playlists, apiPath: ({ actId }) => `insights/${actId}/playlists` });

Multiple api calls on mount

Occasionally you need to fetch data from two different APIs when you mount the component. In this case just pass an array for apiPath.

export default withData({ component: Playlists, apiPath: [ ({ actId }) => `insights/${actId}/playlists` ({ actId }) => `distribution/${actId}/releases` ] });

Component Styling

styled components standards to go here