src
├── __fixtures__ # dummy models
├── api # API clients
├── components # shared components
│  └── comp-name
│     ├── comp-name # component's components
│     ├── index.tsx
│     ├── index.test.ts
│     └── index.stories.ts
├── constants # shared constants
├── hooks # shared hooks
├── middlewares # redux middlewares
├── mocks # API mock files
│  └── services
├── modules # redux modules
│  └── module-name
│     ├── index.ts
│     └── index.test.ts
├── styles # shared styles
├── types # application types
└── utils # utils files

We use msw for mocking API, so you can see UI without running API server.

make run/web

The app will be available at http://localhost:9090.

If you want to connect to a real API server, additional settings on the .env file are needed.

First, create your own .env file based on the .env.example file.

cp .env.example .env

Add your API endpoint to the .env file like this:

API_ENDPOINT=https://{API_ADDRESS}

Set ENABLE_MOCK to false explicitly.

ENABLE_MOCK=false

If the API server has authorization by cookie, set API_COOKIE to the cookie you have already obtained through other clients (typically you need to send some kind of request from an authenticated client and peek at the request header in some way).

API_COOKIE={COOKIE}

Take Chrome for example;

1. Access to the existing UI.
2. Open the developer tools and go to the network panel.
3. Find the GetMe request and select it.
4. Copy the whole value of the Cookie in "Request Headers" and paste it to API_COOKIE={COOKIE} in the .env file.