Update local development setup with Ngrok for Clerk #254
Conversation
Related to haydenbleasel#203 --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/haydenbleasel/next-forge/issues/203?shareId=XXXX-XXXX-XXXX-XXXX).
|
@yamz8 is attempting to deploy a commit to the Hayden Bleasel Team on Vercel. A member of the Team first needs to authorize it. |
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the 📝 Walkthrough📝 WalkthroughWalkthroughThe changes made in the pull request involve modifications to the Changes
Sequence Diagram(s)sequenceDiagram
participant Developer
participant API
participant Ngrok
Developer->>API: Run development script
API->>Ngrok: Start ngrok tunnel
API->>API: Start next server
API->>API: Start stripe service
Ngrok->>Developer: Provide public URL
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
apps/api/package.json (1)
Line range hint
27-36: Add ngrok as a devDependencyThe project is using ngrok in the scripts but it's not listed in the devDependencies. This could cause setup issues for other developers.
Add ngrok to devDependencies:
"devDependencies": { "@repo/typescript-config": "workspace:*", "@types/node": "22.9.0", "@types/react": "18.3.12", "@types/react-dom": "18.3.1", "concurrently": "^9.1.0", + "ngrok": "^5.0.0", "typescript": "^5.6.3" }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
⛔ Files ignored due to path filters (1)
docs/authentication.mdxis excluded by none and included by none
📒 Files selected for processing (1)
apps/api/package.json(1 hunks)
🔇 Additional comments (1)
apps/api/package.json (1)
5-5: Verify Clerk webhook configuration with ngrok
The concurrent execution of ngrok with the API server looks good. Since this is for Clerk integration, ensure that you:
- Update your Clerk webhook endpoints with the ngrok URL
- Configure the necessary webhook events in Clerk dashboard
Let's verify the webhook configuration:
✅ Verification successful
Webhook configuration is properly implemented and documented
The codebase shows a well-implemented Clerk webhook setup:
- A complete webhook handler exists at
apps/api/app/webhooks/clerk/route.tsthat processes various Clerk events - The documentation in
authentication.mdxprovides clear instructions for setting up webhooks with ngrok - The webhook handler verifies signatures using
CLERK_WEBHOOK_SECRETenvironment variable - The concurrent execution with ngrok in the package.json is correctly configured
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if Clerk webhook configuration exists in environment files
rg -l "CLERK.*WEBHOOK|WEBHOOK.*CLERK" .env* || echo "No Clerk webhook configuration found in .env files"
# Look for webhook handler implementations
rg -l "clerk.*webhook|webhook.*clerk" --type ts --type tsx
Length of output: 293
Script:
#!/bin/bash
# Look for webhook handler implementations with broader search
rg -l "clerk.*webhook|webhook.*clerk"
# Search for Clerk-related configuration or webhook setup
rg -l "clerk" --type ts
# Check for any webhook route handlers
rg -l "webhook.*handler|post.*webhook" --type ts
# Look for environment variable references
fd ".env"
Length of output: 695
Script:
#!/bin/bash
# Check the Clerk webhook handler implementation
cat apps/api/app/webhooks/clerk/route.ts
# Check documentation for webhook setup instructions
cat docs/authentication.mdx
# Look for environment variable templates or examples
fd -e example -e sample -e template .env
Length of output: 7526
|
@yamz8 nice work! Can you also update the setup.mdx to note that you'll need the |
* **`apps/api/package.json`** - Add a new script "ngrok" to start Ngrok and forward to localhost:3002 - Update the "dev" script to run "concurrently" with "next", "stripe", and "ngrok" * **`docs/authentication.mdx`** - Add instructions for using Ngrok for local development with Clerk - Remove recommendation to create a new Vercel project for local development - Add a new section explaining how to set up and use Ngrok * **`docs/setup.mdx`** - Add a note about the need to install Ngrok
add domain to keep persistent
|
@haydenbleasel u want me to change anything else? |
|
@yamz8 if i remember correctly, ngrok dynamically generates a url for you to test locally right? so you'd have to change it every time you start work? |
Related to #203
For more details, open the Copilot Workspace session.
Summary by CodeRabbit
New Features
ngrokcommand for easier internet access to the application.Improvements
ngrokconcurrently with existing commands, streamlining the development process.