Getting started

Do you want to create a project that lives outside of Hub? Well, you have come to the right place 🎉 Please follow the steps below to set up a new project from scratch.

Prerequisites

• Take a look at Best Practises for development

• Make sure to read about the responsibilities of owning an app

• Familiarize yourself with available components

• A configured development environment

• A repository to host your code

  Your team lead or tech lead will have permissions to create a GitHub repository

Setting up a new project

We recommend using the @iqmetrix/cra-template since it does come with all the necessary packages and best practices. We also update the template regularly. You can follow the Creating a new Hub app guide for more detailed guide but note that you need to remove the hub-dev-server package and change the package.json scripts to prevent your app from being served inside of the Hub shell. You can take a look at the Queue Management app repo for a reference.

If you choose not to use the template you can follow the guide below:

Bootstrap Your App

1. Create a create-react-app application following CRA's Getting Started Guide or Typescript Guide.

   For example, to create a Typescript CRA app run:

   npx create-react-app <my-app> --template typescript

   Use the --use-npm option to skip using yarn, which is default for create-react-app

2. Create an .npmrc file (this is so you can use iQmetrix's packages)

3. Run this script and navigate to http://localhost:9000/ to see your application running

   npm start

Add dependencies

Analytics

We use Google analytics for tracking events and user behaviour in our apps.

1. Install @iqmetrix/analytics package

   npm install @iqmetrix/analytics

Storybook and style tokens

Storybook contains all the visual components used to build apps. They are eiher built using Ant Design or are custom made.

1. Install @iqmetrix/antd package

   npm install @iqmetrix/antd

2. Install @iqmetrix/style-tokens package

   npm install @iqmetrix/style-tokens

3. Add the accessible theming and style tokens to your app

   src/index.css

   @import "~@iqmetrix/antd/dist/accessibility.css";

   @import '~@iqmetrix/style-tokens/dist/scss/tokens-accessibility';

4. Use Ant Design's components to build your app.

   src/App.tsx

   import React from "react";

   import "./App.css";

   import { Button } from "@iqmetrix/antd";

   const App: React.FC = () => <Button>Hello world</Button>;

   export default App;

Cypress

Cypress is our End to End Testing Framework of choice.

1. Install @iqmetrix/cypress package

npm install @iqmetrix/cypress

Next Steps

🎉 Well done, you should now have a working project locally. For next steps, take a look at Configure infrastrucutre 🎉

• If you experience a bug, submit a bug report
• Consider contributing new features