Web Vault
Requirements
- Before you start, you must complete the Clients repository setup instructions.
- If you want to develop against a local server instance, see the Server Setup Guide.
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
- Build and run the Web Vault.
cd apps/web
npm run build:oss:watch
Which will target the local bitwarden instance. See Official Server for information on how to target official servers.
-
Open your browser and navigate to
https://localhost:8080
. You should see the Bitwarden Log In Screen. -
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
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
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
-
urls
adhere to the type definition inEnvironmentService
. ↩