Project starter templates

[AlanGreene]

Frontend

• Stackblitz: https://vite.new/react (npm create vite@latest my-vue-app -- --template react)
• Carbon: https://github.com/carbon-design-system/carbon/tree/main/examples/vite
• custom ?
• what are the benefits of the various community templates / starters? i18n, a11y, testing, etc. already configured?
  • what should be included? initial thoughts below
  • barebones starer using React + Vite + Carbon: https://github.com/AlanGreene/vite-carbon-react-starter
  • minimum: react, eslint, prettier, vite, tailwind (or other library / design system?), husky (with commitizen / commitlint or similar for conventional commits etc.), sass / postcss / css module support, dev container config (maybe)
  • optional: jest, testing-library, storybook, cypress, msw, react router, TanStack Query (or Redux Toolkit?), i18n (react-intl / react-i18next etc.)
• Some templates to consider / review:
  • https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite
  • https://github.com/10fabri/vite-react-starter
  • https://github.com/fabien-ml/react-ts-vite-template
  • https://github.com/The24thDS/vite-reactts18-chakra-jest-husky
  • https://github.com/lzm0x219/template-vite-react
  • https://github.com/SafdarJamal/vite-template-react
  • https://github.com/ychengcloud/react-vite-admin
• can also use degit (or https://github.com/tiged/tiged) to create new project from existing (--mode=git to use SSH clone instead of downloading tar, for private repos)

  npx degit user/project#main my-project
  cd my-project
  
  npm install
  npm run dev
  

[AlanGreene]

Note: to configure which font rules Carbon includes, see https://github.com/carbon-design-system/carbon/tree/main/packages/styles/scss/fonts

Defaults can be seen at
https://github.com/carbon-design-system/carbon/blob/1b83b44f10b5692333048e5d89e9c39b3cdae1f2/packages/styles/scss/fonts/_index.scss#L20-L29

[AlanGreene]

See https://codesandbox.io/p/sandbox/wh8r45 for alternative approach to Carbon theming

[AlanGreene]

URL shortcuts to templates on CodeSandbox / StackBlitz etc.?

[AlanGreene]

Reactive dbs / offline sync:

• https://pouchdb.com/
• https://tinybase.org/guides/releases/#v2-0
• https://pocketbase.io/
• https://watermelondb.dev/docs
  • https://github.com/nozbe/WatermelonDB
• https://electric-sql.com/
• https://www.powersync.com/
• https://signaldb.js.org/
• https://rxdb.info/
• https://www.powersync.com/

Also see https://localfirstweb.dev/

[AlanGreene]

E2E testing
Chrome for Testing:
https://googlechromelabs.github.io/chrome-for-testing/
https://github.com/GoogleChromeLabs/chrome-for-testing#json-api-endpoints

# Download the latest available Chrome for Testing binary corresponding to the Stable channel.
npx @puppeteer/browsers install chrome@stable

# Download a specific Chrome for Testing version.
npx @puppeteer/browsers install chrome@116.0.5793.0

# Download the latest available ChromeDriver version corresponding to the Canary channel.
npx @puppeteer/browsers install chromedriver@canary

# Download a specific ChromeDriver version.
npx @puppeteer/browsers install chromedriver@116.0.5793.0