Skip to main content

Web Vault

Requirements​

SSL Certificate​

It's recommended to generate a valid SSL certificate for local development rather than using the shared development cert. This will prevent browser warnings about invalid certificates and properly support WebAuthn which is blocked on websites with certificate errors. Please follow the mkcert installation instructions.

# Generate and install root CA
mkcert --install

# Generate cert valid for localhost, 127.0.0.1 and bitwarden.test
mkcert -cert-file dev-server.local.pem -key-file dev-server.local.pem localhost 127.0.0.1 bitwarden.test

Build Instructions​

  1. Build and run the Web Vault.
cd apps/web
npm run build:oss:watch
 
cd apps/web
npm run build:bit:watch

Which will target the local bitwarden instance. See Official Server for information on how to target official servers.

  1. Open your browser and navigate to https://localhost:8080. You should see the Bitwarden Log In Screen.

  2. If you'd like to take this a bit further, start your local server and have MailCatcher set up. Now let's create an account and verify it.

    • Create a new account. This could be a fake email
    • Log into the new account
    • Click on Verify Email Address
    • Navigate to http://localhost:1080/
    • Open the no reply email and verify your email address
info

You can also run the Web Vault in self-hosted mode by using the build:bit:selfhost:watch and build:oss:selfhost:watch commands.

Configuring API endpoints​

By default, the Web Vault will use your local development server (running at localhost on the default ports). You can use the official Bitwarden server instead or configure custom endpoints.

Official Server​

To use the official Bitwarden server, follow the build instructions above, but run the Web Vault using the following command:

ENV=cloud npm run build:oss:watch
 
ENV=cloud npm run build:bit:watch

Custom Endpoints​

You can manually set your API endpoint settings by creating a config/local.json file with the following structure:

{
  "dev": {
    "proxyApi": "<http://your-api-url>",
    "proxyIdentity": "<http://your-identity-url>",
    "proxyEvents": "<http://your-events-url>",
    "proxyNotifications": "<http://your-notifications-url>",
    "allowedHosts": ["hostnames-to-allow-in-webpack"]
  },
  "urls": {}
}
  • dev: Proxies traffic from ex. /api -> <http://your-api-url>.
  • urls: Directly calls the remote service1. Note: This can cause issues with CORS headers.

Footnotes​

  1. urls adhere to the type definition in EnvironmentService. ↩