# Setting up SaaS development environment with LocalCan

###### Learn how to create a production-like development environment for your SaaS application using LocalCan. This guide covers setting up local domains, custom domains, OAuth authentication, and debugging tools.

<a href="https://www.youtube.com/watch?v=MgbeqqIwXbo" target="_blank" title="Watch this guide on Youtube"><img src='https://assets.localcan.com/website/docs/guides/setting-up-saas-development-environment-with-localcan/youtube.webp' width='1280' height='720' alt='Ultimate Dev Setup for SaaS in 2025 (Dev Domain, OAuth, Webhooks & HTTPS Made Easy)' /></a>

#### Prerequisites
- LocalCan installed on your computer
- Registered domain, with access to a DNS dashboard
- A Google Cloud Console account (for OAuth setup)

#### Step 1. Create a local domain

1. Open LocalCan and click the "Add Domain" button
2. Select "Domain with reverse proxy" type (enables automatic HTTPS)
3. Enter your desired domain name
4. Set target server, for example: `127.0.0.1` or `localhost`. Test the connection using the **Test** button to make sure target server is reachable.

> [!NOTE]
> Local domains are available on your entire local network, allowing testing on mobile devices with HTTPS support.

#### Step 2. Set up a custom domain

1. Click the **Public URL** pill-shaped button next to your domain
2. Select **Add custom domain**
3. Enter your subdomain name
4. Add DNS record in your provider's dashboard:
   - Type: CNAME
   - Data: [LocalCan provided value]
   - TTL: 1800 (recommended for faster verification)

> [!WARNING/Note for Cloudflare users]
> When adding this CNAME record on Cloudflare dashboard, set the Proxy status to **DNS only** instead of **Proxied**, otherwise LocalCan won't be able to verify the domain.

#### Step 3. Configure Google OAuth

1. Navigate to [Google Cloud Console](https://console.cloud.google.com/) and click on **APIs & Services**, then **Credentials**
2. Click **Create Credentials** -> **OAuth client ID**
3. Select **Web Application** as type
4. Name your client (e.g., "Development OAuth Client")
5. Add your callback URL which includes your new custom domain
6. Save the **Client ID** and **Client Secret** as environment variables in your development environment. Ideally, you should use a `.env` file and add it to your `.gitignore` file, so it's not accidentally committed to your repository.

#### Step 4. Traffic inspection and debugging

LocalCan provides powerful traffic inspection tools:

1. In LocalCan, click **Inspect Traffic** to view all requests
2. Filter requests by domain, by selecting it in the dropdown menu
3. Use [Minimatch](https://github.com/isaacs/minimatch) syntax for advanced filtering:
   - Pattern: `[method] [path] [status]`
   - Example: `* ** 3??` (shows all 300-level responses)
4. View detailed request and response information
5. Replay requests with the **Replay** button

##### Debugging features:
- Full request/response inspection
- Webhook testing
- Request replay capability

#### Benefits

- Local HTTPS domain support (`.local`) on your local network
- Public URL on your custom domain or LocalCan provided domain
- Production-like environment for testing (OAuth, webhooks, secure cookies etc.)
- Traffic inspection tools

This setup ensures your development environment closely mirrors production, reducing deployment surprises and streamlining the development process.

#### Troubleshooting

- DNS changes may take a few minutes to several hours to propagate
- Verify CloudFlare proxy settings if using CloudFlare
- Ensure environment variables are properly set for OAuth credentials
- Check LocalCan connection status if experiencing issues