LogoLogo
Quest HomeSign Up
  • 😀Welcome to Quest
  • Getting Started
    • Quest Overview
    • Helpful Resources
    • Quick Start - Build your first component from Figma
    • Quick Start - Build your first component from a Wireframe
    • AI Prompt
  • Fundamentals
    • Customizing & Using the UI Kit
    • Designing Custom Components in Figma
    • Easily Sync Designs without Losing Work
    • Setting Up Props & Bindings
    • Exporting Code
    • Push to your Repository
    • Creating Responsive Components
    • Nesting Components
    • Workspaces & Apps
    • Code & Preview Mode
    • Prototypes/Wireframes
    • Animations - build with React Spring
    • Quest plugin for Figma Dev Mode
    • Publish on Quest to a URL
  • Features
    • Working with Variants & States
    • Naming Conventions
    • Previewing with Custom Fonts
    • Light & Dark Mode
    • Creating a custom Tooltip
    • Creating a Floating Popover
    • Creating a Dialog pop-up
    • Radio Group
    • Using the MUI Data Grid & Table
    • Data & List Bindings
    • Dynamic Bindings
    • Grid
    • File Upload
    • Design System Tab and Theme Import
    • How-to use a Theme in your Application
    • Accessibility Support
    • Design Tips and Tricks
    • Video
    • Lazy Loading
    • Sticky Position
    • Link
    • Custom Breakpoints
    • Min / Max Width
    • Supported Quest UI Kit Components & How-to Make Edits in Figma
    • Supported Chakra Components & How-to Make Edits in Figma
  • Advanced Tutorials
    • Setting up Bindings and Features on the MUI Button
    • Display Repeating Components based on a Dynamic List
    • How-to Pass Values from Parent to Nested Components
    • How-to Invoke a modal Dialog Box from a Button Click
    • How to Setup a popover
  • 🔍Help
    • Product Updates
    • FAQs
    • Plugin Warnings / Alerts
  • 💡Support
    • Why does my design look different in Quest than Figma?
    • Can I keep making changes in Figma without affecting code?
    • What are some best practices?
    • Does Quest support more than Figma and React?
    • How do I manage users?
    • What is the refund process?
    • How do I get in touch with Quest?
    • Do I have to use MUI if I'm using Quest?
Powered by GitBook
On this page
  • Getting the API Key
  • Adding your API Key in Quest
  • Pushing your App to the repo
  • Pushing individual Components

Was this helpful?

  1. Fundamentals

Push to your Repository

Pushing your Component or whole App to GitHub

PreviousExporting CodeNextCreating Responsive Components

Last updated 2 years ago

Was this helpful?

To sync your Component or App code to your GitHub repository, you'll need to first get your GitHub API Key. Once you have the API Key, you can start choose your Repo, Branch and Path to push to.

Getting the API Key

  1. Go to settings on GitHub

2. Scroll down to the Developer Settings in the left panel

3. Click Personal access tokens in the left side

4. Click on Generate new token button

5. Give a name to the key

Preferably, you should name it something so you remember that it is the key for Quest. You should not use this key for anything else other than the GitHub Quest integration. Set the "Expiration" to "No expiration" to avoid problems with it later.

6. Check the repo checkbox, to give all the permissions inside the repos

7. Scroll down and click Generate token

Copy the generated token for use in the next step. Please note that you can copy it only one time. If you need to do this again for some reason, you will need to regenerate the token.

Adding your API Key in Quest

Your API Keys are added at the Workspace level and can be shared across all Apps within the workspace. You cannot share the keys across Workspaces in Quest. You need to generate a new token per Workspace. Any team members in that Workspace can add and manage API Keys.

Pushing your App to the repo

In the Export tab for the App that you're working on, in the top of the page, toggle to "Push to Repository" and you will find the Repository Settings.

From here you can select the API Key that you added or other team members have added. After that, you can choose your Repo, Branch and Path. Once you choose your Path, Quest will auto-save your choices. The "Push App" button will become enabled and you will then be able to push your entire app to your repository.

For both Image and Fonts Paths, the paths you specify will be relevant to the Path in your Branch that you choose. This is different for how it works with Downloading the App as in that case it will only be a reference to those locations in the file and you will need to manually move any asset folders that are downloaded.

Note: You will need to have these Repository Settings all filled out in order to be able to export individual components from the Quest Editor.

Pushing individual Components

In the Quest Editor, if you have all your settings previously set up in the steps above, you will be able to push individual components to your Repository. If you don't have this set up on the App level, the Push button will be disabled. This is a quicker way to push things as it will only collect the relevant files to push and not everything in your App.