The Code Editor | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

• How to update code in Yext
• How to commit changes
• How to troubleshoot errors in the code editor

Updating Code

Now you know more about how Jambo works and how the Theme helps to make developing with the Search SDK even easier, you’re probably pretty eager to get coding! Right!?

In the Code Editor, we pull in all of the files from your Github repository so that you can commit changes just like a developer.

To do so, you can navigate to Pages > All Sites > Your Site > Deploys and then click the Code Editor button in the top right. The first thing you’re going to be asked to select is the branch you want to work on. A branch is a named version of your repository. You can create new branches for your work if you have multiple people working on an account at once and then you can merge those branches together when you’re ready. This is standard git workflow, if you’re interested in learning more, here’s a great tutorial .

By default, you should make changes on the master or main branch, unless you’re working with a developer.

When you first click into the code editor on a branch, it will spin up a container for dynamic editing and preview. It may take a few moments to load up, but once it does it’s very powerful.

Navigating the Code Editor

The Code Editor is organized in the same tree structure as your code repository in Github, except it’s even easier to quickly move around and load multiple files at once. To update a file, it’s as easy as navigating to the file you want to update, typing in what you want to change, and committing the code.

When you click on a file name, the file will appear as a tab in your workspace. You can also do things like add new files or delete files by hovering on a directory or file and clicking the add or trash icons.

Committing your Code

Once you feel comfortable navigating to a file, making the updates and committing your changes is easy! There are just a few simple steps.

Steps for using the Code Editor

1. Navigate to the file
2. Update the file as desired, e.g., updating a hex value for a color variable

3. Optionally, you can click to “Show Diff” in order to view the changes you’ve made to that file.

   

4. When you feel good about your changes, you can click to “Commit” your changes. You can see a list of all of the files that you’ve updated in “Staged Changes”, including any updated files, added files, or deleted files. If you want to undo changes to any file, you can hover on the file name and click the “X” icon next to the update. To undo all changes, you can click “Reset”.

   

5. You’ll be prompted to include a Commit Message and optionally to Add a Tag to the commit. For the Commit Message, this is to tell yourself and other users what the commit was for and is a standard practice in development. Keep your commit message succinct but descriptive. For the Tag, this is so that you can easily publish these specific changes. Your tag needs to follow Git conventions so something like “2020-05-02” is valid but “starting point” is not. You can always go back to a commit and add the tag later by clicking into a “recent commit” on a branch (we’ll cover this in the Page Generation unit ). We recommend using something like a date system or a semantic versioning system to keep track of your commit tags.

   

Of course, you’ll want to preview those changes before committing if you can, which you’ll learn about in the next unit.

Commented Out Code

The code editor will format and color the code to make it easier to read and understand. Any comments or code in green are “commented out”. Each file type (.json, .hbs, .scss) has different syntax for commenting out code. For example, in handlebars files, you encase the code in {{!-- --}} and in json files you’ll see // for single lines or /** **/ for blocks.

Example of comments in a handlebars file:

Example of comments in a JSON file:

The comments are there to provide you with more information OR to provide you with sample code that you can easily use. If you want to use the code, simply remove the characters that are creating the comment. Be careful that you remove the whole syntax, otherwise you’ll run into errors. For example, in a handlebars file, you need to make sure you remove the characters on both sides of the code:

With comments:
{{!– {{> templates/vertical-standard/script/sortoptions }} –}}

Correctly removed:
{{> templates/vertical-standard/script/sortoptions }}

Incorrectly removed:
{{!– {{> templates/vertical-standard/script/sortoptions }}
{{> templates/vertical-standard/script/sortoptions }} –}}

Apply Diffs

You can collaborate with coworkers or share commits between repos easily using “apply diffs”. All you need is the a diff file and you can view and preview that change to your repo. To use this, navigate to Tools > Apply Diffs, enter a URL, click View to see what the diffs contain and click Apply to add to your staged changes. All you need is a .diff or .patch file stored in a publicly accessible URL.

Troubleshooting Errors

The Code Editor will help you find errors before you commit the code!

Here’s an example of a code file with two errors:

You’ll notice there is an error because of two things:

1. Red underlining, typical of an error in any text editing program
2. A red indicator on the right side

If you hover over the underlined text, you’ll see a message that might be able to help you identify the issue:

Here, it says “Expected comma” – that’s because there is a missing comma on line 11, directly before the underlined text in line 12. As you learned in the Intro to JSON module , you need to include commas between properties in JSON. To fix this, you’d add a comma in line 11.

When you’re using the code editor, look out for the times when the code editor is trying to help you. Listen to it!