|
|
||
|---|---|---|
| .github | ||
| .idea | ||
| .netlify | ||
| .reuse | ||
| .yarn | ||
| cypress | ||
| docker | ||
| global-styles | ||
| LICENSES | ||
| locales | ||
| netlify | ||
| public | ||
| src | ||
| .dockerignore | ||
| .dockerignore.license | ||
| .editorconfig | ||
| .env.development | ||
| .env.development.license | ||
| .env.production | ||
| .env.production.license | ||
| .env.test | ||
| .env.test.license | ||
| .eslintrc.json | ||
| .eslintrc.json.license | ||
| .gitattributes | ||
| .gitignore | ||
| .mailmap | ||
| .mailmap.license | ||
| .nvmrc | ||
| .nvmrc.license | ||
| .prettierignore | ||
| .prettierignore.license | ||
| .prettierrc.json | ||
| .prettierrc.json.license | ||
| .yarnrc.yml | ||
| AUTHORS.md | ||
| CHANGELOG.md | ||
| CODE_OF_CONDUCT.md | ||
| CONTRIBUTING.md | ||
| cypress.config.ts | ||
| developer-certificate-of-origin.txt | ||
| developer-certificate-of-origin.txt.license | ||
| Dockerfile | ||
| jest.config.ts | ||
| LICENSE | ||
| netlify.toml | ||
| next-env.d.ts | ||
| next-env.d.ts.license | ||
| next.config.js | ||
| package.json | ||
| package.json.license | ||
| README.md | ||
| renovate.json | ||
| renovate.json.license | ||
| tsconfig.json | ||
| tsconfig.json.license | ||
| yarn.lock | ||
| yarn.lock.license | ||
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 need at least Node 14 (we recommend Node 18) and yarn. You MUST use yarn! There is no support for npm.
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 dev- 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 dev:testin dev test mode or build a test build withyarn build:testwhich you can serve withyarn serve:buildDon't use the regular start/build command, or the tests will fail! - Run
yarn cy:opento 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
.next/server/analyze/server.htmlin 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
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!
You can run the production build using the built-in server with yarn start.
You MUST provide the environment variable HD_EDITOR_BASE_URL with protocol, domain and (if needed) path (e.g. http://127.0.0.1:3001/) so the app knows under which URL it is available in the browser.
You can also provide HD_RENDERER_BASE_URL if the renderer should use another domain than the editor. This is recommended for security reasons but not mandatory.
UI Test
Curious about the new look and feel? We provide a demo of the new UI on hedgedoc.dev. This version uses mocked data and has no data persistence.
The UI test is hosted by netlify. Please check their privacy policy as well as ours.