Getting started with the Developer Mode

The Developer mode is a new feature that allows you to create apps that are mixing the benefits of visual editing with the custom code written directly in React.

We built this functionality having in mind a person with coding skills, to allow the creation of more complex components inside TeleportHQ. It can be used in the Designer Mode, with the possibility to apply different styling or layout.

Here is a quick summary of what we will cover:

How to enable the Developer Mode
Search functionality
File explorer
GitHub integration
Source control
Dependencies management
Designer to Developer synchronization

1. How to enable the Developer Mode

Developer mode is currently still an experimental feature.

Go to Project settings -> Experimental features and check Developer mode. Then return to the editor and you will have a Design/Developer switch in the left part of the Top bar.

Enabling developer mode

2. Search functionality

To search for any keywords in your project, you can use the Search tab. It is the first one in the left panel.

Regex and case matching are also supported.

If results are found matching your keyword, you can click on each individual result and you will be redirected to the specific file that contains your search.

Searching in developer mode files

3. File explorer

To access all the files in the project you need to go to the File explorer. It is the second tab in the Left panel.

The file hierarchy matches a React architecture and it cannot be changed at the moment. There are three types of files:

Read-only files (src/teleporthq folder): These are all the pages and the components that are built in the Designer Mode. They cannot be edited as we don’t currently support the synchronization from Code to Design.

Asset files (public/playground_assets folder): The assets that are used in the Designer Mode are kept in sync with the assets from the files hierarchy. For the moment, you cannot select an asset and see its content in the Developer Mode.

Widget files (src/widgets folder): The files that are persisted here, usually export a React component that will be available in the Designer Mode.

What operations you can do here:

Create: you can create any kind of files in the hierarchy
Move: you can drag and drop files or folders and change their location in the hierarchy

No operation is allowed in the src/teleporthq folder.

File explorer preview

4. GitHub integration

To set up your GitHub integration you need to use the third tab in the left panel. There are two steps to do this:

Give GitHub publish required permission either by adding an access token or by logging into your GitHub account through our platform.

Publish the project to your GitHub account as a new repository. You can mark it as private or public.

Connecting to GitHub in Developer mode

Once the project is published, instead of the setup section that you saw before, a new section containing 3 topics will be visible:

Source control

5. Source control

Here you can see what files have been changed, removed or added since your last commit. If you right-click on any item a context menu will appear with the following options:

Stage changes: In order to actually commit any changes to the GitHub repository, those changes must be staged. You will be able to see what files have been staged and which were not. You can unstage a file by pressing right-click on it and choose the Unstage changes option from the context-menu.

Discard changes: The file will be brought back to the previous version if updated, it will be removed if it is a new file and it will be added back if it was removed.

Open changes: you will be able to see a diffing between the previous version of the file and the current version

Use the input at the top of the section to commit your staged files to the GitHub repository. You can either write a message and press Enter, or you can write a message and click on the Commit and Push button.

Source control in the Developer mode

6. Branches

In order to create a new branch, you need to click on the + button that is visible at the top of the section. A new record in this list will be created and you will be able to rename the branch as you please.

Create and work on as many branches as you want.

Branches in Developer mode

You can also bring into the platform branches that were created somewhere else (on your local machine, using a terminal/git tool), by pressing on the refresh button from the top right of the section.

When you want to merge one branch into another, you can right click on the current branch and choose from the contextual menu what branch you want to merge it into, or you can right click directly on the branch you want to merge the current one into and a specialized option will be available in the context menu.

If conflicts are found during the merge, a modal with the conflicted files will be displayed and you will need to solve all the conflicts before we can push the changes.

Conflicts comparison

7. Commits

You will be able to see all the commits that were made in the current branch. If you expand a commit, you’ll see all the modified/new files that were committed and if you click on one file, a diffing editor will be opened in order for you to see what changes were done.

Commits list in the Developer mode

8. Dependencies management

Access the dependencies management section by clicking on the cloud icon. It is the fourth icon from the left sidebar.

In this section, you can see what libraries are used inside your project. If you want to add a new dependency, you can click on the + button available at the top right of the section. If you want to remove a dependency, the right-click contextual menu on each dependency will offer you the option.

Only libraries that are ESM compatible are currently supported.

Adding dependencies

9. Designer to Developer synchronization

Changes made to a project in the Design mode will not be automatically displayed if you switch to the Developer mode. In order for that to happen, you need to sync the Designer Mode into the Developer Mode.

This can be done by pressing the Refresh button at the top right of the opened code editor.

Synchronizing Developer and Design modes
Was this article helpful?
Thank you!