hedgedoc/README.md
Tilman Vatteroth 2c5a03b3ee
Restructures + New Evironment Variables (#1230)
* Use document base uri for react router

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Rename getAndSetUser to fetchAndSetUser

Getter should be reserved for simple get functions.
Everything that does a bit more logic should use a more meaningful verb.

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Rename getFrontPageContent to fetchFrontPageContent

Getter should be reserved for simple get functions.
Everything that does a bit more logic should use a more meaningful verb.

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Reformat code

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Use PUBLIC_URL env var in index.html

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Introduce new environment variables

For better testing (especially if you have multiple endpoints) this commit introduces
REACT_APP_BACKEND_BASE_URL, REACT_APP_FRONTEND_ASSETS_URL and REACT_APP_CUSTOMIZE_ASSETS_URL

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Remove redundant license information

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Remove redundant license information

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Fix rebase issues

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Remove unused file

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Correct parameter

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Fix run tasks

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Force use of bash

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Fix link to cypress picture

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* revert change

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* fix url

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Remove license info

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Revert rebase issues

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Add missing banner code

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Fix test url

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Useless change to trigger github

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Don't set backend base url because this break the mock mode detection

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

Co-authored-by: Philip Molares <philip.molares@udo.edu>
2021-05-02 22:38:43 +02:00

2.5 KiB

HedgeDoc - React Client

test, build e2e lint lint

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.

Preparation

You'll need at least Node 12. We use yarn for our dependencies.

Development mode

  1. Clone this repo (e.g. git clone https://github.com/hedgedoc/react-client.git hedgedoc-react-client)
  2. Go inside the repo (e.g. cd hedgedoc-react-client)
  3. Run yarn install
  4. Either run

This should run the app in the development mode and open http://localhost:3001 in your browser.

The page will reload if you make edits. You will also see any lint errors in the console.

Tests

Unit

Unit testing is done via jest.

  1. Run yarn test

End2End

We use cypress for e2e tests.

  1. Start the frontend with yarn start:test in dev test mode or build a test build with yarn build:test which you can serve with yarn serve:build Don't use the regular start/build command, or the tests will fail!
  2. Run yarn cy:open to open the cypress test loader
  3. Choose your browser and test
  4. Let the tests run

Bundle analysis

You can inspect the generated production-bundle files to look for optimization issues.

  1. Run yarn analyze
  2. Open the generated build/report.html in your favourite browser

Production mode

  1. Clone this repo (e.g. git clone https://github.com/hedgedoc/react-client.git hedgedoc-react-client)
  2. Go inside the repo (e.g. cd hedgedoc-react-client)
  3. Run yarn install
  4. Run yarn build:production

This will build the app in production mode and save it into the build 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!