Feat/Guide to deploy an app on vercel #270
Conversation
New topic and update from blog.
WalkthroughA new guide titled Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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
CodeRabbit Configuration File (
|
![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 (3)
src/content/docs/developer-tools/guides/deploy-on-vercel.mdx (3)
18-18: Fix Next.js framework spellingThe official spelling is "Next.js" rather than "NextJS".
-... such as the [NextJS starter kit] +... such as the [Next.js starter kit]🧰 Tools
🪛 LanguageTool
[uncategorized] ~18-~18: The official spelling of this programming framework is “Next.js”.
Context: ...ses Kinde OR a starter kit such as the [NextJS starter kit](https://github.com/kinde-s...(NODE_JS)
49-49: Consider highlighting the localhost URL update more prominentlyThe note about updating localhost:3000 URLs is crucial for successful deployment. Consider adding a warning or note block to make this more visible to users.
-10. In a later step, we will update the callback URLs that are pointing to [`localhost:3000`](http://localhost:3000), to get the authentication process to work. +10. > ⚠️ **Important:** In the next step, you must update all callback URLs that are currently pointing to [`localhost:3000`](http://localhost:3000). This is crucial for the authentication process to work in production.
98-102: Enhance visibility of the build cache warningThe warning about not using build cache is crucial for successful deployment. Consider using a more prominent warning format.
- <Aside> - - Do not select **Use existing Build Cache** as that will preserve the old environment variables - - </Aside> + <Aside type="warning"> + ⚠️ Do not select **Use existing Build Cache** when redeploying, as it will preserve the old environment variables instead of using your updated values. + </Aside>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
src/content/docs/developer-tools/guides/deploy-on-vercel.mdx(1 hunks)
🧰 Additional context used
🪛 LanguageTool
src/content/docs/developer-tools/guides/deploy-on-vercel.mdx
[uncategorized] ~18-~18: The official spelling of this programming framework is “Next.js”.
Context: ...ses Kinde OR a starter kit such as the [NextJS starter kit](https://github.com/kinde-s...
(NODE_JS)
[style] ~25-~25: This phrasing can be overused. Try elevating your writing with a more formal alternative.
Context: ...o clone the repo to your GitHub account if you want.) 3. Enter a name for the new repositor...
(IF_YOU_WANT)
[style] ~37-~37: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...lect Import next to the project you want to deploy. 5. On the *Configure Project...
(REP_WANT_TO_VB)
[grammar] ~79-~79: Possible agreement error. The noun ‘menu’ seems to be countable.
Context: ...onment variable by selecting three dots menu, then selecting Edit. ![Upd...
(CD_NN)
[uncategorized] ~104-~104: Use a comma before ‘and’ if it connects two independent clauses (unless they are closely connected and short).
Context: ...our website will now be fully functional and you can authenticate with Kinde! ...
(COMMA_COMPOUND_SENTENCE)
🔇 Additional comments (2)
src/content/docs/developer-tools/guides/deploy-on-vercel.mdx (2)
1-8: LGTM! Frontmatter is well-structured.
The metadata is properly formatted and includes all necessary fields.
108-111: LGTM! Comprehensive support information.
The support section provides multiple channels for assistance and includes active community links.
| <Aside> | ||
|
|
||
| Tip: Use [wildcards in your callbacks](https://docs.kinde.com/get-started/connect/callback-urls/?r=search#wildcards-in-callback-urls) to circumvent Vercel’s | ||
|
|
||
| </aside> |
There was a problem hiding this comment.
Complete the wildcards documentation
The aside about using wildcards in callbacks is incomplete. It starts mentioning Vercel but doesn't complete the thought or provide the actual guidance.
Would you like me to help complete this section with proper documentation about using wildcards with Vercel preview deployments?
|
|
||
| Tip: Use [wildcards in your callbacks](https://docs.kinde.com/get-started/connect/callback-urls/?r=search#wildcards-in-callback-urls) to circumvent Vercel’s | ||
|
|
||
| </aside> |
There was a problem hiding this comment.
@clairekinde11 the lowercase </aside> is breaking the build here.
Fixed Aside Removed ambiguous note
Deploying kinde-docs-previews with
|
| Latest commit: |
ed08df9
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://14a01915.kinde-docs-previews.pages.dev |
| Branch Preview URL: | https://feat-kinde-and-vercel-guide.kinde-docs-previews.pages.dev |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (6)
src/content/docs/developer-tools/guides/deploy-on-vercel.mdx (6)
18-18: Update framework spelling to "Next.js"The official spelling of the framework is "Next.js" rather than "NextJS".
-... such as the [NextJS starter kit] +... such as the [Next.js starter kit]🧰 Tools
🪛 LanguageTool
[uncategorized] ~18-~18: The official spelling of this programming framework is “Next.js”.
Context: ...ses Kinde OR a starter kit such as the [NextJS starter kit](https://github.com/kinde-s...(NODE_JS)
16-18: Consider adding free tier informationIt would be helpful to mention any limitations or restrictions of the free tiers for both Vercel and GitHub accounts, as this could affect users' deployment choices.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~18-~18: The official spelling of this programming framework is “Next.js”.
Context: ...ses Kinde OR a starter kit such as the [NextJS starter kit](https://github.com/kinde-s...(NODE_JS)
27-27: Add context about the .env file's purposeConsider explaining why the
.env.local.samplefile is important and what kind of configuration it contains. This helps users understand its significance in the deployment process.
78-86: Clarify environment variable structureConsider enhancing this section by:
- Using a table or list format to show the mapping between Kinde and Vercel variables
- Including example values (with sensitive data redacted)
- Explaining the format requirements for URLs (e.g., must include
https://)
89-91: Add information about deployment branchesConsider adding information about:
- How these changes affect different deployment branches (production/preview)
- Whether users need to redeploy all branches
- How to verify the changes took effect
102-103: Fix grammatical issues in the support sectionApply these grammatical corrections:
-Remember, if you need any assistance with getting Kinde connected reach out to +Remember, if you need any assistance with getting Kinde connected, reach out to🧰 Tools
🪛 LanguageTool
[uncategorized] ~102-~102: Possible missing comma found.
Context: ... need any assistance with getting Kinde connected reach out to [[email protected]](mailto...(AI_HYDRA_LEO_MISSING_COMMA)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
src/content/docs/developer-tools/guides/deploy-on-vercel.mdx(1 hunks)
🧰 Additional context used
🪛 LanguageTool
src/content/docs/developer-tools/guides/deploy-on-vercel.mdx
[uncategorized] ~18-~18: The official spelling of this programming framework is “Next.js”.
Context: ...ses Kinde OR a starter kit such as the [NextJS starter kit](https://github.com/kinde-s...
(NODE_JS)
[style] ~25-~25: This phrasing can be overused. Try elevating your writing with a more formal alternative.
Context: ...o clone the repo to your GitHub account if you want.) 3. Enter a name for the new repositor...
(IF_YOU_WANT)
[style] ~37-~37: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...lect Import next to the project you want to deploy. 5. On the *Configure Project...
(REP_WANT_TO_VB)
[grammar] ~73-~73: Possible agreement error. The noun ‘menu’ seems to be countable.
Context: ...onment variable by selecting three dots menu, then selecting Edit. ![Upd...
(CD_NN)
[uncategorized] ~98-~98: Use a comma before ‘and’ if it connects two independent clauses (unless they are closely connected and short).
Context: ...our website will now be fully functional and you can authenticate with Kinde! ...
(COMMA_COMPOUND_SENTENCE)
[uncategorized] ~102-~102: Possible missing comma found.
Context: ... need any assistance with getting Kinde connected reach out to [[email protected]](mailto...
(AI_HYDRA_LEO_MISSING_COMMA)
| 6. Open the local `.env` file from your project and copy all the contents. | ||
| 7. Paste the details into the **Environment Variables** section in Vercel. Vercel will autofill your keys and values for you. | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add security warning about environment variables
Consider adding a security note about handling sensitive environment variables:
- Warn users not to commit the
.envfile to version control - Emphasize the importance of keeping the Client Secret secure
- Mention that environment variables in Vercel are encrypted at rest
| 6. Scroll to the **Callback URLs** section. This is where you enter the Vercel domain details from the previous step. | ||
| 7. Your domain details will be something like `<NAME_OF_YOUR_PROJECT>.vercel.app`, for example `https://vercel-nextjs-kinde.vercel.app`. Enter this in the **Application homepage URI** field, the **Application login URI** field, and the **Allowed logout redirect URLs** field. | ||
| 8. If you were using `https://localhost:3000`, replace that portion with your new domain in the **Allowed callback URLs** field. If you're using a starter kit, this might be: `https://vercel-nextjs-kinde.vercel.app/dashboard`. |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add information about preview deployment URLs
The callback URL configuration should include information about handling Vercel preview deployments:
- Mention that Vercel creates unique URLs for preview deployments (e.g.,
pr-123-project-name.vercel.app) - Explain how to use wildcards in callback URLs to support preview deployments
- Add a note about security considerations when using wildcards
A few minor updates for clarity
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (4)
src/content/docs/developer-tools/guides/deploy-on-vercel.mdx (4)
18-18: Update framework spelling to "Next.js"The official spelling of the framework is "Next.js" rather than "NextJS".
-... OR a starter kit such as the [NextJS starter kit] +... OR a starter kit such as the [Next.js starter kit]🧰 Tools
🪛 LanguageTool
[uncategorized] ~18-~18: The official spelling of this programming framework is “Next.js”.
Context: ...ses Kinde OR a starter kit such as the [NextJS starter kit](https://github.com/kinde-s...(NODE_JS)
27-27: Add context about the environment file's purposeConsider adding a brief note explaining that this file contains template environment variables that will be needed for the Vercel deployment.
-4. Open the directory of the new repo and find the file called **`.env.local.sample`**. You will need this later. +4. Open the directory of the new repo and find the file called **`.env.local.sample`**. This file contains template environment variables that you'll need to configure in Vercel later.
77-84: Improve environment variables organizationConsider grouping the variables in a more structured format using a table or bullet points with descriptions for each variable.
For example:
-5. Change the variables as follows, using Kinde values: - - KINDE_CLIENT_ID - - KINDE_CLIENT_SECRET - - KINDE_ISSUER_URL (Domain in Kinde) -6. Change the variables as follows, using Vercel values: - - KINDE_SITE_URL - - KINDE_POST_LOGOUT_REDIRECT_URL - - KINDE_POST_LOGIN_REDIRECT_URL +5. Update the following environment variables: + + **Kinde Authentication Variables:** + | Variable | Description | Source | + |----------|-------------|--------| + | KINDE_CLIENT_ID | Your application's client ID | Kinde App Keys | + | KINDE_CLIENT_SECRET | Your application's client secret | Kinde App Keys | + | KINDE_ISSUER_URL | Your Kinde domain URL | Kinde Domain | + + **Vercel Deployment Variables:** + | Variable | Description | Value | + |----------|-------------|-------| + | KINDE_SITE_URL | Your Vercel deployment URL | Your Vercel URL | + | KINDE_POST_LOGOUT_REDIRECT_URL | URL to redirect after logout | Your Vercel URL | + | KINDE_POST_LOGIN_REDIRECT_URL | URL to redirect after login | Your Vercel URL/dashboard |
91-95: Fix Aside element formattingThe Aside element has inconsistent spacing and formatting.
- <Aside> - - Do not select **Use existing Build Cache** as that will preserve the old environment variables - - </Aside> +<Aside> + Do not select **Use existing Build Cache** as that will preserve the old environment variables +</Aside>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
src/content/docs/developer-tools/guides/deploy-on-vercel.mdx(1 hunks)
🧰 Additional context used
🪛 LanguageTool
src/content/docs/developer-tools/guides/deploy-on-vercel.mdx
[uncategorized] ~18-~18: The official spelling of this programming framework is “Next.js”.
Context: ...ses Kinde OR a starter kit such as the [NextJS starter kit](https://github.com/kinde-s...
(NODE_JS)
[style] ~25-~25: This phrasing can be overused. Try elevating your writing with a more formal alternative.
Context: ...o clone the repo to your GitHub account if you want.) 3. Enter a name for the new repositor...
(IF_YOU_WANT)
[style] ~37-~37: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...lect Import next to the project you want to deploy. 5. On the *Configure Project...
(REP_WANT_TO_VB)
[grammar] ~72-~72: Possible agreement error. The noun ‘menu’ seems to be countable.
Context: ...onment variable by selecting three dots menu, then selecting Edit. ![Upd...
(CD_NN)
[uncategorized] ~97-~97: Use a comma before ‘and’ if it connects two independent clauses (unless they are closely connected and short).
Context: ...our website will now be fully functional and you can authenticate with Kinde! ...
(COMMA_COMPOUND_SENTENCE)
🔇 Additional comments (2)
src/content/docs/developer-tools/guides/deploy-on-vercel.mdx (2)
42-44: Add security warning for environment variables
The past review comment about security warnings for environment variables is still valid. Please add a security note about:
- Not committing
.envfiles to version control - Keeping Client Secret secure
- Vercel's encryption of environment variables
60-62: Add guidance for preview deployments
The past review comment about handling preview deployments is still valid. Please add information about:
- Vercel's preview deployment URLs
- Using wildcards in callback URLs
- Security considerations for wildcards
New topic and update from blog.
Blog can be removed from Kinde.com
Summary by CodeRabbit