In traditional LAMP setups, it was common to create a preview environment by placing /prev or test.example.com behind Basic authentication.
However, with recent headless CMS architectures using Vercel or Cloudflare Pages, many people are puzzled: "After building, a preview URL is generated, but is this staging?" and "Can I even set up password protection (Basic authentication)?"
The short answer: Yes, preview environments exist, and they can be properly protected!
For example, Vercel and Cloudflare Pages automatically generate a preview URL for each Git branch. In other words, they automatically create a fresh staging environment every time. If you manage your source code with Git, simply create a new branch and push it, and a URL for review is issued right away. There is zero need to manually upload files to a staging environment.
"But won't these preview URLs be exposed to the public?"
Don't worry. Access restrictions are easy to configure, as shown below.
Example with Cloudflare Pages
With Cloudflare Pages, you can restrict access to preview environments.
Basic Authentication
- You can set up authentication with a username and password, similar to a traditional preview environment. Depending on your configuration, this may be the option many people choose.
- However, Basic authentication may not work well in some cases, such as with a hybrid setup that combines SSG (Static Site Generation) and SSR (Server-Side Rendering).
Cloudflare Access
- If Basic authentication is not a good fit, or if you need more flexible access control, use Cloudflare Access.
You can configure the following settings through the GUI (the free plan is limited to 50 users).
- Allow only users with specific email domains, such as
example.com - Allow only users with specified email addresses
- Google account authentication (also available with Google Workspace integration)
- IP address restrictions
- Issuing temporary access PINs
Example with Vercel
Vercel also supports protection for preview environments.
- Vercel Authentication restricts access to team members only
- Password protection (available on Pro plans and above)
- You can also apply different restrictions to production and preview environments.
With Vercel Authentication, you can limit access to project members only, create shareable links, and more.
By the way, Vercel's preview environment protection used to be difficult to use, since Password protection was a separate paid add-on ($150/mo). Deployment Protection is now available on all plans!︎
https://vercel.com/docs/deployment-protection
.png?fm=avif)
In short, this is what it means!
Previous approach | The world of Jamstack / Vercel / Cloudflare Pages |
|---|---|
| Branch-specific preview URLs + password, email authentication, IP restrictions, and more |
Manual upload | Automatic deployment with git push |
Access restriction settings and management can be somewhat cumbersome | Access restrictions can be configured relatively easily through a GUI and other tools |
"Jamstack looks great, but does it have proper preview environments?" "Is it secure?" Today's staging environments are "preview environments" automatically generated for each branch. Access restrictions can also be configured flexibly and easily.
You can achieve the same peace of mind as before, but more easily and more smoothly. Be sure to try it on your next project.
Starting out in DTP and moving into the web, he now handles markup, frontend, direction, and accessibility alike. A "master of all trades" who has been versatile since Liberogic's early days and is now a walking encyclopedia of the company. Lately he has been hooked on exploring efficiency through prompts, asking, "Can't we rely more on AI for accessibility work?" Both his skills and his thinking are still evolving.
Ayumu Futamata
IAAP Certified Web Accessibility Specialist (WAS) / Markup Engineer / Frontend Engineer / Web Director