fix: one-command dev & web env files (#1214)

- fixes `pnpm dev`
- fixes `just setup`
- Prevents env pollution in nuxt dev/build

api/justfile

@@ -4,10 +4,6 @@ default:
     @just --list --justfile {{justfile()}} --list-heading $'\nAPI project recipes:\n'
     @just list-commands
 
-setup:
-    pnpm install
-    pnpm run container:build
-
 # builds js files that can run on an unraid server
 @build:
     pnpm run build

api/package.json

@@ -17,11 +17,13 @@
         "start": "node dist/main.js",
         "dev": "vite",
         "command": "pnpm run build && clear && ./dist/cli.js",
-        "// Build": "",
+        "// Build and Deploy": "",
         "build": "vite build --mode=production",
         "postbuild": "chmod +x dist/main.js && chmod +x dist/cli.js",
         "build:docker": "./scripts/dc.sh run --rm builder",
         "build-and-pack": "tsx ./scripts/build.ts",
+        "preunraid:deploy": "pnpm build",
+        "unraid:deploy": "./scripts/deploy-dev.sh",
         "// GraphQL Codegen": "",
         "codegen": "MOTHERSHIP_GRAPHQL_LINK='https://staging.mothership.unraid.net/ws' graphql-codegen --config codegen.ts -r dotenv/config './.env.staging'",
         "codegen:watch": "DOTENV_CONFIG_PATH='./.env.staging' graphql-codegen --config codegen.ts --watch -r dotenv/config",

justfile

@@ -12,9 +12,9 @@ setup:
     @just ignore .vscode/settings.json api/.vscode/settings.json web/.vscode/settings.json
     # ignore api local-state files
     @just ignore api/dev/states/myservers.cfg api/dev/Unraid.net/myservers.cfg
-
-    just api/setup
-    just web/setup
+    
+    pnpm install
+    just unraid-ui/setup
 
 # restore notification files under api/dev
 restore-notifications:

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build": "pnpm -r build",
     "dev": "pnpm -r dev",
+    "unraid:deploy": "pnpm -r unraid:deploy",
     "test": "pnpm -r test",
     "lint": "pnpm -r lint",
     "lint:fix": "pnpm -r lint:fix",

readme.md

@@ -96,6 +96,7 @@ Make sure the following software is installed before proceeding.
 * Docker (for macOS folks, Orbstack works too)
 * [Node.js (v20)][Node-url]
 * [Just](https://github.com/casey/just)
+* libvirt (macOS folks can run `brew install libvirt`)
 * An [Unraid][Unraid-url] server for development
 
 Next, create an SSH key if you haven't already.
@@ -123,26 +124,27 @@ Once you have your key pair, add your public SSH key to your Unraid server:
    ```
 
    This will run installation scripts, container builds, and some git scripts to reduce noise (i.e. personal editor customizations, etc).
-3. Run the API container
+
+   Alternatively, run `pnpm install` for a lighter, less opinionated setup.
+3. Run dev servers
 
    ```sh
-   cd api
-   npm run container:start
+   pnpm dev
    ```
 
-4. This should bring you inside the API container. There, run the following command to start the server:
+   This will run every dev server in the monorepo. By default, this means:
+
+   * The unraid-api will be available at localhost:3001
+   * The dev server for "rich" web components (like the User Profile Component) will be at localhost:4321 -- Note that shipping to unraid is preferred, as the dev environment is significantly different.
+   * The vite server for unraid-ui development will be at localhost:5173
+
+4. Test on Unraid
 
    ```js
-   npm run dev
+   pnpm unraid:deploy <SERVER_IP>
    ```
 
-5. In another terminal, open the project and navigate to the web directory. Then, run the dev server:
-
-   ```sh
-   cd web
-   npm install # just in case
-   npm run dev
-   ```
+   This will ship a staging build of unraid-api, unraid-ui, and unraid-components to an Unraid server located at `<SERVER_IP>`.
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 

unraid-ui/justfile

@@ -5,7 +5,6 @@ list-commands:
 
 # Prepares the repo for development
 setup:
-    pnpm install
     pnpm run build
 
 clean:

unraid-ui/package.json

@@ -13,16 +13,22 @@
     "tailwind.config.ts"
   ],
   "scripts": {
+    "// Development": "",
     "dev": "vite",
-    "build": "vite build",
-    "build:wc": "REM_PLUGIN=true vite build -c vite.web-component.ts --mode production",
     "preview": "vite preview",
     "test": "vitest",
     "test:ui": "vitest --ui",
     "coverage": "vitest run --coverage",
-    "clean": "rm -rf dist",
+    "// Build": "",
     "prebuild": "npm run clean",
+    "build": "vite build",
+    "build:wc": "REM_PLUGIN=true vite build -c vite.web-component.ts --mode production",
+    "clean": "rm -rf dist",
     "typecheck": "vue-tsc --noEmit",
+    "// Deploy to Unraid Server": "",
+    "preunraid:deploy": "pnpm build:wc",
+    "unraid:deploy": "just deploy",
+    "// Storybook": "",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },

web/.env.production

@@ -0,0 +1,6 @@
+VITE_ACCOUNT=https://account.unraid.net
+VITE_CONNECT=https://connect.myunraid.net
+VITE_UNRAID_NET=https://unraid.net
+VITE_CALLBACK_KEY=Uyv2o8e*FiQe8VeLekTqyX6Z*8XonB
+# Keep console logs until components are stabilized
+VITE_ALLOW_CONSOLE_LOGS=true

web/.gitignore

@@ -1 +1,2 @@
-!.env.staging
+!.env.staging
+!.env.production

web/justfile

@@ -4,11 +4,6 @@ default:
     @just --list --justfile {{justfile()}} --list-heading $'\nWeb project recipes:\n'
     @just list-commands
 
-setup:
-    just ../unraid-ui/setup
-    cp .env.example .env
-    npm install
-
 clean:
     rm -rf .nuxt
     rm -rf node_modules

web/package.json

@@ -5,16 +5,19 @@
   "license": "GPL-2.0-only",
   "scripts": {
     "// Development": "",
-    "dev": "[ -f .env ] && nuxt dev --dotenv .env || nuxt dev --dotenv .env.staging",
+    "predev": "pnpm --filter=@unraid/ui build",
+    "dev": "nuxt dev --dotenv .env.example",
     "preview": "nuxt preview",
     "serve": "NODE_ENV=production PORT=${PORT:-4321} node .output/server/index.mjs",
     "// Build": "",
+    "prebuild:dev": "pnpm predev",
     "build:dev": "nuxi build --dotenv .env.staging && pnpm run manifest-ts && pnpm run deploy-to-unraid:dev",
     "build:webgui": "pnpm run type-check && nuxi build --dotenv .env.production && pnpm run manifest-ts && pnpm run copy-to-webgui-repo",
     "build": "NODE_ENV=production nuxi build --dotenv .env.production && pnpm run manifest-ts",
     "generate": "nuxt generate",
     "manifest-ts": "node ./scripts/add-timestamp-webcomponent-manifest.js",
     "// Deployment": "",
+    "unraid:deploy": "pnpm build:dev",
     "deploy-to-unraid:dev": "./scripts/deploy-dev.sh",
     "copy-to-webgui-repo": "./scripts/copy-to-webgui-repo.sh",
     "// Code Quality": "",