mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2024-11-22 01:36:29 -05:00
docs: Restructure getting-started.md and add quick start for development
Signed-off-by: Yannick Bungers <git@innay.de> Signed-off-by: Philip Molares <philip.molares@udo.edu>
This commit is contained in:
parent
9f34b5ec24
commit
61e4e846b0
3 changed files with 103 additions and 68 deletions
|
@ -50,7 +50,7 @@ Google account and use it to login afterwards.
|
||||||
HedgeDoc is configured with two auth providers.
|
HedgeDoc is configured with two auth providers.
|
||||||
|
|
||||||
- A user logs in using auth provider A.
|
- A user logs in using auth provider A.
|
||||||
- The backend recieves the profile information from provider A and notices that the username in the profile
|
- The backend receives the profile information from provider A and notices that the username in the profile
|
||||||
already exists in the database, but no identity for this provider-username combination exists.
|
already exists in the database, but no identity for this provider-username combination exists.
|
||||||
- The backend creates a new user with another username to solve the username conflict.
|
- The backend creates a new user with another username to solve the username conflict.
|
||||||
- The frontend warns the user that the username provided by the auth provider is already taken and that another
|
- The frontend warns the user that the username provided by the auth provider is already taken and that another
|
||||||
|
|
|
@ -1,60 +1,133 @@
|
||||||
# Getting started
|
# Getting started
|
||||||
|
|
||||||
This document will help you with setting up the development environment for HedgeDoc 2.
|
To run HedgeDoc 2.0 you need three components: the backend, the frontend and the reverse proxy.
|
||||||
|
|
||||||
## Preparation
|
Backend and Frontend are included in the [HedgeDoc repo](https://github.com/hedgedoc/hedgedoc). The reverse proxy can be chosen by preference. For development, we
|
||||||
|
recommend caddy and the provided configuration.
|
||||||
|
|
||||||
### Preparing the directory
|
## Quick guide for development setup
|
||||||
|
|
||||||
|
This describes the easiest way to start a local development environment. For other deployments follow the description
|
||||||
|
below.
|
||||||
|
To run HedgeDoc 2.0 you need three components: the backend, the frontend and the reverse proxy.
|
||||||
|
|
||||||
|
Backend and Frontend are included in the [HegdeDoc repo](https://github.com/hedgedoc/hedgedoc). The reverse proxy can be chosen by preference. For development, we
|
||||||
|
recommend caddy and the provided configuration.
|
||||||
|
|
||||||
|
1. Install Node.js (at least Node 14, we recommend Node 18) and [Yarn](https://yarnpkg.com/getting-started/install)
|
||||||
|
2. Install Caddy (select one of the two options)
|
||||||
|
- [Download](https://caddyserver.com/) and place the `caddy` binary in `hedgedoc/dev-reverse-proxy`. Ensure it is executable with `chmod +x caddy`. Users of macOS may need to run `xattr -d com.apple.quarantine ./caddy` to lift the quarantine for executables from the internet.
|
||||||
|
- Install Caddy using your package manager
|
||||||
|
3. Clone [our repository](https://github.com/hedgedoc/hedgedoc.git) and go into its directory
|
||||||
|
```shell
|
||||||
|
git clone https://github.com/hedgedoc/hedgedoc.git
|
||||||
|
cd hedgedoc
|
||||||
|
```
|
||||||
|
4. Install the dependencies in repo root directory with `yarn install`
|
||||||
|
5. Go to `hedgedoc/commons` directory with `cd ../commons`
|
||||||
|
6. Build the commons package with `yarn build`
|
||||||
|
7. Goto `hedgedoc/backend` directory with `cd ../backend`
|
||||||
|
8. Create the `.env` config file by copying the example: `cp .env.example .env`
|
||||||
|
9. Add a value to `HD_SESSION_SECRET` in the .env file. This can be any string, which has to be a secure password for production but can be set to simple string for debug purpose.
|
||||||
|
10. Execute the following lines
|
||||||
|
```shell
|
||||||
|
echo "HD_AUTH_LOCAL_ENABLE_LOGIN=true" >> .env
|
||||||
|
echo "HD_AUTH_LOCAL_ENABLE_REGISTER=true" >> .env
|
||||||
|
```
|
||||||
|
11. Start the backend using `yarn start:dev`
|
||||||
|
12. Go to `hedgedoc/frontend` directory with `cd ../frontend`
|
||||||
|
13. Start the frontend using `yarn run dev:with-local-backend`
|
||||||
|
14. Go to `hedgedoc/dev-reverse-proxy` with `cd ../dev-reverse-proxy`
|
||||||
|
15. Start Caddy using `./caddy run` (if you've downloaded the binary manually) or `caddy run` (if you've installed Caddy using a package manager)
|
||||||
|
16. Use your browser to go to <http://localhost:8080>
|
||||||
|
|
||||||
|
## Preconditions
|
||||||
|
|
||||||
|
If you want to run HedgeDoc in dev mode some preconditions have to be met.
|
||||||
|
|
||||||
1. Make sure that NodeJS is installed. You need at least Node 14 (we recommend Node 18).
|
1. Make sure that NodeJS is installed. You need at least Node 14 (we recommend Node 18).
|
||||||
2. Make sure that [yarn](https://yarnpkg.com/) is installed.
|
2. Make sure that [Yarn](https://yarnpkg.com/) is installed.
|
||||||
3. Clone this repo (e.g. `git clone https://github.com/hedgedoc/hedgedoc.git hedgedoc`)
|
3. Clone this repo (e.g. `git clone https://github.com/hedgedoc/hedgedoc.git hedgedoc`)
|
||||||
4. Go into the cloned directory
|
4. Go into the cloned directory
|
||||||
|
|
||||||
### Installing the dependencies
|
## Installing the dependencies
|
||||||
|
|
||||||
Because we use yarn workspaces, yarn collects the dependencies of all packages automatically in one central top-level node_modules folder.
|
Because we use Yarn workspaces, Yarn collects the dependencies of all packages automatically in one central top-level
|
||||||
|
`node_modules` folder.
|
||||||
To install the dependencies execute `yarn install` at the top level of the cloned repository.
|
To install the dependencies execute `yarn install` at the top level of the cloned repository.
|
||||||
Execute this command ONLY there. There is no need to execute the install-command for every package.
|
Execute this command ONLY there. There is no need to execute the install-command for every package.
|
||||||
It's important to use [yarn](https://yarnpkg.com/). We don't support npm or any other package manager and using anything else than yarn won't work.
|
It's important to use [Yarn](https://yarnpkg.com/). We don't support `npm` or any other package manager and using anything
|
||||||
|
else than Yarn won't work.
|
||||||
|
|
||||||
### Compile the commons package
|
## Build the `commons` package
|
||||||
Some code is shared by backend and frontend. This code lives in the "common" package and needs to be compiled so frontend and backend can import it.
|
|
||||||
|
Some code is shared by backend and frontend. This code lives in the `commons package and needs to be built so
|
||||||
|
frontend and backend can import it.
|
||||||
This only needs to be done once, except if you've changed code in the commons package.
|
This only needs to be done once, except if you've changed code in the commons package.
|
||||||
|
|
||||||
1. Go into the `commons` directory.
|
1. Go into the `commons` directory.
|
||||||
2. Execute `yarn build` to build the commons package.
|
2. Execute `yarn build` to build the commons package.
|
||||||
|
|
||||||
## Setting up the backend
|
## Setting up the Backend
|
||||||
|
|
||||||
|
**Note:** The backend can be mocked instead of starting it for real. This is useful, if you just want to work on the frontend. See the "Mocked backend" section below.
|
||||||
|
|
||||||
1. Go into the `backend` directory.
|
1. Go into the `backend` directory.
|
||||||
2. Create an environment file. We recommend to use the example file by running `cp .env.example .env`
|
2. Create an environment file. We recommend to use the example file by running `cp .env.example .env`
|
||||||
You can modify this file according to the [configuration documentation](../config/index.md).
|
You can modify this file according to the [configuration documentation](../config/index.md).
|
||||||
3. Make sure that you've set `HD_SESSION_SECRET` in your `.env` file. Otherwise, the backend won't start.
|
3. Make sure that you've set `HD_SESSION_SECRET` in your `.env` file. Otherwise, the backend won't start.
|
||||||
> In dev mode you don't need a secure secret. So use any value. If you want to generate a secure session secret you can generate one using e.g. `openssl rand -hex 16 | sed -E 's/(.*)/HD_SESSION_SECRET=\1/' >> .env`.
|
> In dev mode you don't need a secure secret. So use any value. If you want to generate a secure session secret you
|
||||||
|
can use e.g. `openssl rand -hex 16 | sed -E 's/(.*)/HD_SESSION_SECRET=\1/' >> .env`.
|
||||||
|
4. Make sure that `HD_DOMAIN` in `.env` is set to the domain where Hedgedoc should be available. In local dev
|
||||||
|
environment this is most likely `http://localhost:8080`.
|
||||||
|
5. Start the backend by running `yarn start:dev` for dev mode or `yarn start` for production.
|
||||||
|
|
||||||
## Setting up the frontend
|
## Setting up the frontend
|
||||||
|
|
||||||
The instructions for the frontend can be found [here](./setup/frontend.md).
|
The frontend can be run in four different ways. The development mode compiles everything on demand. So the first time
|
||||||
|
you open a page in the browser it may take some time.
|
||||||
|
See [here](setup/frontend.md) for a more detailed description of the environment variables for the frontend.
|
||||||
|
|
||||||
|
### Mocked backend
|
||||||
|
|
||||||
|
To start the development mode, run `yarn run dev`.
|
||||||
|
By default, this will run in mock-mode, meaning instead of running a real backend the frontend mocks the backend.
|
||||||
|
This way you can work on frontend functionality without starting up the full development environment.
|
||||||
|
The app should run now and be available under [http://localhost:3001](http://localhost:3001) in your browser.
|
||||||
|
In development mode the app will autoload changes you make to the code.
|
||||||
|
|
||||||
|
### With local backend
|
||||||
|
|
||||||
|
To start the development mode with an actual HedgeDoc backend use `yarn run dev:with-local-backend` instead.
|
||||||
|
This task will automatically set `HD_EDITOR_BASE_URL` to `http://localhost:8080`.
|
||||||
|
|
||||||
|
### Production mode
|
||||||
|
|
||||||
|
Use `yarn build` to build the app in production mode and save it into the `.next` folder. The production build is
|
||||||
|
minimized and optimized for best performance. Don't edit the generated files in the `.next` folder in any way!
|
||||||
|
|
||||||
|
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) subdirectory path (
|
||||||
|
e.g. `http://localhost:3001/`) so the app knows under which URL the frontend is available in the browser.
|
||||||
|
|
||||||
|
If you use the production build then make sure that you set the environment variable `HD_EDITOR_BASE_URL` to the same
|
||||||
|
value as `HD_DOMAIN` in the backend.
|
||||||
|
|
||||||
|
### Production mock build
|
||||||
|
|
||||||
|
It is also possible to create a production build that uses the emulated backend by using `yarn build:mock`. This is
|
||||||
|
usually not needed except for demonstration purposes like `https://hedgedoc.dev`.
|
||||||
|
|
||||||
## Running backend and frontend together
|
## Running backend and frontend together
|
||||||
|
|
||||||
To use backend and frontend together in development mode you'll need a local reverse proxy that combines both services under one URL origin.
|
To use backend and frontend together in development mode you'll need a local reverse proxy that combines both services
|
||||||
We recommend to use our pre-configured [caddy](https://caddyserver.com/) configuration.
|
under one URL origin.
|
||||||
|
We recommend to use our pre-configured [Caddy](https://caddyserver.com/) configuration.
|
||||||
### Prepare the backend
|
|
||||||
|
|
||||||
In the `backend` directory
|
|
||||||
1. make sure that `HD_DOMAIN` in `.env` is set to `http://localhost:8080`.
|
|
||||||
2. start the backend by running `yarn start:dev`.
|
|
||||||
|
|
||||||
### Preparing the frontend
|
|
||||||
|
|
||||||
In the frontend directory
|
|
||||||
1. Start the frontend in dev or production mode using any method described in the [frontend setup documentation](./setup/frontend.md).
|
|
||||||
If you use the production build then make sure that you set the environment variable `HD_EDITOR_BASE_URL` to the same value as `HD_DOMAIN` in the backend.
|
|
||||||
|
|
||||||
### Running the reverse proxy
|
### Running the reverse proxy
|
||||||
|
|
||||||
1. Download the latest version of caddy from [the caddy website](https://caddyserver.com/). You don't need any plugin. Place the downloaded binary in the directory `dev-reverse-proxy`. Don't forget to mark the file as executable using `chmod +x caddy`
|
1. Download the latest version of Caddy from [the Caddy website](https://caddyserver.com/) or alternatively install it
|
||||||
2. Start the reverse proxy using `./caddy run`.
|
using your package manager. You don't need any plugin. Place the downloaded binary in the
|
||||||
|
directory `dev-reverse-proxy`. Don't forget to mark the file as executable using `chmod +x caddy`. Users of macOS may need to run `xattr -d com.apple.quarantine ./caddy` to lift the quarantine for executables from the internet.
|
||||||
|
2. Start Caddy using `./caddy run` (if you downloaded the binary manually) or `caddy run` (if you installed Caddy via a package manager).
|
||||||
3. Open your browser on http://localhost:8080
|
3. Open your browser on http://localhost:8080
|
||||||
|
|
|
@ -4,44 +4,6 @@ SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
|
||||||
SPDX-License-Identifier: CC-BY-SA-4.0
|
SPDX-License-Identifier: CC-BY-SA-4.0
|
||||||
-->
|
-->
|
||||||
|
|
||||||
# Setting up the frontend
|
|
||||||
|
|
||||||
Follow the preparation instructions in [getting started](../getting-started.md)
|
|
||||||
|
|
||||||
## Development mode
|
|
||||||
|
|
||||||
### Mocked Backend Mode
|
|
||||||
|
|
||||||
To start the development mode run `yarn run dev`. If not configured otherwise the development mode will run in mock-mode
|
|
||||||
which
|
|
||||||
emulates a HedgeDoc backend.
|
|
||||||
The app should run now and be available under [http://localhost:3001](http://localhost:3001) in your browser.
|
|
||||||
In development mode the app will autoload changes you make to the code.
|
|
||||||
|
|
||||||
### With local backend
|
|
||||||
|
|
||||||
To start the development mode with an actual HedgeDoc backend use `yarn run dev:with-local-backend` instead.
|
|
||||||
This task will automatically set `HD_EDITOR_BASE_URL` to `http://localhost:8080`.
|
|
||||||
|
|
||||||
### Performance
|
|
||||||
|
|
||||||
The development mode compiles everything on demand. So the first time you open a page in the browser it may take some
|
|
||||||
time.
|
|
||||||
|
|
||||||
## Production mode
|
|
||||||
|
|
||||||
Use `yarn build` to build the app in production mode and save it into the `.next` folder. The production build is
|
|
||||||
minimized
|
|
||||||
and optimized for best performance. Don't edit the generated files in the `.next` folder 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) subdirectory path (
|
|
||||||
e.g. `http://localhost:3001/`) so the app knows under which URL the frontend is available in the browser.
|
|
||||||
|
|
||||||
### Production mock build
|
|
||||||
|
|
||||||
It is also possible to create a production build that uses the emulated backend by using `yarn build:mock`. This is
|
|
||||||
usually not needed except for demonstration purposes like `https://hedgedoc.dev`.
|
|
||||||
|
|
||||||
## Environment Variables
|
## Environment Variables
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue