* 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>
2.5 KiB
HedgeDoc - React Client
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
- Clone this repo (e.g.
git clone https://github.com/hedgedoc/react-client.git hedgedoc-react-client
) - Go inside the repo (e.g.
cd hedgedoc-react-client
) - Run
yarn install
- Either run
yarn start
- Calls only mocked version of the api. Doesn't need a HedgeDoc backend.yarn start:for-real-backend
- Expects a HedgeDoc backend server running under http://localhost:3000)
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.
- Run
yarn test
End2End
We use cypress for e2e tests.
- Start the frontend with
yarn start:test
in dev test mode or build a test build withyarn build:test
which you can serve withyarn serve:build
Don't use the regular start/build command, or the tests will fail! - Run
yarn cy:open
to open the cypress test loader - Choose your browser and test
- Let the tests run
Bundle analysis
You can inspect the generated production-bundle files to look for optimization issues.
- Run
yarn analyze
- Open the generated
build/report.html
in your favourite browser
Production mode
- Clone this repo (e.g.
git clone https://github.com/hedgedoc/react-client.git hedgedoc-react-client
) - Go inside the repo (e.g.
cd hedgedoc-react-client
) - Run
yarn install
- 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!