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.
#
PrerequisitesTake a look at Best Practises for development
Make sure to read about the responsibilities of owning an app
Familiarize yourself with available components
A repository to host your code
Your team lead or tech lead will have permissions to create a GitHub repository
#
Setting up a new projectWe 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 AppCreate a create-react-app application following CRA's Getting Started Guide or Typescript Guide.
For example, to create a Typescript CRA app run:
Use the
--use-npm
option to skip using yarn, which is default forcreate-react-app
Create an
.npmrc
file (this is so you can use iQmetrix's packages)Run this script and navigate to
http://localhost:9000/
to see your application running
#
Add dependencies#
AnalyticsWe use Google analytics for tracking events and user behaviour in our apps.
Install
@iqmetrix/analytics
package
#
Storybook and style tokensStorybook contains all the visual components used to build apps. They are eiher built using Ant Design or are custom made.
Install
@iqmetrix/antd
packageInstall
@iqmetrix/style-tokens
packageAdd the accessible theming and style tokens to your app
src/index.css
Use Ant Design's components to build your app.
src/App.tsx
#
CypressCypress is our End to End Testing Framework of choice.
- Install
@iqmetrix/cypress
package
#
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