Deployment tips on wso2 dev platform doc.#134
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new documentation file, DEPLOYMENT.md, which details the runtime configuration pattern for Vite-based React applications on the WSO2 Developer Platform. The guide explains how to bypass Vite's build-time environment variable substitution by using a runtime config.js file. The review feedback focuses on improving the accuracy and consistency of the documentation, specifically by correcting file paths, fixing step numbering, adding missing configuration fields to examples, and suggesting the use of relative imports to ensure compatibility.
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| <script type="module" src="/src/main.tsx"></script> |
There was a problem hiding this comment.
The entry point script path in the documentation (/src/main.tsx) does not match the actual file in the repository (/src/index.tsx).
| <script type="module" src="/src/main.tsx"></script> | |
| <script type="module" src="/src/index.tsx"></script> |
| const runtimeEnv = (window as any).__ENV__ ?? {}; | ||
|
|
||
| export const config = { | ||
| ASGARDEO_CLIENT_ID: | ||
| runtimeEnv.VITE_ASGARDEO_CLIENT_ID || | ||
| import.meta.env.VITE_ASGARDEO_CLIENT_ID, | ||
|
|
||
| ASGARDEO_BASE_URL: | ||
| runtimeEnv.VITE_ASGARDEO_BASE_URL || | ||
| import.meta.env.VITE_ASGARDEO_BASE_URL, | ||
|
|
||
| RTI_TRACKER_SERVER_URL: | ||
| runtimeEnv.VITE_RTI_TRACKER_SERVER_URL || | ||
| import.meta.env.VITE_RTI_TRACKER_SERVER_URL, | ||
|
|
||
| FILE_STORAGE_BASE_URL: | ||
| runtimeEnv.VITE_FILE_STORAGE_BASE_URL || | ||
| import.meta.env.VITE_FILE_STORAGE_BASE_URL, | ||
| }; |
There was a problem hiding this comment.
The configuration example is missing the FILE_VIEW_BASE_URL field found in the actual implementation. Additionally, using env and || matches the existing code in src/config.ts more closely for consistency.
const env = (window as any).__ENV__ || {};
export const config = {
ASGARDEO_CLIENT_ID:
env.VITE_ASGARDEO_CLIENT_ID ||
import.meta.env.VITE_ASGARDEO_CLIENT_ID,
ASGARDEO_BASE_URL:
env.VITE_ASGARDEO_BASE_URL ||
import.meta.env.VITE_ASGARDEO_BASE_URL,
RTI_TRACKER_SERVER_URL:
env.VITE_RTI_TRACKER_SERVER_URL ||
import.meta.env.VITE_RTI_TRACKER_SERVER_URL,
FILE_STORAGE_BASE_URL:
env.VITE_FILE_STORAGE_BASE_URL ||
import.meta.env.VITE_FILE_STORAGE_BASE_URL,
FILE_VIEW_BASE_URL:
env.VITE_FILE_VIEW_BASE_URL ||
import.meta.env.VITE_FILE_VIEW_BASE_URL,
};
There was a problem hiding this comment.
Add VITE_FILE_VIEW_BASE_URL as well
|
|
||
| --- | ||
|
|
||
| ### Step 4 — Replace all `import.meta.env` usages in your app |
There was a problem hiding this comment.
The step numbering is incorrect; Step 3 is skipped in the sequence.
| ### Step 4 — Replace all `import.meta.env` usages in your app | |
| ### Step 3 — Replace all `import.meta.env` usages in your app |
| const clientId = import.meta.env.VITE_ASGARDEO_CLIENT_ID; | ||
|
|
||
| // After | ||
| import { config } from '@/config'; |
There was a problem hiding this comment.
The project appears to use relative imports (e.g., in App.tsx). Using the @/ alias might cause build issues if it is not explicitly configured in the environment.
| import { config } from '@/config'; | |
| import { config } from './config'; |
|
|
||
| --- | ||
|
|
||
| ### Step 5 — Your local `.env` still works as-is |
There was a problem hiding this comment.
The step numbering should be updated to maintain a proper sequence following the previous correction.
| ### Step 5 — Your local `.env` still works as-is | |
| ### Step 4 — Your local `.env` still works as-is |
| window.__ENV__ = { | ||
| VITE_ASGARDEO_CLIENT_ID: "your-real-asgardeo-client-id", | ||
| VITE_ASGARDEO_BASE_URL: "https://api.asgardeo.io/t/your-org", | ||
| VITE_RTI_TRACKER_SERVER_URL: "http://your-backend-service:8080", | ||
| VITE_FILE_STORAGE_BASE_URL: "https://your-storage-endpoint", | ||
| }; |
There was a problem hiding this comment.
Include the VITE_FILE_VIEW_BASE_URL variable in the example configuration to match the fields used in the application's runtime configuration.
| window.__ENV__ = { | |
| VITE_ASGARDEO_CLIENT_ID: "your-real-asgardeo-client-id", | |
| VITE_ASGARDEO_BASE_URL: "https://api.asgardeo.io/t/your-org", | |
| VITE_RTI_TRACKER_SERVER_URL: "http://your-backend-service:8080", | |
| VITE_FILE_STORAGE_BASE_URL: "https://your-storage-endpoint", | |
| }; | |
| window.__ENV__ = { | |
| VITE_ASGARDEO_CLIENT_ID: "your-real-asgardeo-client-id", | |
| VITE_ASGARDEO_BASE_URL: "https://api.asgardeo.io/t/your-org", | |
| VITE_RTI_TRACKER_SERVER_URL: "http://your-backend-service:8080", | |
| VITE_FILE_STORAGE_BASE_URL: "https://your-storage-endpoint", | |
| VITE_FILE_VIEW_BASE_URL: "https://your-view-endpoint", | |
| }; |
|
|
||
| Once the `dist/` folder is produced, those values are frozen. No file mount, environment injection, or server restart will change what is already compiled into the JavaScript. | ||
|
|
||
| ### Why WSO2's react buildpack Makes This Worse |
There was a problem hiding this comment.
| ### Why WSO2's react buildpack Makes This Worse | |
| ### How this differ from WSO2's react buildpack? |
| const runtimeEnv = (window as any).__ENV__ ?? {}; | ||
|
|
||
| export const config = { | ||
| ASGARDEO_CLIENT_ID: | ||
| runtimeEnv.VITE_ASGARDEO_CLIENT_ID || | ||
| import.meta.env.VITE_ASGARDEO_CLIENT_ID, | ||
|
|
||
| ASGARDEO_BASE_URL: | ||
| runtimeEnv.VITE_ASGARDEO_BASE_URL || | ||
| import.meta.env.VITE_ASGARDEO_BASE_URL, | ||
|
|
||
| RTI_TRACKER_SERVER_URL: | ||
| runtimeEnv.VITE_RTI_TRACKER_SERVER_URL || | ||
| import.meta.env.VITE_RTI_TRACKER_SERVER_URL, | ||
|
|
||
| FILE_STORAGE_BASE_URL: | ||
| runtimeEnv.VITE_FILE_STORAGE_BASE_URL || | ||
| import.meta.env.VITE_FILE_STORAGE_BASE_URL, | ||
| }; |
There was a problem hiding this comment.
Add VITE_FILE_VIEW_BASE_URL as well
| window.__ENV__ = { | ||
| VITE_ASGARDEO_CLIENT_ID: "your-real-asgardeo-client-id", | ||
| VITE_ASGARDEO_BASE_URL: "https://api.asgardeo.io/t/your-org", | ||
| VITE_RTI_TRACKER_SERVER_URL: "http://your-backend-service:8080", | ||
| VITE_FILE_STORAGE_BASE_URL: "https://your-storage-endpoint", | ||
| }; |
|
Link the PR to an issue as well! |
2 participants
No description provided.