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#

Register pages, read URL parameters, and navigate using react-router-dom.

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.

Sources#

Last updated on by Garrett Smith