[Cloudflare One] Get Started: Replace VPN — Device to Network quick-start (PCX-20915)#28716
Conversation
Refactor the Get Started page from a flat generic setup page into an intent-based router matching the CF1 dashboard onboarding UX. - Convert setup.mdx to setup/index.mdx with universal prereqs + use-case cards - Add Replace VPN decision page with 3 scenario cards - Add full Device to Network quick-start (PCX-20915) - Add skeleton pages for Network to Network (PCX-20917) and Device to Device (PCX-20916) - Preserves /cloudflare-one/setup/ URL (directory index)
Bridge uncertain users to existing conceptual content without adding positioning copy to the get-started flow.
|
This PR requires additional review attention because it affects the following areas: RedirectsThis PR changes current filenames or deletes current files. Make sure you have redirects set up to cover the following paths:
|
|
This pull request requires reviews from CODEOWNERS as it changes files that match the following patterns:
|
|
Draft for structural review only — skeleton pages are placeholders. Looking for feedback on the intent-based Get Started approach before filling in remaining content |
No redirect needed — setup.mdx was converted to setup/index.mdx, which serves the same /cloudflare-one/setup/ URL. |
MDX parses <!-- --> as invalid JSX. Use {/* */} syntax instead.
- high-availability → configure-tunnels/tunnel-availability - private-dns → private-net/cloudflared/private-dns - gateway-inspection → http-policies/tls-decryption
… page Bridge returning users from the Overview tab to the onboarding flows.
…ck-start Both sidebar entries now land users on the same decision page. The quick-start page links to the full learning path for deeper content.
…wizard (PCX-20915) - Rewrote device-to-network.mdx to mirror the exact 6-step Get Started onboarding flow in the Cloudflare One dashboard - Removed production-oriented steps (IdP config, Split Tunnels, Gateway proxy, access policies) that belong in the learning path, not the quick-start - Updated setup landing page: moved dashboard reference from intro to card section, aligned heading with dashboard UX, removed production hardening language
- Remove skeleton pages for network-to-network and device-to-device (will be added in follow-up PRs) - Remove corresponding cards and Details accordion from replace-vpn navigation page - Keep setup landing page cards as-is (all link to existing content)
codyanthony850
changed the title
|
Scope update: Narrowed this PR to just the Device to Network quick-start (PCX-20915) for faster review and merge. What changed:
What stays the same:
This PR no longer has any placeholder/skeleton content. |
- Align implementation guides card titles with get-started landing page - Replace code block flow diagram with prose in How it works section - Promote 'You need' list to standard Prerequisites heading - Fix future tense to present tense throughout - Break multi-page navigation into separate procedural steps - Genericize tunnel token placeholder in install command example - Replace AI-generated troubleshooting with links to canonical docs - Use standard 'refer to' link pattern for recommended next steps - Remove unused Details component import
|
cc @caley-b for visibility — no review approval needed from you on this one (feedback welcome though if you have any). @alexamavrogianis assigned as reviewer for UX/content alignment with the CF1 dashboard onboarding flow. Alexa, if there is a CF1 PM who should also review, let me know and I will add them. |
|
|
||
| import { CardGrid, LinkTitleCard } from "~/components"; | ||
|
|
||
| Cloudflare Zero Trust replaces traditional VPNs by routing private traffic through Cloudflare's global network. Instead of granting users full network access after login, Zero Trust verifies every request based on identity and context — reducing your attack surface and improving performance for remote users. For more background, refer to [Why should you replace your VPN?](/learning-paths/replace-vpn/concepts/why-vpn/) |
There was a problem hiding this comment.
Probably want to clarify this intro a little bit. This path doesn't actually walk them through how to verify every request. Maybe something along the lines of: "Cloudflare One leverages Cloudflare's global network and Zero Trust Network Access (ZTNA) to replace traditional VPNs. Once you securely connect your devices and resources to Cloudflare, you can set policies to verify every request based on identity and context — reducing your attack surface and improving performance for remote users."
There was a problem hiding this comment.
Great callout - thanks for the catch! I'll update with your suggested edit.
| href="/cloudflare-one/setup/replace-vpn/device-to-network/" | ||
| icon="laptop" | ||
| > | ||
| Connect remote users running the WARP client to private networks and |
There was a problem hiding this comment.
We should assume that at this stage users aren't familiar with our product names/what WARP/Cloudflare Tunnel are.
May also be nice to use some of the taglines we use in the dash here like "Best for remote access to private networks." I find that they help conceptualize use cases when comparing multiple options.
There was a problem hiding this comment.
Done — removed WARP/Tunnel jargon from the card description and led with the user benefit instead. Also aligned the implementation-guides card to match.
|
|
||
| ## How it works | ||
|
|
||
| A Cloudflare Tunnel connects your private network to Cloudflare through an outbound-only connection. The WARP client on each user device routes traffic through Cloudflare and into the tunnel, so users can reach internal resources from anywhere. |
There was a problem hiding this comment.
This is great, but may also be helpful to provide a bit more thorough of a definition for Tunnel and WARP. We have some more in depth "How it works" content in the onboarding flows in dash, but they are underneath a "View details" button. Would be great to have that somewhere AI could pick up easier.
There was a problem hiding this comment.
Good call — expanded using the "how it works" content within the dash. Also linked to the Cloudflare Tunnel product page for the first mention.
|
|
||
| 1. Open the WARP client. On macOS, select the Cloudflare icon in your status bar. | ||
| 2. Go to **Preferences** > **Account** > **Login to Cloudflare Zero Trust**. | ||
| 3. Enter your team name when prompted. The dashboard displays your team name on this screen for easy reference. |
There was a problem hiding this comment.
May also be worth mentioning that they can find and change their team name in Settings.
There was a problem hiding this comment.
Added — appended the Settings path to find/change team name: Settings > Team name > Edit.
|
|
||
| ## Recommended next steps | ||
|
|
||
| After verifying your connection, the dashboard suggests these next steps: |
There was a problem hiding this comment.
Don't think we need to call out that the "dashboard" suggest these next steps. Should just present them as best practices/recommendations regardless.
There was a problem hiding this comment.
Agreed — removed the dashboard framing and rewrote with actionable "why" context. Gateway policies now explains that all enrolled devices can reach the full network by default, and Access now explains the identity-based restriction benefit.
- Add value framing to intro (VPN security risks and performance) - Explain why outbound-only tunnel matters (no inbound ports) - Link WARP client on first mention - Add context for IP range step and helper note for SMB users - Define cloudflared as connector software - Rewrite enrollment step to replace jargon with plain language - Add context for team name (what it is, where it came from) - Replace em dashes with colons throughout
|
|
||
| On your device, complete the WARP installation wizard. Then connect WARP to your Zero Trust organization. | ||
|
|
||
| 1. Open the WARP client. On macOS, select the Cloudflare icon in your status bar. |
There was a problem hiding this comment.
We may need to include other OSes as well (Windows, Linux, Android, iOS, etc.). There may be a reuse opportunity here: https://developers.cloudflare.com/learning-paths/secure-internet-traffic/connect-devices-networks/install-agent/#install-warp
There was a problem hiding this comment.
Good point — I evaluated the existing enrollment partials but they include download steps that overlap with Step 4 and have a different flow than the dashboard wizard. Instead, I took a hybrid approach: added Windows system tray alongside the macOS status bar reference, and linked to the Manual deployment page at the top of Step 5 for comprehensive OS-specific instructions (including iOS, Android, ChromeOS, and Linux). This keeps the quick-start focused while making the full instructions easily discoverable.
There was a problem hiding this comment.
Also updated Step 3 (Deploy your Tunnel) to acknowledge that the dashboard has both an OS and architecture dropdown, and that Windows and Linux get a different install flow than macOS (download link + command rather than Homebrew). Linked to the Downloads (/cloudflare-one/networks/connectors/cloudflare-tunnel/downloads/) page for the full list of OS-specific options.
- Rewrite replace-vpn intro to use Cloudflare One branding and ZTNA framing - Align card descriptions across replace-vpn and implementation-guides pages - Expand How it works with network connector and device agent definitions - Add team name Settings path for discoverability - Add Windows system tray reference and manual deployment link in Step 5 - Rewrite next steps with why context instead of dashboard-suggests framing
- Add architecture selection (dashboard has OS + architecture dropdowns) - Remove incorrect winget/package manager claims for Windows/Linux - Accurately describe dashboard behavior: download link + install command - Keep Windows Command Prompt and terminal window text matching dashboard verbatim - Link to Downloads page for comprehensive reference
- Use 'service' instead of 'software' for cloudflared description - Move team name Settings path to note callout under Step 5 - Reorder Step 6 sentence for clarity
Reached out to @ajgrstnhbr today for review. Review update from AJ in Google Chat: "I think this looks great!" |
…oss-link to device-to-network - Add GlossaryTooltip for Cloudflare Tunnel and WARP client on first mention - Change 'device agent' to 'app' for plain language consistency - Break 4-sentence How it works paragraph into two 2-sentence paragraphs - Add Cloudflare account prerequisite with link to parent setup page - Add parent cross-link for other connection scenarios (scales to future flows) - Replace 'device posture' with 'network attributes' in Gateway policies description - Remove inaccurate 'multi-site deployments' from learning path references
|
|
||
| ## Step 2: Set your Tunnel's IP range | ||
|
|
||
| Add the IP range of your private network to the tunnel. This defines which internal resources your remote users can reach. Your tunnel accepts traffic to this range from devices enrolled in your Zero Trust organization. |
There was a problem hiding this comment.
| Add the IP range of your private network to the tunnel. This defines which internal resources your remote users can reach. Your tunnel accepts traffic to this range from devices enrolled in your Zero Trust organization. | |
| Add the IP range of your private network to the tunnel. This defines which internal resources your remote users can reach. Your Tunnel accepts traffic to this range from devices enrolled in your Zero Trust organization. |
There was a problem hiding this comment.
If you're still referring to the app Cloudflare Tunnel. If you're talking about the tunnel the app creates, ignore me
There was a problem hiding this comment.
Applied — capitalized Tunnel as a product name reference. Included in the device-to-device PR since this one is already merged.
|
|
||
| ## Step 3: Deploy your Tunnel | ||
|
|
||
| Install the `cloudflared` connector on a device in your private network and run the tunnel. This service creates the secure connection between your network and Cloudflare. |
There was a problem hiding this comment.
same question here
There was a problem hiding this comment.
Good question — here 'run the tunnel' refers to the action of running the tunnel instance (starting the cloudflared service), not to the Cloudflare Tunnel product. Keeping lowercase to distinguish the action from the product name.
| :::note | ||
|
|
||
| For in-depth guidance on policy design and device posture checks, refer to the [Replace your VPN learning path](/learning-paths/replace-vpn/concepts/). |
There was a problem hiding this comment.
| :::note | |
| For in-depth guidance on policy design and device posture checks, refer to the [Replace your VPN learning path](/learning-paths/replace-vpn/concepts/). | |
| :::note | |
| For in-depth guidance on policy design and device posture checks, refer to the [Replace your VPN learning path](/learning-paths/replace-vpn/concepts/). |
| :::note | ||
|
|
||
| For in-depth deployment guides that cover policy design and advanced configuration, refer to [Implementation guides](/cloudflare-one/implementation-guides/). |
There was a problem hiding this comment.
| :::note | |
| For in-depth deployment guides that cover policy design and advanced configuration, refer to [Implementation guides](/cloudflare-one/implementation-guides/). | |
| :::note | |
| For in-depth deployment guides that cover policy design and advanced configuration, refer to [Implementation guides](/cloudflare-one/implementation-guides/). |
5 participants
Refactors the Cloudflare One Get Started page into an intent-based landing page that mirrors the CF1 dashboard onboarding UX, and adds the first complete quick-start guide for the "Replace your VPN — Device to Network" flow.
setup.mdxtosetup/index.mdx— universal prerequisites (account + Zero Trust org) at the top, then a CardGrid of 4 use-case tiles matching the dashboard categories. Preserves the/cloudflare-one/setup/URL.setup/replace-vpn/index.mdx) with intro context and a link to the "Why replace your VPN?" conceptual page.setup/replace-vpn/device-to-network.mdx, PCX-20915) — mirrors the exact 6-step Get Started onboarding wizard in the Cloudflare One dashboard: Assign a Tunnel → Set IP range → Deploy Tunnel → Enroll devices → Complete WARP setup → Verify connection. Includes troubleshooting and recommended next steps.implementation-guides/replace-vpn.mdxredirect and card to point to the new quick-start instead of the learning path.Scope was narrowed from the original draft (which included skeleton pages for Network to Network and Device to Device) to just the Device to Network flow for faster review and merge. Additional Replace VPN scenarios will follow in subsequent PRs.
Related: PCX-20931, PCX-20915