From 6dc4dc8f4926788a4dbff1f1e42e131993e02887 Mon Sep 17 00:00:00 2001 From: Scott Ruoti Date: Mon, 19 Dec 2022 10:07:40 -0500 Subject: [PATCH] Updating devcontainer setup and related documentation --- .devcontainer/Dockerfile | 17 ++++-- .devcontainer/dev.js | 9 ++++ .devcontainer/devcontainer.json | 46 ++++++++++++---- .devcontainer/post-create.sh | 29 ++++++++++ .gitattributes | 5 ++ .gitignore | 4 +- .vscode/launch.json | 44 +++++++++++++++ .vscode/tasks.json | 40 ++++++++++++++ readme.md | 95 ++++++++++++++++++++++++++++++++- 9 files changed, 273 insertions(+), 16 deletions(-) create mode 100644 .devcontainer/dev.js create mode 100644 .devcontainer/post-create.sh create mode 100644 .gitattributes create mode 100644 .vscode/launch.json create mode 100644 .vscode/tasks.json diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile index 7d2cae50..766273e7 100644 --- a/.devcontainer/Dockerfile +++ b/.devcontainer/Dockerfile @@ -1,4 +1,15 @@ -FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:16 -RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ - && apt-get install ffmpeg gnupg2 -y +# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster +ARG VARIANT=16 +FROM mcr.microsoft.com/devcontainers/javascript-node:0-${VARIANT} as base + +# Setup the node environment ENV NODE_ENV=development + +# Install additional OS packages. +RUN apt-get update && \ + DEBIAN_FRONTEND=noninteractive apt-get -y install --no-install-recommends \ + curl tzdata ffmpeg && \ + rm -rf /var/lib/apt/lists/* + +# Move tone executable to appropriate directory +COPY --from=sandreas/tone:v0.1.2 /usr/local/bin/tone /usr/local/bin/ diff --git a/.devcontainer/dev.js b/.devcontainer/dev.js new file mode 100644 index 00000000..0d113a3e --- /dev/null +++ b/.devcontainer/dev.js @@ -0,0 +1,9 @@ +// Using port 3333 is important when running the client web app separately +const Path = require('path') +module.exports.config = { + Port: 3333, + ConfigPath: Path.resolve('config'), + MetadataPath: Path.resolve('metadata'), + FFmpegPath: '/usr/bin/ffmpeg', + FFProbePath: '/usr/bin/ffprobe' +} \ No newline at end of file diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 61ee8e9c..1341b2c8 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,12 +1,40 @@ +// For format details, see https://aka.ms/devcontainer.json. For config options, see the +// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node { - "build": { "dockerfile": "Dockerfile" }, - "mounts": [ - "source=abs-node-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume" - ], - "features": { - "fish": "latest" + "name": "Audiobookshelf", + "build": { + "dockerfile": "Dockerfile", + // Update 'VARIANT' to pick a Node version: 18, 16, 14. + // Append -bullseye or -buster to pin to an OS version. + // Use -bullseye variants on local arm64/Apple Silicon. + "args": { + "VARIANT": "16" + } }, - "extensions": [ - "eamodio.gitlens" - ] + "mounts": [ + "source=abs-server-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume", + "source=abs-client-node_modules,target=${containerWorkspaceFolder}/client/node_modules,type=volume" + ], + // Features to add to the dev container. More info: https://containers.dev/features. + // "features": {}, + // Use 'forwardPorts' to make a list of ports inside the container available locally. + "forwardPorts": [ + 3000, + 3333 + ], + // Use 'postCreateCommand' to run commands after the container is created. + "postCreateCommand": "sh .devcontainer/post-create.sh", + // Configure tool-specific properties. + "customizations": { + // Configure properties specific to VS Code. + "vscode": { + // Add the IDs of extensions you want installed when the container is created. + "extensions": [ + "dbaeumer.vscode-eslint", + "octref.vetur" + ] + } + } + // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. + // "remoteUser": "root" } \ No newline at end of file diff --git a/.devcontainer/post-create.sh b/.devcontainer/post-create.sh new file mode 100644 index 00000000..bd1e3873 --- /dev/null +++ b/.devcontainer/post-create.sh @@ -0,0 +1,29 @@ +#!/bin/sh + +# Mark the working directory as safe for use with git +git config --global --add safe.directory $PWD + +# If there is no dev.js file, create it +if [ ! -f dev.js ]; then + cp .devcontainer/dev.js . +fi + +# Update permissions for node_modules folders +# https://code.visualstudio.com/remote/advancedcontainers/improve-performance#_use-a-targeted-named-volume +if [ -d node_modules ]; then + sudo chown $(id -u):$(id -g) node_modules +fi + +if [ -d client/node_modules ]; then + sudo chown $(id -u):$(id -g) client/node_modules +fi + +# Install packages for the server +if [ -f package.json ]; then + npm ci +fi + +# Install packages and build the client +if [ -f client/package.json ]; then + (cd client; npm ci; npm run generate) +fi diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 00000000..fe61167a --- /dev/null +++ b/.gitattributes @@ -0,0 +1,5 @@ +# Set the default behavior, in case people don't have core.autocrlf set. +* text=auto + +# Declare files that will always have CRLF line endings on checkout. +.devcontainer/post-create.sh text eol=lf diff --git a/.gitignore b/.gitignore index 8df68f62..25a8a774 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,6 @@ .env -dev.js -node_modules/ +/dev.js +**/node_modules/ /config/ /audiobooks/ /audiobooks2/ diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..20706b26 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,44 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "node", + "request": "launch", + "name": "Debug server", + "runtimeExecutable": "npm", + "args": [ + "run", + "dev" + ], + "skipFiles": [ + "/**" + ] + }, + { + "type": "node", + "request": "launch", + "name": "Debug client (nuxt)", + "runtimeExecutable": "npm", + "args": [ + "run", + "dev" + ], + "cwd": "${workspaceFolder}/client", + "skipFiles": [ + "${workspaceFolder}//**" + ] + } + ], + "compounds": [ + { + "name": "Debug server and client (nuxt)", + "configurations": [ + "Debug server", + "Debug client (nuxt)" + ] + } + ] +} \ No newline at end of file diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 00000000..e041741f --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,40 @@ +{ + "version": "2.0.0", + "tasks": [ + { + "path": "client", + "type": "npm", + "script": "generate", + "detail": "nuxt generate", + "label": "Build client", + "group": { + "kind": "build", + "isDefault": true + } + }, + { + "dependsOn": [ + "Build client" + ], + "type": "npm", + "script": "dev", + "detail": "nodemon --watch server index.js", + "label": "Run server", + "group": { + "kind": "test", + "isDefault": true + } + }, + { + "path": "client", + "type": "npm", + "script": "dev", + "detail": "nuxt", + "label": "Run Live-reload client", + "group": { + "kind": "test", + "isDefault": false + } + } + ] +} \ No newline at end of file diff --git a/readme.md b/readme.md index ef4ecf5c..a3508126 100644 --- a/readme.md +++ b/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.* + +
+
+Install the required software on Windows with winget + +

+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 +``` + +

+
+
+ +
+
+Install the required software on MacOS with homebrew + +

+ +```sh +brew install --cask docker visual-studio-code +``` + +

+
+
+ +
+
+Install the required software on Linux with snap + +

+ +```sh +sudo snap install docker; \ +sudo snap install code --classic +``` + +

+
+
+ +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)