Skip to content

Commit 8ec1ea7

Browse files
rajbosrajbos
committed
Generated by Spark: 5s
Run npm run build > spark-template@0.0.0 build > tsc -b --noCheck && vite build failed to load config from /home/runner/work/github-copilot-usage/github-copilot-usage/vite.config.ts error during build: Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@github/spark' imported from /home/runner/work/github-copilot-usage/github-copilot-usage/node_modules/.vite-temp/vite.config.ts.timestamp-1750158741259-9d76f6a6c757e.mjs at Object.getPackageJSONURL (node:internal/modules/package_json_reader:256:9) at packageResolve (node:internal/modules/esm/resolve:768:81) at moduleResolve (node:internal/modules/esm/resolve:854:18) at defaultResolve (node:internal/modules/esm/resolve:984:11) at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:780:12) at #cachedDefaultResolve (node:internal/modules/esm/loader:704:25) at ModuleLoader.resolve (node:internal/modules/esm/loader:687:38) at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:305:38) at ModuleJob._link (node:internal/modules/esm/module_job:137:49) Error: Process completed with exit code 1.
1 parent c00c75a commit 8ec1ea7

5 files changed

Lines changed: 497 additions & 27 deletions

File tree

‎.github/workflows/deploy-to-pages.yml‎

Lines changed: 96 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,23 +30,112 @@ jobs:
3030
- name: Setup Node
3131
uses: actions/setup-node@v4
3232
with:
33-
node-version: "22"
33+
node-version: "18"
3434
cache: 'npm'
3535

36+
- name: Create simplified vite config
37+
run: |
38+
cat > vite.config.js << 'EOF'
39+
import { defineConfig } from "vite";
40+
import react from "@vitejs/plugin-react";
41+
import { resolve } from 'path';
42+
43+
// https://vitejs.dev/config/
44+
export default defineConfig({
45+
plugins: [react()],
46+
build: {
47+
base: "/spark-template/",
48+
outDir: 'dist'
49+
},
50+
resolve: {
51+
alias: {
52+
'@': resolve(__dirname, 'src')
53+
}
54+
}
55+
});
56+
EOF
57+
58+
- name: Create simplified package.json
59+
run: |
60+
cat > simplified-package.json << 'EOF'
61+
{
62+
"name": "github-copilot-usage-analyzer",
63+
"private": true,
64+
"version": "1.0.0",
65+
"type": "module",
66+
"scripts": {
67+
"build": "vite build",
68+
"preview": "vite preview"
69+
},
70+
"dependencies": {
71+
"@phosphor-icons/react": "^2.0.15",
72+
"clsx": "^2.1.0",
73+
"react": "^18.2.0",
74+
"react-dom": "^18.2.0",
75+
"recharts": "^2.10.3",
76+
"sonner": "^1.2.4",
77+
"tailwind-merge": "^2.2.0"
78+
},
79+
"devDependencies": {
80+
"@types/react": "^18.2.46",
81+
"@types/react-dom": "^18.2.18",
82+
"@vitejs/plugin-react": "^4.2.1",
83+
"autoprefixer": "^10.4.16",
84+
"postcss": "^8.4.32",
85+
"tailwindcss": "^3.4.0",
86+
"typescript": "^5.3.3",
87+
"vite": "^5.0.10"
88+
}
89+
}
90+
EOF
91+
mv simplified-package.json package.json
92+
3693
- name: Install dependencies
37-
run: npm ci
94+
run: npm install
3895

39-
- name: Update Vite config for GitHub Pages
96+
- name: Create modified App with no Spark dependencies
4097
run: |
41-
# Add base path to vite.config.ts for GitHub Pages
42-
sed -i 's/build: {/build: {\n base: "\/spark-template\/",/' vite.config.ts
98+
# Create a file to replace @github/spark imports
99+
mkdir -p src/spark-shims
100+
cat > src/spark-shims/hooks.js << 'EOF'
101+
import { useState } from 'react';
102+
103+
// Simple localStorage-based shim for useKV hook
104+
export function useKV(key, initialValue) {
105+
const storageKey = `kv-${key}`;
106+
107+
// Get from localStorage
108+
const stored = localStorage.getItem(storageKey);
109+
const initial = stored !== null ? JSON.parse(stored) : initialValue;
110+
111+
const [value, setValue] = useState(initial);
112+
113+
const setValueAndStore = (newValue) => {
114+
const valueToStore = newValue instanceof Function ? newValue(value) : newValue;
115+
setValue(valueToStore);
116+
localStorage.setItem(storageKey, JSON.stringify(valueToStore));
117+
};
118+
119+
const deleteValue = () => {
120+
setValue(null);
121+
localStorage.removeItem(storageKey);
122+
};
123+
124+
return [value, setValueAndStore, deleteValue];
125+
}
126+
EOF
43127
44-
- name: Build
45-
run: npm run build
128+
- name: Update imports in code
129+
run: |
130+
# Replace imports from @github/spark/hooks with our shim
131+
find src -type f -name "*.ts" -o -name "*.tsx" | xargs sed -i 's/import {.*} from "@github\/spark\/hooks"/import { useKV } from "..\/spark-shims\/hooks"/g'
46132
47133
- name: Setup Pages
48134
uses: actions/configure-pages@v4
49135

136+
- name: Build
137+
run: npm run build
138+
50139
- name: Upload artifact
51140
uses: actions/upload-pages-artifact@v3
52141
with:

‎GITHUB_PAGES_DEPLOY.md‎

Lines changed: 156 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,57 +2,194 @@
22

33
This document explains how to deploy the GitHub Copilot Usage Analyzer to GitHub Pages.
44

5-
## Automated Deployment
5+
## Automated Deployment with GitHub Actions
66

7-
This project includes a GitHub Actions workflow that automatically builds and deploys the application to GitHub Pages whenever changes are pushed to the `main` branch.
7+
This project includes a GitHub Actions workflow that automatically builds and deploys the application to GitHub Pages without requiring the Spark dependencies.
88

99
### How It Works
1010

1111
1. The workflow `.github/workflows/deploy-to-pages.yml` is triggered on pushes to the `main` branch or manually from the Actions tab.
12-
2. It builds the application and configures it for GitHub Pages deployment with the correct base path.
12+
2. It creates a simplified build configuration that:
13+
- Removes dependencies on the GitHub Spark modules
14+
- Creates shims for necessary functionality
15+
- Sets the correct base path for GitHub Pages
1316
3. The built application is deployed to GitHub Pages automatically.
1417

1518
### Setting Up GitHub Pages
1619

17-
To enable GitHub Pages deployment for this repository:
20+
To set up GitHub Pages deployment for this repository:
1821

1922
1. Go to your repository on GitHub
2023
2. Click on "Settings"
2124
3. Navigate to "Pages" in the left sidebar
2225
4. Under "Build and deployment" > "Source", select "GitHub Actions"
2326
5. The workflow will now be able to deploy to GitHub Pages
2427

28+
### Running the Workflow Manually
29+
30+
You can trigger the deployment workflow manually:
31+
32+
1. Go to the "Actions" tab in your repository
33+
2. Select the "Deploy to GitHub Pages" workflow
34+
3. Click "Run workflow" button (branch: main)
35+
4. Wait for the workflow to complete
36+
2537
## Manual Deployment
2638

27-
If you prefer to deploy manually or need to test locally first:
39+
For manual deployment, follow these steps:
40+
41+
### Step 1: Create a Simplified Build
42+
43+
Since the Spark dependencies are not available outside the GitHub environment, we need to create a simplified version of the app for GitHub Pages:
44+
45+
1. Create a new temporary directory:
46+
```bash
47+
mkdir -p temp_build
48+
cd temp_build
49+
```
50+
51+
2. Copy source files:
52+
```bash
53+
cp -r ../src .
54+
cp ../index.html .
55+
cp ../tailwind.config.js .
56+
```
57+
58+
3. Create a simplified vite.config.js:
59+
```javascript
60+
import { defineConfig } from "vite";
61+
import react from "@vitejs/plugin-react";
62+
import { resolve } from 'path';
63+
64+
export default defineConfig({
65+
plugins: [react()],
66+
build: {
67+
base: "/your-repo-name/", // Change to your repository name
68+
outDir: 'dist'
69+
},
70+
resolve: {
71+
alias: {
72+
'@': resolve(__dirname, 'src')
73+
}
74+
}
75+
});
76+
```
2877

29-
1. Update the base path in `vite.config.ts`:
78+
4. Create a simplified package.json with only the necessary dependencies:
79+
```json
80+
{
81+
"name": "github-copilot-usage-analyzer",
82+
"private": true,
83+
"version": "1.0.0",
84+
"type": "module",
85+
"scripts": {
86+
"build": "vite build",
87+
"preview": "vite preview"
88+
},
89+
"dependencies": {
90+
"@phosphor-icons/react": "^2.0.15",
91+
"clsx": "^2.1.0",
92+
"react": "^18.2.0",
93+
"react-dom": "^18.2.0",
94+
"recharts": "^2.10.3",
95+
"sonner": "^1.2.4",
96+
"tailwind-merge": "^2.2.0"
97+
},
98+
"devDependencies": {
99+
"@types/react": "^18.2.46",
100+
"@types/react-dom": "^18.2.18",
101+
"@vitejs/plugin-react": "^4.2.1",
102+
"autoprefixer": "^10.4.16",
103+
"postcss": "^8.4.32",
104+
"tailwindcss": "^3.4.0",
105+
"typescript": "^5.3.3",
106+
"vite": "^5.0.10"
107+
}
108+
}
109+
```
30110

31-
```typescript
32-
build: {
33-
outDir: process.env.OUTPUT_DIR || 'dist',
34-
base: "/spark-template/" // Add this line (replace with your repo name)
111+
5. Create a shim for Spark hooks:
112+
```javascript
113+
// src/spark-shims/hooks.js
114+
import { useState } from 'react';
115+
116+
// Simple localStorage-based shim for useKV hook
117+
export function useKV(key, initialValue) {
118+
const storageKey = `kv-${key}`;
119+
120+
// Get from localStorage
121+
const stored = localStorage.getItem(storageKey);
122+
const initial = stored !== null ? JSON.parse(stored) : initialValue;
123+
124+
const [value, setValue] = useState(initial);
125+
126+
const setValueAndStore = (newValue) => {
127+
const valueToStore = newValue instanceof Function ? newValue(value) : newValue;
128+
setValue(valueToStore);
129+
localStorage.setItem(storageKey, JSON.stringify(valueToStore));
130+
};
131+
132+
const deleteValue = () => {
133+
setValue(null);
134+
localStorage.removeItem(storageKey);
135+
};
136+
137+
return [value, setValueAndStore, deleteValue];
35138
}
36139
```
37140

38-
2. Build the application:
141+
6. Update imports in your code:
142+
```bash
143+
# Replace imports from @github/spark/hooks with our shim
144+
find src -type f -name "*.ts" -o -name "*.tsx" | xargs sed -i 's/import {.*} from "@github\/spark\/hooks"/import { useKV } from "..\/spark-shims\/hooks"/g'
145+
```
39146

147+
7. Install dependencies and build:
40148
```bash
149+
npm install
41150
npm run build
42151
```
43152

44-
3. Test the build locally:
153+
### Step 2: Deploy to GitHub Pages
154+
155+
1. Create a gh-pages branch (if it doesn't exist):
156+
```bash
157+
git checkout --orphan gh-pages
158+
```
159+
160+
2. Remove existing files:
161+
```bash
162+
git rm -rf .
163+
```
164+
165+
3. Copy build files:
166+
```bash
167+
cp -r temp_build/dist/* .
168+
```
169+
170+
4. Create a .nojekyll file (important for proper GitHub Pages rendering):
171+
```bash
172+
touch .nojekyll
173+
```
45174

175+
5. Commit and push:
46176
```bash
47-
npm run preview
177+
git add .
178+
git commit -m "Deploy to GitHub Pages"
179+
git push -u origin gh-pages
48180
```
49181

50-
4. Deploy the contents of the `dist` directory to GitHub Pages using your preferred method.
182+
6. Return to main branch:
183+
```bash
184+
git checkout main
185+
```
51186

52187
## Accessing Your Deployed Application
53188

54189
Once deployed, your application will be available at:
55-
`https://[your-github-username].github.io/spark-template/`
190+
`https://[your-github-username].github.io/your-repo-name/`
191+
192+
Replace `your-repo-name` with the actual name of your repository.
56193

57194
## Troubleshooting
58195

@@ -62,11 +199,14 @@ If you encounter any issues with the deployment:
62199
2. Ensure GitHub Pages is properly configured in your repository settings
63200
3. Verify that the base path in the Vite configuration matches your repository name
64201
4. Check that the repository has proper permissions set for GitHub Pages deployment
202+
5. If using manual deployment, make sure you have a .nojekyll file in the gh-pages branch
203+
6. Verify that all paths in the application are relative, not absolute
65204

66205
## Note About App Functionality
67206

68207
When deployed to GitHub Pages, be aware that:
69208

70209
1. The application is entirely client-side - all data processing happens in the browser
71210
2. No data is sent to any server when using the CSV upload feature
72-
3. If your CSV files are large, performance will depend on the user's device capabilities
211+
3. If your CSV files are large, performance will depend on the user's device capabilities
212+
4. The localStorage-based KV store implementation means data will be persisted only in the user's browser

‎README.md‎

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,46 @@ npm run build
2929

3030
## Deployment
3131

32-
This project is configured for automatic deployment to GitHub Pages.
33-
3432
### GitHub Pages Deployment
3533

36-
The project includes a GitHub Actions workflow that will automatically build and deploy the application whenever changes are pushed to the main branch.
34+
The project includes a GitHub Actions workflow that will automatically build and deploy the application to GitHub Pages whenever changes are pushed to the main branch.
35+
36+
#### How to Deploy to GitHub Pages
37+
38+
1. Push your changes to the `main` branch
39+
2. The GitHub Actions workflow will automatically:
40+
- Create a simplified build without Spark dependencies
41+
- Deploy to GitHub Pages
42+
43+
3. Alternatively, you can manually trigger the deployment:
44+
- Go to the "Actions" tab in your repository
45+
- Select "Deploy to GitHub Pages" workflow
46+
- Click "Run workflow" on the main branch
47+
48+
4. Your application will be available at:
49+
`https://[your-github-username].github.io/[repo-name]/`
50+
51+
#### Setting Up GitHub Pages for Your Repository
52+
53+
To enable GitHub Pages deployment:
54+
55+
1. Go to your repository on GitHub
56+
2. Click on "Settings"
57+
3. Navigate to "Pages" in the left sidebar
58+
4. Under "Build and deployment" > "Source", select "GitHub Actions"
59+
60+
For more detailed instructions and troubleshooting, see [GITHUB_PAGES_DEPLOY.md](GITHUB_PAGES_DEPLOY.md).
61+
62+
## How It Works
63+
64+
The GitHub Pages deployment handles the fact that GitHub Spark dependencies are not available outside the Spark environment. The workflow:
65+
66+
1. Creates a simplified build configuration
67+
2. Implements localStorage-based alternatives to Spark's useKV hooks
68+
3. Builds a fully client-side version of the application
69+
4. Deploys it to GitHub Pages
3770

38-
For detailed instructions on setting up and using GitHub Pages deployment, please see [GITHUB_PAGES_DEPLOY.md](GITHUB_PAGES_DEPLOY.md).
71+
This approach ensures your application can be shared and accessed outside the Spark development environment.
3972

4073
## License
4174

0 commit comments

Comments
 (0)