Merge pull request #1795 from Chasethechicken/docs/dev-getting-started

docs/content/dev/2.0.md

@@ -23,12 +23,6 @@ The software provides two special groups which have no explicit users:
 - The owner of a note may delete all revisions. This effectively purges the edit
   history of a note.
 
-## Dev Setup
-- Clone backend and frontend in two folders.
-- Run `yarn install` in both projects
-- Start the backend server in watch mode using `yarn start:dev`. The backend is then accessible on port 3000.
-- Start the frontend dev server using `yarn start`. The frontend is now accessible on port 3001. 
-
 ## Entity `create` methods
 
 Because we need to have empty constructors in our entity classes for TypeORM to work, the actual constructor is a separate `create` method. These methods should adhere to these guidelines:

docs/content/dev/getting-started.md

@@ -0,0 +1,47 @@
+# Getting started
+
+## Preparing for running the backend code
+
+**ToDo:** Document how to setup development environment using docker.
+
+1. Clone the repository with `git clone https://github.com/hedgedoc/hedgedoc.git`
+   (cloning is the preferred way, but you can also download and unzip a release)
+
+2. Enter the directory and run `yarn install`.
+
+3. Run `cp .env.example .env` to use the example configuration.
+
+   Alternatively, set up a [.env](../config/index.md) or set up
+   [environment variables](../config/index.md) yourself.
+   
+4. Run `openssl rand -hex 16 | sed -E 's/(.*)/HD_SESSION_SECRET=\1/' >> .env` to generate a session secret if you have not set one manually before.
+ 
+## Preparing for running the frontend code
+
+**ToDo:** Document how to setup development environment using docker.
+
+1. Clone the repository with `git clone https://github.com/hedgedoc/react-client.git`
+   (cloning is the preferred way, but you can also download and unzip a release)
+
+2. Enter the directory and run `yarn install`.
+
+## Running Hedgedoc with auto-reload
+
+We will run Hedgedoc in development mode, which means the backend and frontend will automatically rebuild or restart when you make changes.
+
+The commands will stay active in your terminal, so you will need multiple tabs
+to run both at the same time.
+
+1. Enter the `react-frontend` directory and use `yarn start:for-real-backend` if you want webpack to continuously rebuild the frontend code. The frontend will expect a running backend at port 3000.
+   
+   **Note:** You can run `yarn start` to start a frontend with an integrated, mocked API. This may support more features than the real backend.
+
+2. To start the server in auto-reload mode, enter the `hedgedoc` directory and run `env NODE_ENV=development yarn start:dev`.
+
+## Testing
+
+- After starting both frontend and backend, Hedgedoc will be available at `http://localhost:3000`.
+
+**Note:** If you only started the frontend, it will be available at `http://localhost:3001`.
+
+**Note:** If you want to use Hedgedoc with the real backend, point your browser at `http://localhost:3000`, as the backend proxies requests to the frontend and you'll get CORS errors if you try to use the frontend directly.