Talk to Us

Connecting with GitHub

Introduction

GitHub is a robust way to support version control and collaboration. Integrating it with Fab Builder offers several benefits:

  • Version Control: Track changes, go back in time, and have a clean code history.
  • Collaboration: When you are working with your team, it is effortless to manage branches and review code changes.
  • Seamless Integration: link your GitHub account to Fab Builder and automate testing, deployment, and efficient code management.
  • Security: Access and vulnerability check on code storage.

Code management can be simpler, team work can be better, and app building workflows can be more smooth when you connect to GitHub.

Step-by-Step Process for Connecting with GitHub

1. Start Building : There are 3 ways to begin with - Template from Scratch or Import from Swagger. We would start from Scratch. Another thing is that there’s also another option, Generate with AI, which makes the app building process much simpler.

2. Choose Frontend Framework : Choose any one from 6 available frontend options to build a dynamic and responsive UI. For this tutorial, let's select React Ant Design.

3. Choose back-end (Node.js) : Choose Node.js as your back-end technology to handle server-side logic.

4. Select Database (MongoDB) : Choose MongoDB to manage your application's data, ensuring scalability and flexibility.

5. Setup New Application : Provide details for your app (name, display name, tenant mode). Options include Single, Multi, Flexible, and Multi Subdomain depending on your requirements.

 6. Review Information and Complete : Review the provided information and click "Complete" to finalize the setup.

7. Add Entities : Once your project setup is complete, you will be directed to add entities to your application.

8. Use Predefined Templates or Custom Entities : Choose from predefined templates, import from Swagger, or generate templates using AI to suit your needs.

9. Apply Predefined Template : If you’re using a predefined template, apply it and customize the fields accordingly.

10. Create Custom Entity : If creating a custom entity, give it a name and submit it. A new entry will be created.

11. Add New Fields : Select the field type and add new fields to your entity as required.

12. Finalise and Move to Home Page : After finalising edits, click "I'm Done" to return to the home page. From there, preview your application and move ahead by clicking “Next”.

13. Code Generation : Click “Build Source Code” to generate your source code. Please note that code generation may take a few minutes, and entities cannot be edited afterward.

14. Build Progress : The build process will start, and you will be notified once it is complete. During this time, you can:

  • Connect to GitHub: Link your GitHub account for version control.
  • Earn Credit: Continue development by earning additional credits.
  • Refer to a Friend: Invite others and enjoy shared benefits.

15.Connect to GitHub: While the code generation is in progress, you can connect your application to GitHub via Fab Builder. Click the "Connect" option available on the screen, which will redirect you to the GitHub interface.

16. Login and Installation: Log in to your GitHub account or create a new account if you don’t already have one. Once logged in, click on "Install" to integrate GitHub with Fab Builder.

17. Return to Fab Builder: After installation, you will be redirected back to the Fab Builder dashboard. Here, you can access a section for managing code files, where you can review, update, and manage your application's code seamlessly.

Conclusion

Version control and code management with Fab Builder are breezes with the help of connecting Fab Builder with GitHub. This facilitates easy integration, enabling the users to read, update, and manage the code without any issues in the Fab Builder dashboard.