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.


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#


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


    @import "~@iqmetrix/antd/dist/accessibility.css";
    @import '~@iqmetrix/style-tokens/dist/scss/tokens-accessibility';
  4. Use Ant Design's components to build your app.


    import React from "react";
    import "./App.css";
    import { Button } from "@iqmetrix/antd";
    const App: React.FC = () => <Button>Hello world</Button>;
    export default App;


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 ๐ŸŽ‰

Last updated on by aslaug sollilja