Use .env file for environment variable setup#45
Use .env file for environment variable setup#45bhousel wants to merge 2 commits intoTaskarCenterAtUW:masterfrom
Conversation
📝 WalkthroughWalkthroughThe pull request adds a configuration template file (.env.example) for development environment variables, updates documentation to simplify the setup process with environment file-based configuration, and enables the Nitro development proxy feature in Nuxt configuration. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment Tip CodeRabbit can use Trivy to scan for security misconfigurations and secrets in Infrastructure as Code files.Add a .trivyignore file to your project to customize which findings Trivy reports. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.env.example:
- Around line 18-27: Add the missing VITE_NEW_API_URL entry to the example env
file so the app doesn't start with an undefined base URL: update .env.example to
include a commented example value for VITE_NEW_API_URL (e.g.
VITE_NEW_API_URL=https://api.example.com/) and a short comment matching the
style used for VITE_API_URL/VITE_OSM_URL; this ensures
import.meta.env.VITE_NEW_API_URL used in services/index.ts and the value passed
into WorkspacesClient in services/workspaces.ts is defined for new setups.
- Around line 20-22: The comment is inconsistent: it tells users to edit
nuxt.config.ts devProxy settings but then shows direct localhost URLs
(VITE_API_URL and VITE_OSM_URL). Update the .env.example text to present two
clear, consistent options: (1) proxy mode—explain to set devProxy in
nuxt.config.ts and use proxied base paths (e.g., keep VITE_API_URL and
VITE_OSM_URL pointing at the frontend host or relative paths), and (2)
direct-backend mode—show explicit localhost:PORT values and note to match the
backend port; mention which env variables to change (VITE_API_URL, VITE_OSM_URL)
and reference devProxy in nuxt.config.ts so readers know to choose one mode and
configure ports accordingly.
In `@README.md`:
- Line 23: Update the troubleshooting sentence in README.md to use hyphenated
wording by replacing "double check" with "double-check" so the line reads "If
you run `npm run dev` and nothing happens, double-check your `.env` file." This
targets the exact user-facing troubleshooting sentence in the README.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: eb3a3a05-d567-48ea-812b-e9196e4578a3
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
.env.exampleREADME.mdnuxt.config.ts
| # --- Workspaces Backend ------------------------------------------------------ | ||
| # The workspaces-backend service, see: https://github.com/TaskarCenterAtUW/workspaces-backend | ||
| # If running locally, edit `nuxt.config.ts` devProxy settings and use local port: | ||
| # VITE_API_URL=http://localhost:3000/api/v1/ | ||
| # VITE_OSM_URL=http://localhost:3000/ | ||
|
|
||
| # Or point at the shared dev instance if you don't need to run it locally. | ||
| VITE_API_URL=https://api.workspaces-dev.sidewalks.washington.edu/api/v1/ | ||
| VITE_OSM_URL=https://osm.workspaces-dev.sidewalks.washington.edu/ | ||
|
|
There was a problem hiding this comment.
Add missing required env key: VITE_NEW_API_URL.
services/index.ts (Lines 16-23) reads import.meta.env.VITE_NEW_API_URL and services/workspaces.ts (Lines 36-49) passes it into WorkspacesClient. It’s currently missing from .env.example, so new setups can start with an undefined API base URL.
Proposed fix
# Or point at the shared dev instance if you don't need to run it locally.
VITE_API_URL=https://api.workspaces-dev.sidewalks.washington.edu/api/v1/
+VITE_NEW_API_URL=https://api.workspaces-dev.sidewalks.washington.edu/api/v1/
VITE_OSM_URL=https://osm.workspaces-dev.sidewalks.washington.edu/🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.env.example around lines 18 - 27, Add the missing VITE_NEW_API_URL entry to
the example env file so the app doesn't start with an undefined base URL: update
.env.example to include a commented example value for VITE_NEW_API_URL (e.g.
VITE_NEW_API_URL=https://api.example.com/) and a short comment matching the
style used for VITE_API_URL/VITE_OSM_URL; this ensures
import.meta.env.VITE_NEW_API_URL used in services/index.ts and the value passed
into WorkspacesClient in services/workspaces.ts is defined for new setups.
| # If running locally, edit `nuxt.config.ts` devProxy settings and use local port: | ||
| # VITE_API_URL=http://localhost:3000/api/v1/ | ||
| # VITE_OSM_URL=http://localhost:3000/ |
There was a problem hiding this comment.
Local-backend instructions are inconsistent with the proxy guidance.
Line 20 says to edit nuxt.config.ts proxy settings, but the sample values then point directly to localhost:3000. This is confusing for setup and can route traffic incorrectly depending on local ports.
Proposed clarification
-# If running locally, edit `nuxt.config.ts` devProxy settings and use local port:
-# VITE_API_URL=http://localhost:3000/api/v1/
-# VITE_OSM_URL=http://localhost:3000/
+# If running backend locally, point `nuxt.config.ts` devProxy at your backend
+# (example there uses localhost:8000), and keep frontend URLs proxy-relative:
+# VITE_API_URL=/api/v1/
+# VITE_OSM_URL=/workspaces/📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| # If running locally, edit `nuxt.config.ts` devProxy settings and use local port: | |
| # VITE_API_URL=http://localhost:3000/api/v1/ | |
| # VITE_OSM_URL=http://localhost:3000/ | |
| # If running backend locally, point `nuxt.config.ts` devProxy at your backend | |
| # (example there uses localhost:8000), and keep frontend URLs proxy-relative: | |
| # VITE_API_URL=/api/v1/ | |
| # VITE_OSM_URL=/workspaces/ |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.env.example around lines 20 - 22, The comment is inconsistent: it tells
users to edit nuxt.config.ts devProxy settings but then shows direct localhost
URLs (VITE_API_URL and VITE_OSM_URL). Update the .env.example text to present
two clear, consistent options: (1) proxy mode—explain to set devProxy in
nuxt.config.ts and use proxied base paths (e.g., keep VITE_API_URL and
VITE_OSM_URL pointing at the frontend host or relative paths), and (2)
direct-backend mode—show explicit localhost:PORT values and note to match the
backend port; mention which env variables to change (VITE_API_URL, VITE_OSM_URL)
and reference devProxy in nuxt.config.ts so readers know to choose one mode and
configure ports accordingly.
| ## Troubleshooting | ||
|
|
||
| If you run ```npm run dev``` and nothing happens, check that you've set your "exports" as above. Undefined environment variables are not handled gracefully right now. No newline at end of file | ||
| If you run `npm run dev` and nothing happens, double check your `.env` file. |
There was a problem hiding this comment.
Use hyphenated wording in troubleshooting text.
Use “double-check” for correct phrasing in user-facing docs.
Proposed fix
-If you run `npm run dev` and nothing happens, double check your `.env` file.
+If you run `npm run dev` and nothing happens, double-check your `.env` file.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| If you run `npm run dev` and nothing happens, double check your `.env` file. | |
| If you run `npm run dev` and nothing happens, double-check your `.env` file. |
🧰 Tools
🪛 LanguageTool
[grammar] ~23-~23: Use a hyphen to join words.
Context: ...npm run devand nothing happens, double check your.env` file. Undefined enviro...
(QB_NEW_EN_HYPHEN)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@README.md` at line 23, Update the troubleshooting sentence in README.md to
use hyphenated wording by replacing "double check" with "double-check" so the
line reads "If you run `npm run dev` and nothing happens, double-check your
`.env` file." This targets the exact user-facing troubleshooting sentence in the
README.
1 participant
Nuxt reads
.envfiles automatically and it's.gitignored, so this makes setup a little easier.Changes Summary
New Files:
.env.example– Added template file for local development environment configuration. Includes example values for Nuxt/Vite environment variables (VITE_* prefixed) for API, OSM, editors, imagery/schema references, and optional Sentry integration, along with guidance comments about environment consistency and local setup.Updated Files:
README.md – Simplified project setup workflow:
.env-based approach.env.exampleto.env, install dependencies, and run dev.envfilenuxt.config.ts – Enabled runtime proxy configuration:
nitro.devProxyconfiguration blockThe changes shift environment variable configuration from manual setup to automatic Nuxt file loading, with the
.envfile kept out of version control via.gitignore.