Skip to content

Commit 5bb6e6c

Browse files
rajbosrajbos
committed
Saved user edits
1 parent 8ec1ea7 commit 5bb6e6c

1 file changed

Lines changed: 190 additions & 48 deletions

File tree

‎push-and-deploy.md‎

Lines changed: 190 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,212 @@
1-
# Push and Deploy to GitHub Pages
1+
# Deploying to GitHub Pages
22

3-
To deploy your GitHub Copilot Usage Analyzer to GitHub Pages, follow these steps:
3+
This document explains how to deploy the GitHub Copilot Usage Analyzer to GitHub Pages.
44

5-
## Step 1: Create a GitHub Repository
5+
## Automated Deployment with GitHub Actions
66

7-
If you haven't already done so, create a repository on GitHub:
7+
This project includes a GitHub Actions workflow that automatically builds and deploys the application to GitHub Pages without requiring the Spark dependencies.
88

9-
1. Go to [GitHub](https://github.com)
10-
2. Click the "+" icon in the top right corner
11-
3. Select "New repository"
12-
4. Name your repository (e.g., "github-copilot-usage")
13-
5. Choose public or private visibility
14-
6. Click "Create repository"
9+
### How It Works
1510

16-
## Step 2: Push Your Code to GitHub
11+
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 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
16+
3. The built application is deployed to GitHub Pages automatically.
1717

18-
Use the following commands to push your code to GitHub:
18+
### Setting Up GitHub Pages
1919

20-
```bash
21-
# Initialize a git repository if not already done
22-
git init
23-
24-
# Add your GitHub repository as a remote
25-
# Replace YOUR_USERNAME with your GitHub username
26-
# Replace REPO_NAME with your repository name
27-
git remote add origin https://github.com/YOUR_USERNAME/REPO_NAME.git
28-
29-
# Add all files
30-
git add .
31-
32-
# Commit your changes
33-
git commit -m "Initial commit of GitHub Copilot Usage Analyzer"
34-
35-
# Push to GitHub main branch
36-
git push -u origin main
37-
```
38-
39-
## Step 3: Configure GitHub Pages
20+
To set up GitHub Pages deployment for this repository:
4021

4122
1. Go to your repository on GitHub
4223
2. Click on "Settings"
4324
3. Navigate to "Pages" in the left sidebar
4425
4. Under "Build and deployment" > "Source", select "GitHub Actions"
26+
5. The workflow will now be able to deploy to GitHub Pages
4527

46-
## Step 4: Trigger Deployment
28+
### Running the Workflow Manually
4729

48-
The deployment should start automatically after pushing to the main branch. If you need to manually trigger it:
30+
You can trigger the deployment workflow manually:
4931

5032
1. Go to the "Actions" tab in your repository
51-
2. Select "Deploy to GitHub Pages" workflow
52-
3. Click "Run workflow" on the main branch
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+
37+
## Manual Deployment
38+
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+
```
77+
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+
```
110+
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];
138+
}
139+
```
140+
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+
```
146+
147+
7. Install dependencies and build:
148+
```bash
149+
npm install
150+
npm run build
151+
```
152+
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+
```
174+
175+
5. Commit and push:
176+
```bash
177+
git add .
178+
git commit -m "Deploy to GitHub Pages"
179+
git push -u origin gh-pages
180+
```
181+
182+
6. Return to main branch:
183+
```bash
184+
git checkout main
185+
```
186+
187+
## Accessing Your Deployed Application
188+
189+
Once deployed, your application will be available at:
190+
`https://[your-github-username].github.io/your-repo-name/`
191+
192+
Replace `your-repo-name` with the actual name of your repository.
53193

54-
## Step 5: Access Your Deployed Application
55-
56-
Once deployed (usually takes 1-2 minutes), your application will be available at:
57-
58-
`https://YOUR_USERNAME.github.io/REPO_NAME/`
194+
## Troubleshooting
59195

60-
Replace `YOUR_USERNAME` with your GitHub username and `REPO_NAME` with your repository name.
196+
If you encounter any issues with the deployment:
61197

62-
## Troubleshooting
198+
1. Check the GitHub Actions logs for any error messages
199+
2. Ensure GitHub Pages is properly configured in your repository settings
200+
3. Verify that the base path in the Vite configuration matches your repository name
201+
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
63204

64-
If the deployment fails:
205+
## Note About App Functionality
65206

66-
1. Check the GitHub Actions logs for error messages
67-
2. Make sure your repository is set up correctly for GitHub Pages
68-
3. Verify that the GitHub Actions workflow has appropriate permissions
207+
When deployed to GitHub Pages, be aware that:
69208

70-
For more detailed instructions, see [GITHUB_PAGES_DEPLOY.md](GITHUB_PAGES_DEPLOY.md).
209+
1. The application is entirely client-side - all data processing happens in the browser
210+
2. No data is sent to any server when using the CSV upload feature
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

0 commit comments

Comments
 (0)