Skip to content

Use .env file for environment variable setup #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bhousel wants to merge 2 commits into
base: master
Choose a base branch
from
+56 −662
Open

Use .env file for environment variable setup #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
737f6d9
Update lockfile
bhousel Mar 13, 2026
71e8bc1
Move environment variable setup to `.env` file
bhousel Mar 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions .env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
# ==============================================================================
# Workspaces Frontend — Local Development Environment
# ==============================================================================
# Copy this file to .env and adjust values as needed:
# cp .env.example .env
#
# Nuxt automatically loads .env files. No need to manually export these.
# All VITE_* variables are baked into the client bundle at build time.
# ==============================================================================

# --- TDEI Platform APIs (auth, datasets, conversion) -------------------------
# Point these at the TDEI dev environment. Tokens from one environment (dev,
# stage, prod) are NOT interchangeable — all components must target the same
# environment.
VITE_TDEI_API_URL=https://api-dev.tdei.us/api/v1/
VITE_TDEI_USER_API_URL=https://portal-api-dev.tdei.us/api/v1/

# --- 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/
Comment on lines +20 to +22
Copy link

@coderabbitai coderabbitai bot Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

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.

Suggested change
# 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.


# 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/

Comment on lines +18 to +27
Copy link

@coderabbitai coderabbitai bot Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

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.

# --- Embedded Editors ---------------------------------------------------------
# Rapid editor (OSW editing) and Pathways editor (GTFS Pathways editing).
# These are standalone apps hosted separately.
VITE_RAPID_URL=https://rapid.workspaces-dev.sidewalks.washington.edu/
VITE_PATHWAYS_EDITOR_URL=https://pathways.workspaces-dev.sidewalks.washington.edu/

# --- Schema / Example URLs (rarely need to change) ---------------------------
VITE_IMAGERY_SCHEMA=https://raw.githubusercontent.com/TaskarCenterAtUW/asr-imagery-list/refs/heads/main/schema/schema.json
VITE_IMAGERY_EXAMPLE_URL=https://github.com/TaskarCenterAtUW/asr-imagery-list/blob/main/examples/example.json
VITE_LONG_FORM_QUEST_SCHEMA=https://raw.githubusercontent.com/TaskarCenterAtUW/asr-quests/refs/heads/main/schema/schema.json
VITE_LONG_FORM_QUEST_EXAMPLE_URL=https://raw.githubusercontent.com/TaskarCenterAtUW/asr-quests/refs/heads/main/docs/quest-definition/example.json

# --- Sentry (optional for local dev) -----------------------------------------
# VITE_SENTRY_AUTH_TOKEN=
# VITE_SENTRY_DSN=

# --- Build metadata -----------------------------------------------------------
CODE_VERSION=local
34 changes: 6 additions & 28 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,10 @@ Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introdu

## Dev Setup

```
# set these e.g. to the dev TDEI instance--note: any tokens you get from these hosts must match the environment for other components
# e.g. you can't use dev TDEI KeyCloak JWT tokens in stage or production environments.
export VITE_TDEI_API_URL=https://api-dev.tdei.us/api/v1/
export VITE_TDEI_USER_API_URL=https://portal-api-dev.tdei.us/api/v1/

###
# this accesses a local version of the workspaces-backend running on port 8000
# export VITE_API_URL=http://localhost:8000/api/v1/
# export VITE_OSM_URL=http://localhost:8000/

# ***** USE THE ABOVE OR THE BELOW, NOT BOTH! ***

export VITE_API_URL=https://api.workspaces-dev.sidewalks.washington.edu/api/v1/
export VITE_OSM_URL=https://osm.workspaces-dev.sidewalks.washington.edu/
###

# probably want to leave these as-is
export VITE_RAPID_URL=https://rapid.workspaces-dev.sidewalks.washington.edu/
export VITE_PATHWAYS_EDITOR_URL=https://pathways.workspaces-dev.sidewalks.washington.edu/

# probably don't need to change any of these
export CODE_VERSION="local"
export VITE_IMAGERY_SCHEMA=https://raw.githubusercontent.com/TaskarCenterAtUW/asr-imagery-list/refs/heads/main/schema/schema.json
export VITE_IMAGERY_EXAMPLE_URL=https://github.com/TaskarCenterAtUW/asr-imagery-list/blob/main/examples/example.json
export VITE_LONG_FORM_QUEST_SCHEMA=https://raw.githubusercontent.com/TaskarCenterAtUW/asr-quests/refs/heads/main/schema/schema.json
export VITE_LONG_FORM_QUEST_EXAMPLE_URL=https://raw.githubusercontent.com/TaskarCenterAtUW/asr-quests/refs/heads/main/docs/quest-definition/example.json
```zsh
# Copy `.env.example` to `.env` and adjust values as needed.
# Nuxt automatically loads .env files. No need to manually export these.
cp .env.example .env

# install deps (first time only)
npm install
Expand All @@ -43,4 +20,5 @@ npm run dev

## 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.
If you run `npm run dev` and nothing happens, double check your `.env` file.
Copy link

@coderabbitai coderabbitai bot Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

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.

Suggested change
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.

Undefined environment variables are not handled gracefully right now.
9 changes: 5 additions & 4 deletions nuxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,18 @@ export default defineNuxtConfig({
sourcemap: { client: 'hidden' },
compatibilityDate: '2024-10-24',

/*
nitro: {
// deal with CORS issues during development--not sure this is always required, or required at all?
// deal with CORS issues during development
devProxy: {
// use these values when you want to use the existing dev backend
'/api': 'https://api.workspaces-dev.sidewalks.washington.edu/api/',
'/workspaces': 'https://osm.workspaces-dev.sidewalks.washington.edu/workspaces/',

// use these values when running the backend locally, e.g. the repo workspaces-backend
// '/api': 'http://localhost:8000/api/',
// '/workspaces': 'http://localhost:8000/workspaces/',
},
},
*/

eslint: {
config: {
stylistic: true,
Expand Down
Loading