11# Getting Started Guide
22
3- This guide will walk you through setting up the URL shortener from scratch .
3+ This guide will help you set up the URL shortener for local development or production deployment .
44
5- ## Prerequisites
5+ ## Quick Start
66
7- - Azure subscription (free tier)
8- - Cloudflare account (free tier)
9- - GitHub account
10- - Node.js 20+ installed
11- - Azure CLI installed
12- - Wrangler CLI installed ( ` npm install -g wrangler ` )
7+ 1 . ** Clone and Install **
8+ ``` bash
9+ git clone https://github.com/yourusername/url-shortener.git
10+ cd url-shortener
11+ npm ci # Install dependencies from lock file
12+ ```
1313
14- ## Step 1: Clone and Install
14+ 2 . ** For Local Development ** → Continue to [ Local Development ] ( #local-development ) below
1515
16- ``` bash
17- git clone https://github.com/kurtzeborn/url-shortener.git
18- cd url-shortener
19- npm ci # Install dependencies from lock file
20- ```
21-
22- ## Step 2: Azure Setup
23-
24- ### 2.1 Create Storage Account
25-
26- ``` bash
27- # Login to Azure
28- az login
29-
30- # Create resource group
31- az group create --name url-shortener-rg --location eastus
32-
33- # Create storage account
34- az storage account create \
35- --name k61urlshortener \
36- --resource-group url-shortener-rg \
37- --location eastus \
38- --sku Standard_LRS
39-
40- # Get connection string (save this!)
41- az storage account show-connection-string \
42- --name k61urlshortener \
43- --resource-group url-shortener-rg
44- ```
45-
46- ### 2.2 Create Tables
47-
48- Go to Azure Portal → Storage Account → Table Storage and create:
49- - ` URLs `
50- - ` UserURLs `
51- - ` AllowedUsers `
52- - ` UserInvites `
53-
54- ### 2.3 Add First User
55-
56- In Azure Portal → Table Storage → ` AllowedUsers ` table:
57- - Click "Add Entity"
58- - PartitionKey: ` users `
59- - RowKey: ` your@email.com `
60- - AddedDate: Current date/time
61- - AddedBy: ` system `
62-
63- ### 2.4 Create Function App
64-
65- ``` bash
66- az functionapp create \
67- --resource-group url-shortener-rg \
68- --consumption-plan-location eastus \
69- --runtime node \
70- --runtime-version 20 \
71- --functions-version 4 \
72- --name k61-url-functions \
73- --storage-account k61urlshortener
74-
75- # Get publish profile (save for GitHub secrets)
76- az functionapp deployment list-publishing-profiles \
77- --name k61-url-functions \
78- --resource-group url-shortener-rg \
79- --xml
80- ```
81-
82- ### 2.5 Create Static Web Apps
83-
84- ``` bash
85- # For url.k61.dev (web app)
86- az staticwebapp create \
87- --name k61-url-web \
88- --resource-group url-shortener-rg \
89- --location eastus2
90-
91- # Get deployment token (save for GitHub secrets)
92- az staticwebapp secrets list \
93- --name k61-url-web \
94- --resource-group url-shortener-rg
95- ```
96-
97- ## Step 3: Cloudflare Setup
98-
99- ### 3.1 Add Domain to Cloudflare
100-
101- 1 . Go to Cloudflare Dashboard
102- 2 . Click "Add a Site"
103- 3 . Enter ` k61.dev `
104- 4 . Choose Free plan
105- 5 . Update Namecheap nameservers to Cloudflare's
106-
107- ### 3.2 Configure DNS
108-
109- Add these DNS records in Cloudflare:
110- - ` k61.dev ` → CNAME to your Worker (will be set after deployment)
111- - ` url ` → CNAME to Azure Static Web App (from Step 2.5)
112- - ` www ` → CNAME to Azure Static Web App (from Step 2.5)
16+ 3 . ** For Production Deployment** → See [ docs/DEPLOYMENT.md] ( docs/DEPLOYMENT.md )
11317
114- ### 3.3 Get API Token
18+ ---
11519
116- 1 . Cloudflare Dashboard → My Profile → API Tokens
117- 2 . Create Token → Edit Cloudflare Workers template
118- 3 . Save token for GitHub secrets
119-
120- ## Step 4: GitHub Secrets
121-
122- Add these secrets in GitHub repository settings:
123-
124- ### Cloudflare Worker
125- - ` CLOUDFLARE_API_TOKEN ` - API token from Step 3.3
126- - ` DEFAULT_URL ` - URL to redirect unknown/invalid IDs (e.g., https://url.k61.dev )
127- - ` AZURE_STORAGE_ACCOUNT ` - Storage account name (k61urlshortener)
128- - ` AZURE_STORAGE_SAS ` - SAS token from Azure Portal → Storage Account → Shared access signature
129- - ` AZURE_API_URL ` - Azure Functions URL (e.g., https://k61-url-functions.azurewebsites.net )
130- - ` INTERNAL_API_KEY ` - Generate a random secure key (e.g., ` openssl rand -hex 32 ` )
131-
132- ### Azure Functions
133- - ` AZURE_FUNCTIONAPP_NAME ` - Function app name (k61-url-functions)
134- - ` AZURE_FUNCTIONAPP_PUBLISH_PROFILE ` - XML from Step 2.4
135-
136- ### Azure Static Web Apps
137- - ` AZURE_STATIC_WEB_APPS_API_TOKEN_WEB ` - Token from Step 2.5
138- - ` VITE_MICROSOFT_CLIENT_ID ` - Microsoft Entra app registration client ID
139- - ` VITE_API_URL ` - Azure Functions URL (e.g., https://k61-url-functions.azurewebsites.net )
140-
141- ## Step 5: Local Development
20+ ## Local Development
14221
14322### Functions
14423
@@ -159,51 +38,16 @@ npm install
15938npm run dev # Runs on http://localhost:5173
16039```
16140
162- ### Cloudflare Worker
163-
164- ``` bash
165- cd workers
166- npm install
167- wrangler dev # Runs on http://localhost:8787
168- ```
169-
170- ## Step 6: Deploy
171-
172- Push to main branch to trigger automatic deployments:
173-
174- ``` bash
175- git add .
176- git commit -m " Initial setup"
177- git push origin main
178- ```
179-
180- GitHub Actions will automatically deploy:
181- - Cloudflare Worker
182- - Azure Functions
183- - Web App (url.k61.dev)
184-
185- ## Step 7: Configure Custom Domains
186-
187- ### In Azure Portal
41+ ---
18842
189- For each Static Web App:
190- 1 . Go to Custom Domains
191- 2 . Add domain (url.k61.dev and www.k61.dev )
192- 3 . Follow validation instructions
43+ ## Testing Locally
19344
194- ### In Cloudflare
45+ 1 . Ensure Functions are running (` http://localhost:7071 ` )
46+ 2 . Visit web app (` http://localhost:5173 ` )
47+ 3 . Login with your allowlisted email
48+ 4 . Create a test shortened URL
19549
196- 1 . Ensure DNS records are set correctly
197- 2 . Enable "Proxied" mode for k61.dev
198- 3 . Configure Worker route: ` k61.dev/* `
199-
200- ## Testing
201-
202- 1 . Visit ` https://url.k61.dev ` - Should show login page
203- 2 . Login with your allowlisted email
204- 3 . Create a test shortened URL
205- 4 . Visit ` https://k61.dev/<id> ` - Should redirect
206- 5 . Check dashboard - Click count should increment
50+ ---
20751
20852## Troubleshooting
20953
@@ -220,20 +64,4 @@ For each Static Web App:
22064### Static Web Apps not deploying
22165- Check GitHub Actions logs
22266- Verify deployment tokens are correct
223- - Check build output in Actions
224-
225- ## Next Steps
226-
227- - [x] ~~ Implement Microsoft OAuth authentication~~ (Done)
228- - [x] ~~ Add comprehensive tests~~ (Done - 51 tests)
229- - [ ] Set up monitoring/alerts
230- - [ ] [ Add URL analytics dashboard] ( https://github.com/kurtzeborn/url-shortener/issues/4 )
231- - [ ] [ Implement custom aliases] ( https://github.com/kurtzeborn/url-shortener/issues/3 )
232- - [ ] [ Add QR code generation] ( https://github.com/kurtzeborn/url-shortener/issues/8 )
233-
234- ## Support
235-
236- For issues, check:
237- - GitHub Issues: https://github.com/kurtzeborn/url-shortener/issues
238- - [ docs/archive/PLAN.md] ( docs/archive/PLAN.md ) for original architecture details
239- - Individual component READMEs
67+ - Check build output in Actions
0 commit comments