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;
- Access to the existing UI.
- Open the developer tools and go to the network panel.
- Find the
GetMe
request and select it. - Copy the whole value of the
Cookie
in "Request Headers" and paste it toAPI_COOKIE={COOKIE}
in the.env
file.