2020-11-22 20:50:07 +00:00
<!--
2021-01-06 20:37:59 +00:00
SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
2020-11-22 20:50:07 +00:00
SPDX-License-Identifier: CC-BY-SA-4.0
-->
2020-09-02 19:17:26 +00:00
# HedgeDoc - React Client
2020-05-14 13:41:38 +00:00
2020-12-22 16:27:26 +00:00
2021-10-07 19:19:07 +00:00
[](https://lgtm.com/projects/g/hedgedoc/react-client/context:javascript)
[](https://lgtm.com/projects/g/hedgedoc/react-client/alerts/)
2020-07-16 09:22:53 +00:00
2021-12-25 15:44:24 +00:00
This is the new, improved and better looking frontend for HedgeDoc 2.0. Our goal is to recreate the current frontend in
react and to improve it.
2020-05-14 13:41:38 +00:00
2020-06-06 21:58:45 +00:00
## Preparation
2021-12-25 15:44:24 +00:00
2022-06-15 18:40:26 +00:00
You need at least Node 14 (we recommend Node 18) and [yarn ](https://yarnpkg.com/ ).
2022-07-30 21:32:19 +00:00
You MUST use yarn! There is no support for npm.
2020-05-14 13:41:38 +00:00
2020-06-06 21:58:45 +00:00
## Development mode
2020-05-14 13:41:38 +00:00
2020-12-22 16:27:26 +00:00
1. Clone this repo (e.g. `git clone https://github.com/hedgedoc/react-client.git hedgedoc-react-client` )
2020-09-02 19:17:26 +00:00
2. Go inside the repo (e.g. `cd hedgedoc-react-client` )
2020-08-04 19:29:17 +00:00
3. Run `yarn install`
2020-07-29 20:58:01 +00:00
4. Either run
2021-12-25 15:44:24 +00:00
- `yarn dev` - Calls only mocked version of the api. Doesn't need a HedgeDoc backend.
- `yarn start:for-real-backend` -
Expects [a HedgeDoc backend server ](https://github.com/hedgedoc/hedgedoc/tree/develop ) running
under [http://localhost:3000 ](http://localhost:3000 ))
2020-05-14 13:41:38 +00:00
2020-07-29 20:58:01 +00:00
This should run the app in the development mode and open [http://localhost:3001 ](http://localhost:3001 ) in your browser.
2020-05-14 13:41:38 +00:00
2021-12-25 15:44:24 +00:00
The page will reload if you make edits. You will also see any lint errors in the console.
2020-05-14 13:41:38 +00:00
2020-07-16 09:22:53 +00:00
### Tests
2020-07-16 09:34:56 +00:00
#### Unit
Unit testing is done via jest.
2020-08-04 19:29:17 +00:00
1. Run `yarn test`
2020-07-16 09:34:56 +00:00
2020-07-16 09:22:53 +00:00
#### End2End
We use [cypress ](https://cypress.io ) for e2e tests.
2021-12-25 15:44:24 +00:00
1. Start the frontend with `yarn dev:test` in dev test mode or build a test build with `yarn build:test` which you can
serve with `yarn serve:build`
2020-12-29 16:13:07 +00:00
Don't use the regular start/build command, or the tests will fail!
2020-08-04 19:29:17 +00:00
2. Run `yarn cy:open` to open the cypress test loader
2020-07-16 09:22:53 +00:00
3. Choose your browser and test
4. Let the tests run
2020-09-20 21:22:37 +00:00
### Bundle analysis
2021-12-25 15:44:24 +00:00
2020-09-20 21:22:37 +00:00
You can inspect the generated production-bundle files to look for optimization issues.
1. Run `yarn analyze`
2021-12-25 15:44:24 +00:00
2. Open the generated `.next/server/analyze/server.html` in your favourite browser
2020-09-20 21:22:37 +00:00
2020-05-14 13:41:38 +00:00
## Production mode
2020-12-22 16:27:26 +00:00
1. Clone this repo (e.g. `git clone https://github.com/hedgedoc/react-client.git hedgedoc-react-client` )
2020-09-02 19:17:26 +00:00
2. Go inside the repo (e.g. `cd hedgedoc-react-client` )
2020-08-04 19:29:17 +00:00
3. Run `yarn install`
2021-12-25 15:44:24 +00:00
4. Run `yarn build`
This will build the app in production mode and save it into the `.next` folder. The production build is optimized for
best performance, minimized and the filenames include a hash value of the content. Don't edit them by hand!
2020-05-14 13:41:38 +00:00
2021-12-25 15:44:24 +00:00
You can run the production build using the built-in server with `yarn start` .
2022-01-11 14:59:03 +00:00
## UI Test
Curious about the new look and feel? We provide a demo of the new UI on [hedgedoc.dev ](https://hedgedoc.dev ). This version uses mocked data and has no data persistence.
The UI test is hosted by [netlify ](https://netlify.com ). Please check their [privacy policy ](https://netlify.com/privacy ) as well as [ours ](https://hedgedoc.org/privacy-policy ).
