Fix environment variable handling and update README

Author: openhands-agent

README.md

@@ -1,3 +1,4 @@
+
 # PR Viewer
 
 This React application allows you to view open pull requests from GitHub repositories in the OpenDevin organization.
@@ -8,10 +9,10 @@ This React application allows you to view open pull requests from GitHub reposit
 2. Install dependencies: `npm install`
 3. Create a `.env` file in the root directory and add your GitHub token:
    ```
-   GITHUB_TOKEN=your_github_token_here
+   VITE_GITHUB_TOKEN=your_github_token_here
    ```
 4. Run the development server: `npm run dev`
-5. Open your browser and navigate to the URL provided by Vite
+5. Open your browser and navigate to the URL provided by Vite (usually http://localhost:5173)
 
 ## Running Tests
 
@@ -21,3 +22,7 @@ To run the tests, use the command: `npm test`
 
 To build the app for production, use: `npm run build`
 
+## Note
+
+Make sure to replace `your_github_token_here` with an actual GitHub personal access token that has the necessary permissions to read repository and pull request information from the OpenDevin organization.
+

src/PullRequestViewer.tsx

@@ -1,11 +1,12 @@
 
 
+
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import { Octokit } from '@octokit/rest';
 import Select from 'react-select';
 
-const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN });
+const octokit = new Octokit({ auth: import.meta.env.VITE_GITHUB_TOKEN });
 
 interface PullRequest {
   title: string;

vite.config.ts

@@ -1,4 +1,5 @@
 
+
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
@@ -10,4 +11,7 @@ export default defineConfig({
     environment: 'jsdom',
     setupFiles: './src/setupTests.ts',
   },
+  define: {
+    'process.env.GITHUB_TOKEN': JSON.stringify(process.env.GITHUB_TOKEN)
+  }
 })