cra-template

A CRA Template to create iQ React Apps.

Usage#

See Creating a New Hub App for full usage.

npx create-react-app <my-app> --template @iqmetrix/cra-template --use-npm

Features#

In addition to all the standard features provided by Create React App, we provide the following iQ specific features.

Authorization #

Toggle pages or individual components based on the current user's permissions.

Azure DevOps Pipelines #

Build and release your application through Azure DevOps Pipelines.

Cypress E2E Testing #

Write E2E tests for your application using Cypress.

Design System Components #

Use the React Design System implementation to create your application.

Google Analytics #

Add analytics to your application to understand how it is used.

i18n #

The template application is ready to be translated into any locales you require.

Prettier #

Keep your code formatting consistent, stop worrying about bikeshedding, and just write apps.

Routing #

Sentry Error Logging #

Record and triage runtime errors of your application with Sentry.

TypeScript #

Write safer, more maintainable applications with TypeScript.

File Structure#

Naming#

Component files are named in PascalCase

All other files are named in snake-case

Folders#

All folders contain an index.ts file that exports the public contents of their folder.

/cypress - Cypress helpers and e2e tests
/node_modules - Installed dependencies
/public - Static files included with your app
/src
  /assets - Images and other assets built into the app
  /components - Components shared between pages
  /hooks - Hooks shared between pages
  /models - Business logic types / interfaces used throughout the app
  /pages - The top level components that are routed to
    /page - A directory with the component rendered in the route and any unique components, functions, hooks, etc.
  /shared - Common functions, constants, types, and interfaces shared in the app
    /i18n - The localized strings and types for the app
  /App.tsx - Route configuration
  /index.tsx - App Initialization

Dependencies#

Refer to template.json for the up to date listing of dependencies included with @iqmetrix/cra-template.