Introducing lcl.host

Introducing lcl host

Ben Burkert & Daniel Bernier
March 20, 2024

Today we are launching lcl.host, a free devtool for web developers to quickly setup & use HTTPS locally. With lcl.host, you get a secure browser context in development that matches your production environment. Eliminate mixed asset issues, CORS errors, and secure cookie misconfiguration before they cause problems in production.

Read more about the benefits of using HTTPS in development, and give it a try: it only takes 2 minutes to switch your app to HTTPS.

Why We Built lcl.host

Anchor provides managed private certificate authorities (CAs) for internal TLS. As both a security product and hosted SaaS application, we put a lot of effort into secure application development. From handling the private keys that sign certificates, to managing fine-grained access credentials in the dashboard, we take a rigorous approach to secure development on all layers of our stack. Keeping our development, staging, and production environments in sync (aka dev/prod parity) helps to prevent bugs that would otherwise only show up in production.

For full dev/prod parity, we use HTTPS to get a secure browser context, not just the secure-ish special case localhost browser context. Before building lcl.host, we used self-signed app.localhost certificates, but those have a few downsides:

  • All team members had to manually provision (and re-provision) their own self-signed certificates.

  • The self-signed certificates had to be manually added to each trust store on the system

  • app.localhost domains don't work everywhere, so /etc/hosts entries or a development DNS server were required for non-browser clients (like curl).

  • Running apps in local containers required constant certificate re-provisioning and trust store updates.

Since we already used Anchor private CAs internally between development services, we knew it could solve some of these problems. But a private CA alone is not a complete solution. So we built lcl.host, and we think it’s the best way to setup and use HTTPS with your apps in development:

  • ACME-powered automated certificate provisioning and renewal instead of troublesome manual processes.

  • Hostnames that just work everywhere, with no custom configuration required.

  • The same secure browser context to match production, without the browser quirks in the localhost context.

  • Works well inside, outside, and even between containers (thanks to Anchor’s powerful packages features).

  • Fast setup and batteries included, no certificate or encryption expertise required.

We’re excited to share it with you! To setup HTTPS in development, install the Anchor CLI toolchain, run anchor lcl, and follow the instructions. That’s it!

Loading code block...

Or install from source if Homebrew isn't an option.

Loading... Use lcl.host to add HTTPS to a Next.js app

How lcl.host Works

lcl.host combines an Anchor managed private CA for your personal development environment, the lcl.host DNS zone to resolve subdomains to your local system, and the Anchor CLI to manage your local trust stores.

Personalized Private CA

When you sign up for an Anchor account, we automatically provision a “localhost” CA for you. This dedicated private CA provides portability between development environments and remains 100% free to use with an unlimited number of development apps. This CA has some restrictions though: it can only issue certificates for subdomains of lcl.host and localhost, but that’s all you need for local development.

The anchor lcl mkcert command is the easiest way to get development certificates using Anchor's zero-challenge ACME flow. Other ACME client tools like certbot and acme.sh work well too, but we recommend integrating an ACME client into your application to allow automatic certificate provisioning and renewal. Don't worry, we will walk you through that too when you run anchor lcl setup.

lcl.host DNS Zone

All lcl.host subdomains resolve to 127.0.0.1, the same address as localhost. These subdomains work without HTTPS too, making them a drop-in replacement for localhost. To use them with HTTPS you will need a certificate for the subdomain that is trusted by your system. Your personal CA handles the first part, and the Anchor CLI takes care of your system's trust stores.

Trust Stores

A trust store manages a set of root certificates (aka trust anchors) which browsers and other clients use to verify certificates presented by servers. Some trust stores are integrated into the operating system (Keychain on MacOS), others are file/directory based (/etc/ssl/certs/ on Debian systems), or even a custom database format (like certdb for NSS/Firefox). Keeping every trust store up to date used to be a lot of recurring manual work, but the Anchor CLI automates the whole process.

After signing in, the Anchor CLI fetches the list of expected CA certificates for your development environment, checks for them in your local trust stores, and walks you through any required changes. After this quick and easy install, your certificates will be trusted everywhere on your system.

There's a lot that's required to setup HTTPS in development. The magic of lcl.host is that it's all handled for you, so you can get back to building secure apps that work seamlessly in development and production.

Try Now

Install the Anchor CLI and run anchor lcl from your application directory, and have local HTTPS in no time!

Related Articles