Updating devcontainer setup and related documentation

readme.md

@@ -185,8 +185,99 @@ subdomain.domain.com {
 
 # Run from source
 
-[See discussion](https://github.com/advplyr/audiobookshelf/discussions/259#discussioncomment-1869729)
+# Contributing
 
-# Contributing / How to Support
+This application is built using [NodeJs](https://nodejs.org/).
+
+### Dev Container Setup
+The easiest way to begin developing this project is to use a dev container. An introduction to dev containers in VSCode can be found [here](https://code.visualstudio.com/docs/devcontainers/containers).
+
+Required Software:
+* [Docker Desktop](https://www.docker.com/products/docker-desktop/)
+* [VSCode](https://code.visualstudio.com/download)
+
+*Note, it is possible to use other container software than Docker and IDEs other than VSCode. However, this setup is more complicated and not covered here.*
+
+<div>
+<details>
+<summary>Install the required software on Windows with <a href=(https://docs.microsoft.com/en-us/windows/package-manager/winget/#production-recommended)>winget</a></summary>
+
+<p>
+Note: This requires a PowerShell prompt with winget installed.  You should be able to copy and paste the code block to install.  If you use an elevated PowerShell prompt, UAC will not pop up during the installs.
+
+```PowerShell
+winget install -e --id Docker.DockerDesktop; `
+winget install -e --id Microsoft.VisualStudioCode
+```
+
+</p>
+</details>
+</div>
+
+<div>
+<details>
+<summary>Install the required software on MacOS with <a href=(https://snapcraft.io/)>homebrew</a></summary>
+
+<p>
+
+```sh
+brew install --cask docker visual-studio-code
+```
+
+</p>
+</details>
+</div>
+
+<div style="padding-bottom: 1em">
+<details>
+<summary>Install the required software on Linux with <a href=(https://brew.sh/)>snap</a></summary>
+
+<p>
+
+```sh
+sudo snap install docker; \
+sudo snap install code --classic
+```
+
+</p>
+</details>
+</div>
+
+After installing these packages, you can now install the [Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) extension for VSCode. After installing this extension open the command pallet (`ctrl+shift+p` or `cmd+shift+p`) and select the command `>Dev Containers: Rebuild and Reopen in Container`. This will cause the development environment container to be built and launched.
+
+You are now ready to start development!
+
+### Manual Environment Setup
+
+If you don't want to use the dev container, you can still develop this project. First, you will need to install [NodeJs](https://nodejs.org/) (version 16) and [FFmpeg](https://ffmpeg.org/).
+
+Next you will need to create a `dev.js` file in the project's root directory. This contains configuration information and paths unique to your development environment. You can find an example of this file in `.devcontainer/dev.js`.
+
+You are now ready to build the client:
+
+```sh
+npm ci
+cd client
+npm ci
+npm run generate
+cd ..
+```
+
+### Development Commands
+
+After setting up your development environment, either using the dev container or using your own custom environment, the following commands will help you run the server and client.
+
+To run the server, you can use the command `npm run dev`. This will use the client that was built when you ran `npm run generate` in the client directory or when you started the dev container. If you make changes to the server, you will need to restart the server. If you make changes to the client, you will need to run the command `(cd client; npm run generate)` and then restart the server. By default the client runs at `localhost:3333`, though the port can be configured in `dev.js`.
+
+You can also build a version of the client that supports live reloading. To do this, start the server, then run the command `(cd client; npm run dev)`. This will run a separate instance of the client at `localhost:3000` that will be automatically updated as you make changes to the client.
+
+If you are using VSCode, this project includes a couple of pre-defined targets to speed up this process. First, if you build the project (`ctrl+shift+b` or `cmd+shift+b`) it will automatically generate the client. Next, there are debug commands for running the server and client. You can view these targets using the debug panel (bring it up with (`ctrl+shift+d` or `cmd+shift+d`):
+
+* `Debug server`—Run the server.
+* `Debug client (nuxt)`—Run the client with live reload.
+* `Debug server and client (nuxt)`—Runs both the preceding two debug targets.
+
+
+# How to Support
 
 [See the incomplete "How to Support" page](https://www.audiobookshelf.org/support)