Cloudflare Tunnels

This guide will show you how to use Cloudflare Tunnels for SnailyCAD. With Cloudflare Tunnels you can use a domain with an SSL certificate for your SnailyCAD instance.

Requirements

• A domain name with Cloudflare DNS
• A SnailyCAD instance
• A Cloudflare account

Getting started

1. Login to Cloudflare

1. Navigate to the Cloudflare Zero Trust Dashboard and login with your Cloudflare account.
2. in the dashboard under your account → Zero Trust (one.dash.cloudflare.com) → Networks → Tunnels

2. Create a tunnel for system

warning

You are only able to create 1 tunnel per system.

1. Click on Create a Tunnel
2. Enter a name for your tunnel (e.g.: "SnailyCAD Tunnel")
3. Follow the instructions on the page to install Cloudflared on your server (Install Connector).
4. Once connected, click Next

3. Create Hostname for SnailyCAD API

1. Enter the configuration for your domain:

   • Subdomain: This is the subdomain you want to use for your SnailyCAD API. For example, if you want to use cad-api.example.com then you would enter cad-api here.

   • Domain: The domain connected to your Cloudflare account. For example, if you want to use cad-api.example.com then you would enter example.com here.

   • Path: Leave empty.

   • Service Type: Select HTTP

   • URL: localhost:8080

2. Click Save Tunnel

3. Head back to the Tunnels dashboard.

4. Create Hostname for SnailyCAD Client

1. Click on the tunnel you just created

2. Click on the Configure button

3. Navigate to the Public Hostname tab

4. Click on Add a public hostname

5. Enter the configuration for your domain:

   • Subdomain: This is the subdomain you want to use for your SnailyCAD API. For example, if you want to use cad.example.com then you would enter cad here.

   • Domain: The domain connected to your Cloudflare account. For example, if you want to use cad.example.com then you would enter example.com here.

   • Path: Leave empty.

   • Service Type: Select HTTP

   • URL: localhost:3000

6. Click Save hostname

5. Configuring SnailyCAD

1. Open your SnailyCAD .env file.

   • CORS_ORIGIN_URL: Set this to your SnailyCAD Client domain. For example, https://cad.example.com
   • NEXT_PUBLIC_CLIENT_URL: Set this to your SnailyCAD Client domain. For example, https://cad.example.com
   • NEXT_PUBLIC_PROD_ORIGIN: Set this to your SnailyCAD API domain. For example: https://cad-api.example.com/v1 (Note: You need to add /v1 at the end of the URL)

2. Follow this guide to properly update your .env file

3. All Done! 🎉