Share Component

Arch

• local isolated dev: create-react-app (unejected) run via docker-compose
  • storybook for nicer isolated dev
• integrated dev: webpack
  • native for prod, docker watcher for dev
  • -> volume mounts, including node_modules/, for live

We follow CRA for standalone (storybook, ...). CRA does not support library output nor in UMD (script-tag-friendly), so for integration scenarios like Nexus, we do an ejected version.

Development

If using from another container, it should "just work" by autobuilding a local copy. Watchers take more work:

• Install: docker compose build
• Isolated live dev:
  • storybook (default): docker compose up => localhost:6006
    • manual storybook: docker compose run --service-ports frontend npm run storybook
  • react (public/index.html): docker compose run --service-ports frontend npm start => localhost:3000
    • whenever it goes funny, do a docker compose down -v and restart, or page refresh
    • or try adding a local-only .env in the host with FAST_REFRESH=false
• Cross-module live dev: ./live.sh (docker compose run frontend npm run watch)
  • ex: ./nc up => localhost:8000
    • ... NOTE: Refresh browser for updates
  • Live emits at build/js/share.js (volume mounted)
    • ... which other dev containers are free to watch/mount
  • CRA version as watch-cra, except currently not publishing symbols some reason
    • ... so sticking with direct webpack mode, YOLO
• Cross-module one-shot dev: docker compose run frontend npm run build-dev
  • Emits build/js/share.js (volume mounted)

We use webpack.config.js + .babelrc as CRA currently does root index as entrypoint

Production

Build:

docker compose build  # => npm i
docker compose run frontend npm run build-prod  # => emits build/ on host

Import:

build/index.link.html, build/index.scripts.html

Use

import React from "react";
import ShareModal from '@graphistry/share-component';
import 'bootstrap/dist/css/bootstrap.css';

export const widget = <ShareModal/>;