.gif)
Explore our easy step-by-step guide on effectively integrating Bubble.io with GitLab for streamlined web development and project management.
GitLab is a web-based DevOps lifecycle tool that provides a Git-repository manager providing wiki, issue-tracking and continuous integration/continuous deployment pipeline features, using an open-source license, developed by GitLab Inc. It is designed for teams of any size to plan, build, collaborate, and deploy software applications. GitLab provides users with a diverse set of tools and features, including project management, source code management, and CI/CD.
Book a call with an Expert
Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.
Step 1: Create App
You have to start by creating an app in your Bubble.io account. Click on "New App" on your Dashboard and provide the necessary details to create your app.
Step 2: Set up API Workflow (Bubble.io)
To connect your app to GitLab, navigate to the "Settings" tab, and then "API". Enable the configurations "This app exposes a GET/POST API" and "Enable CORS for all domains (not safe but easy for development)". Provide an endpoint name and return data from your database.
Step 3: Generate Personal Access Token (GitLab)
Log in to your GitLab account. Navigate to "User Settings" (top right corner) and then "Access Tokens". Provide a name for the token and set the expiry date. Check all boxes under "Scopes" and then click "Create personal access token". Copy this token and keep it safe.
Step 4: Connect Bubble.io Pipeline to GitLab Repository
Now, go back to Bubble.io and head to the "Plugins" tab. Click on "Add plugins", search and install the "API Connector" plugin. In API Connector settings, click on 'Add another API', fill out the required fields as follows:
In "Authentication", select 'Self-Handled'.
In "Shared Headers", copy and paste the personal access token generated earlier in GitLab.
For 'Use as Action', input 'GET' and provide the URL to your GitLab repository.
Save the API settings.
Step 5: Trigger an API Workflow (Bubble.io)
Head back to the "API Workflows" menu and this time, click on "+ New Endpoint". Write a name for the endpoint. On the same page, under 'Parameters', select 'Key' and for the value field select 'Dynamic data'. In the dynamic panel that opens, choose the API you created a while ago. Finally, click "Add Action", then "Return data from API", and choose the data to return.
Step 6: Test your Integration
Now, in Bubble.io, go to your app's index page and add a button. In the button properties, link it to 'Workflow', and then select 'Trigger a custom workflow'. Choose the API Workflow you created earlier. Preview your app and hit the button. If all this was done correctly, it should provide the data from your GitLab repository.
If there's an error, make sure that you perfectly followed all the steps. If everything seems perfect and you're still facing issues, refer to support documentation for Bubble.io and GitLab.
Note: Direct integration between Bubble.io and GitLab isn't supported. This guide provides a workaround using Bubble.io's APIs. If you're not familiar with how APIs work, you may need additional assistance in setting this up.
Consult both platforms' respective API documentation (Bubble.io's API documentation and GitLab's API documentation) to understand how their APIs function and how they can be used to establish a connection between the two platforms.
Scenario: A technology startup is developing a unique mobile application using Bubble.io for its non-technical founder. The application’s frontend is built on Bubble.io, and the backend is built using code maintained by developers in GitLab repositories. They want to ensure a seamless workflow for regular deployment and updates.
Solution: Integrating Bubble.io with GitLab
Frontend Development in Bubble.io: The startup uses Bubble.io to build and design the frontend of the mobile application without requiring any coding. They create interactive designs, utilize built-in workflows, and set up APIs to communicate with the backend.
Backend Development in GitLab: The team of developers maintains their code for the application’s backend in GitLab. They manage their repositories, do regular commits and push changes to the code.
Setting Up the Integration: The startup activates the GitLab integration within Bubble.io. For each frontend update or change, a pull request is automatically sent to the corresponding repository in GitLab. In GitLab, the developers can review the changes, the pull request can be merged if approved.
Deployment Workflow: Once the pull request is approved and merged in GitLab, the backend updates are deployed automatically. In Bubble.io, the application updates are refreshed to reflect the backend changes. This ensures that the mobile application is always up-to-date with the latest features and fixes.
Monitoring and Collaboration: The integrated setup enables the seamless collaboration between non-technical founder using Bubble.io and the developer team using GitLab. They can track project progress, identify and resolve issues faster with combined efforts from both sides.
Benefits:
Efficiency: By automating frontend and backend integration, the startup saves time and effort in manual deployments and reduces the risk of errors.
Collaboration: The integration enables a collaborative development environment between the nontechnical and technical teams.
Continuous Deployment: The startup can continuously deploy updates and improvements to the application.
By integrating Bubble.io and GitLab, the startup ensures streamlined development, seamless updates, and consistent collaboration, enabling it to quickly deliver a robust mobile application.
.svg)
Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.
.svg)
Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.
.svg)
Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.
Then all you have to do is schedule your free consultation. During our first discussion, we’ll sketch out a high-level plan, provide you with a timeline, and give you an estimate.
.png)
.png)
