Jenkins

Before any Bubble configuration, confirm that your Jenkins server is reachable from the public internet. Open a browser not connected to your corporate VPN or office network and navigate to https://jenkins.company.com/api/json?tree=jobs[name,color] (replace with your Jenkins URL). If you see a JSON response, Jenkins is accessible. If you see a connection timeout, Jenkins is not publicly reachable and you need to resolve this first. Common solutions: (1) configure nginx or Apache as a reverse proxy on a publicly accessible server that forwards to the internal Jenkins instance, (2) use Cloudflare Tunnel (cloudflared daemon running on the Jenkins server) to create a public HTTPS URL without opening firewall ports — this is often the fastest path with minimal IT friction, (3) if Jenkins runs on a cloud VM (AWS EC2, DigitalOcean Droplet), confirm the security group or firewall allows inbound HTTPS traffic on the Jenkins port. Once publicly accessible, generate a Jenkins API token: log into Jenkins → click your username in the top-right → 'Configure' → scroll to 'API Token' → click 'Add new Token' → name it 'Bubble Integration' → click 'Generate' → copy the token immediately (it is shown only once). Keep your Jenkins base URL and API token ready for the next step.

1// Jenkins API accessibility check
2// From a browser NOT on corporate VPN:
3// https://jenkins.company.com/api/json?tree=jobs[name,color]
4
5// Expected response if accessible and authenticated:
6// { "jobs": [{"name": "my-app", "color": "blue"}, ...] }
7
8// API token location:
9// Jenkins → your username (top-right) → Configure
10// → API Token section → Add new Token → Generate → COPY IMMEDIATELY
11
12// Basic Auth format for Jenkins:
13// Authorization: Basic base64("username:api_token")
14// Example with username 'jenkins_user' and token 'abc123':
15// base64("jenkins_user:abc123") = 'amVua2luc191c2VyOmFiYzEyMw=='
16// Full header: Authorization: Basic amVua2luc191c2VyOmFiYzEyMw==
17
18// Network exposure options for private-network Jenkins:
19// Option A: Cloudflare Tunnel (no inbound firewall rules needed)
20// Option B: nginx reverse proxy on a public server
21// Option C: If on AWS: configure Elastic Load Balancer → public
22// Option D: Bubble Dedicated Cluster + VPN peering (advanced/enterprise)

Open your Bubble app editor → Plugins → API Connector. If the API Connector plugin is not installed, click 'Add plugins,' search for 'API Connector,' and install it (free). Return to Plugins → API Connector → click 'Add another API.' Name this group 'Jenkins.' In the 'Root URL' field, enter your Jenkins base URL: for example https://jenkins.company.com (no trailing slash, no /api/json path). Under 'Authentication,' select 'Basic auth' from the dropdown instead of leaving it as 'None.' Enter your Jenkins username in the 'Username' field and your Jenkins API token in the 'Password' field (the API token goes in the Password slot, even though it is not your login password). Bubble will base64-encode these automatically and send them as an Authorization: Basic header on every call. Check the 'Private' option next to the credentials — this ensures they are server-side only. Do not set a shared Authorization header manually when using Basic auth mode — Bubble handles the encoding and header injection automatically. Add one shared header at the group level: key 'Accept,' value 'application/json' (Jenkins returns JSON when this header is present).

1// Bubble API Connector — Jenkins group configuration
2{
3  "api_group_name": "Jenkins",
4  "root_url": "https://jenkins.company.com",
5  "authentication": "Basic auth",
6  "username": "your_jenkins_username",
7  "password": "your_jenkins_api_token",
8  "credentials_private": true,
9  "shared_headers": [
10    {
11      "key": "Accept",
12      "value": "application/json"
13    }
14  ]
15}
16
17// The 'password' field is the Jenkins API TOKEN, not the login password.
18// Bubble handles the Base64 encoding automatically when 'Basic auth' is selected.
19// Result header sent on every call:
20// Authorization: Basic base64("username:api_token")
21
22// Never put the Jenkins API token in a shared 'Authorization' header manually
23// when Bubble's Basic auth mode is already enabled — duplicate auth headers
24// can cause unexpected behavior.

Inside the Jenkins API Connector group, click 'Add call.' Name this call 'List Jobs.' Set method to GET. The endpoint is /api/json — Jenkins' root API endpoint that returns all jobs. This is where the 'tree' parameter is critical: without it, Jenkins returns every job's full nested detail including all build history, test reports, artifacts, and configuration — potentially megabytes of JSON that Bubble may fail to parse or may parse very slowly. In the URL parameters section, add a parameter named 'tree' with the value: jobs[name,color,url,lastBuild[number,result,duration,timestamp,url,displayName,building]]. This tells Jenkins to return only the fields you actually need: the job name, its color-coded status (blue=passing, red=failing, grey=no builds), and the last build's key fields. Set 'Use as' to 'Data.' Click 'Initialize call.' Bubble fires a GET request with your Basic auth credentials and the tree parameter. Jenkins returns a JSON object with a 'jobs' array. Bubble detects the fields in each job object: name, color, url, and the nested lastBuild fields. Click 'Save.' The 'color' field is Jenkins' build status indicator: 'blue' means last build passed, 'red' means failed, 'grey' or 'notbuilt' means no builds yet, and '_anime' suffix (e.g., 'blue_anime') means a build is currently running.

1// Bubble API Connector — Jenkins 'List Jobs' call
2{
3  "call_name": "List Jobs",
4  "method": "GET",
5  "endpoint": "/api/json",
6  "parameters": [
7    {
8      "key": "tree",
9      "value": "jobs[name,color,url,lastBuild[number,result,duration,timestamp,url,displayName,building]]"
10    }
11  ],
12  "use_as": "Data"
13}
14
15// Jenkins response:
16// {
17//   "jobs": [
18//     {
19//       "name": "deploy-staging",
20//       "color": "blue",
21//       "url": "https://jenkins.company.com/job/deploy-staging/",
22//       "lastBuild": {
23//         "number": 42,
24//         "result": "SUCCESS",
25//         "duration": 183000,
26//         "timestamp": 1751990520000,
27//         "displayName": "#42",
28//         "building": false
29//       }
30//     }
31//   ]
32// }
33
34// Jenkins 'color' field values:
35// 'blue'       = last build PASSED
36// 'red'        = last build FAILED
37// 'yellow'     = last build UNSTABLE
38// 'grey'       = no builds yet
39// 'disabled'   = job disabled
40// 'blue_anime' = currently building (was passing)
41// 'red_anime'  = currently building (was failing)

Build triggering in Jenkins requires two API calls chained in a specific order. Add the first call: click 'Add call,' name it 'Get Jenkins Crumb.' Method: GET. Endpoint: /crumbIssuer/api/json. Set 'Use as' to 'Data.' No additional parameters needed. Click 'Initialize call.' Jenkins returns: {'crumb': 'CRUMB_VALUE', 'crumbRequestField': 'Jenkins-Crumb'}. The 'crumb' field is the value you need. The 'crumbRequestField' tells you the header name to use (always 'Jenkins-Crumb' in modern Jenkins). Click 'Save.' Now add the build trigger call: click 'Add call,' name it 'Trigger Build.' Method: POST. Endpoint: /job/{job_name}/build (where {job_name} is a dynamic parameter). Add a call-level header: key = 'Jenkins-Crumb,' value = a dynamic parameter named 'crumb_value' (you will pass the fetched crumb into this from the Backend Workflow). Leave the body empty — a simple build trigger needs no body (parameterized builds use a different endpoint covered in the tip below). Set 'Use as' to 'Action.' Important: Jenkins returns HTTP 201 (Created) for a successful build queue entry — not the usual 200. Bubble treats 201 as success, but verify this in the Logs tab if the workflow seems to fail despite the build being queued. Click 'Save.'

1// Call 1: Get Jenkins Crumb
2{
3  "call_name": "Get Jenkins Crumb",
4  "method": "GET",
5  "endpoint": "/crumbIssuer/api/json",
6  "use_as": "Data"
7}
8
9// Crumb response:
10// {
11//   "_class": "hudson.security.csrf.DefaultCrumbIssuer",
12//   "crumb": "a1b2c3d4e5f6g7h8i9j0...",
13//   "crumbRequestField": "Jenkins-Crumb"
14// }
15
16// Call 2: Trigger Build (non-parameterized)
17{
18  "call_name": "Trigger Build",
19  "method": "POST",
20  "endpoint": "/job/{job_name}/build",
21  "call_level_headers": [
22    {
23      "key": "Jenkins-Crumb",
24      "value": "<dynamic: crumb_value parameter>"
25    }
26  ],
27  "body": "",
28  "use_as": "Action"
29}
30
31// Note: Jenkins returns HTTP 201 Created for successful build queue entry
32// The build is queued, not immediately started
33// To check queue status: GET /queue/api/json
34
35// For PARAMETERIZED builds, use this endpoint instead:
36// POST /job/{job_name}/buildWithParameters
37// Body type: Form data (NOT JSON)
38// Form fields: ENVIRONMENT=staging&BRANCH=main

The crumb and build trigger must run as a sequential Backend Workflow because the crumb from step one must be passed to step two. Navigate to Backend Workflows in the Bubble editor (Starter plan required). Click 'Add a new API Workflow' and name it 'Jenkins Trigger Build.' Add an input parameter to this workflow: parameter name 'job_name,' type 'text.' This lets calling workflows pass in which Jenkins job to trigger. Inside the workflow, add Step 1: click 'Plugins actions' → choose 'Jenkins > Get Jenkins Crumb' → run this API call. Step 2: click 'Plugins actions' → choose 'Jenkins > Trigger Build.' For the {job_name} parameter, use 'Parameter job_name' (the input parameter). For the crumb_value header parameter, use 'Result of step 1's crumb' — this passes the crumb from step one directly into the header of step two. Save the workflow. Now, from any page workflow in Bubble, you can trigger a Jenkins build by calling 'Schedule API Workflow' → 'Jenkins Trigger Build' with job_name = the name of the Jenkins job. Add a 'Deploy' button on a Bubble page: On click → Schedule API Workflow → 'Jenkins Trigger Build' → job_name = 'deploy-staging' (or a dynamic value from a Dropdown). This gives non-technical users a one-click deploy button without any Jenkins access.

1// Backend Workflow: 'Jenkins Trigger Build'
2// Navigate to: Backend Workflows section (Starter plan required)
3// This workflow is NOT an API endpoint — it is an internal Bubble workflow
4
5// Input parameter:
6// Name: job_name | Type: text
7
8// Step 1: Call API connector
9//   Call: Jenkins > Get Jenkins Crumb
10//   (No parameters needed)
11//   → Returns: crumb value (string), crumbRequestField (string)
12
13// Step 2: Call API connector
14//   Call: Jenkins > Trigger Build
15//   job_name = Parameter job_name
16//   crumb_value = Result of step 1's crumb
17
18// To call this workflow from a page:
19// Button click → Schedule API Workflow
20//   Workflow: Jenkins Trigger Build
21//   Scheduled time: Current date/time
22//   job_name = "deploy-staging"  (or Dropdown's value)
23
24// For parameterized builds (separate workflow):
25// Name: Jenkins Trigger Parameterized Build
26// Parameters: job_name (text), environment (text), branch (text)
27// Step 1: Get Jenkins Crumb
28// Step 2: Call 'Trigger Parameterized Build'
29//         job_name = Parameter job_name
30//         crumb_value = Step 1's crumb
31//         ENVIRONMENT = Parameter environment
32//         BRANCH = Parameter branch

Create a Bubble page named 'ci-dashboard' or 'devops-portal.' First, create a Bubble data type 'JenkinsJob' with fields: job_name (text), job_url (text), last_build_status (text), last_build_number (number), last_build_duration (number), last_build_at (date), is_building (yes/no). Set up a Scheduled Backend Workflow (name it 'Sync Jenkins Status') that runs the 'List Jobs' API call, then for each job in the result creates or updates a JenkinsJob record using job_name as the deduplication key. Schedule this workflow to recur every 300 seconds (5 minutes). On the dashboard page: add a Repeating Group with type JenkinsJob, data source = search for JenkinsJob sorted by last_build_at descending. In each cell: display job_name, a colored status badge conditional on last_build_status ('SUCCESS'=green, 'FAILURE'=red, 'UNSTABLE'=yellow, 'ABORTED'=gray, building=blue pulsing). Add a 'Last synced:' text at the top. For the deploy trigger: add a Dropdown listing JenkinsJob names, an optional Environment text input, and a 'Deploy' button that calls the 'Jenkins Trigger Build' Backend Workflow with the selected job name. Add a workflow on successful trigger to show an alert: 'Build queued! Check Jenkins for status in a few minutes.' If you need help architecting a Bubble + Jenkins internal DevOps portal, RapidDev's team has built these — book a free scoping call at rapidevelopers.com/contact.

1// Bubble data type: JenkinsJob
2// Data → Data types → JenkinsJob
3// Fields:
4// job_name           — text  (deduplication key)
5// job_url            — text
6// last_build_status  — text  (SUCCESS | FAILURE | UNSTABLE | ABORTED | IN_PROGRESS)
7// last_build_number  — number
8// last_build_duration — number (milliseconds)
9// last_build_at      — date
10// is_building        — yes/no
11
12// Backend Workflow: 'Sync Jenkins Status'
13// Step 1: Call Jenkins > List Jobs
14// Step 2: Schedule API Workflow on a list
15//   List: Result of step 1's jobs
16//   Sub-workflow: Upsert JenkinsJob
17//     Search for JenkinsJob where job_name = current item's name
18//     If found: update all fields
19//     If not found: Create new JenkinsJob
20
21// Schedule: Every 300 seconds (5 minutes)
22
23// Dashboard status badge conditionals:
24// When last_build_status = "SUCCESS"  → background #22c55e (green)
25// When last_build_status = "FAILURE"  → background #ef4444 (red)
26// When last_build_status = "UNSTABLE" → background #eab308 (yellow)
27// When last_build_status = "ABORTED"  → background #6b7280 (gray)
28// When is_building = yes              → background #3b82f6 (blue) + animation
29
30// Deploy button workflow:
31// On click → Schedule API Workflow:
32//   Workflow: Jenkins Trigger Build
33//   Scheduled time: Current date/time
34//   job_name: Dropdown's value (JenkinsJob's job_name)