You, • Version ControlGitAnvil
Back

How To Use Version Control In Anvil

Without version control software like Git, it can be complicated to track the changes you make to code. Anvil, the platform for building web apps with nothing but Python, comes with built-in version control backed by Git.

In this blog post, I’m going to give a quick run through of version control in Anvil, showing you how simple it is to use and how powerful it can be. Let’s get started.

## What Does Anvil’s Version Control Actually Do? Anvil’s version control, like many other version control systems, does a number of things. It lets you:

Let’s start by by looking at tracking changes.

Tracking changes

The best way to learn about a feature is to try it out, so I’ve created a simple example app for you to use while following along with this blog post. The example is a simple feedback form app. Use the clone link below to get started and follow along (it’s free): https://anvil.works/build#clone:3JB7HB4RWNCHP2LD=JC6652EFYXHQ4EP3UXZ4W7FH

Following the clone link will take you to the Anvil Editor.

Commits

Commits are a snapshot of an entire app at a point in time. Commits are the building block units of a project’s timeline.

To view the commits of an app, click the upward arrow at the bottom of the Anvil editor and select the Version History tab.

In our example, you’ll see a single commit with the description “Cloned app”.

Anvil creates a new commit each time you change your app. If you change your app repeatedly in a short time, Anvil “squashes” all the changes into one commit (we’ll learn more about automatic commits in the next section).

Let’s make a change by dragging a RadioButton component into our form to see a new commit.

Commits are displayed in reverse chronological order, so more recent commits (children) appear above the older commits (their parents).

Each commit shows you information about what was changed, who changed it and when it was committed. If you double-click on a commit, it opens a comparison on the right hand side which compares the selected commit with its parent commit.

Manually Creating Commits

If you’d like to create you own commit with a more specific description, you can manually create a commit at any time with the Commit button.

We can try it by selecting the RadioButton we added to our form earlier and changing the text to “West”. Then, in the version control panel, select Commit and write a message to describe the change we made.

Automatic Commits

Every change you make to an Anvil app produces a commit. In order to avoid a huge amount of commits, if you make changes in quick succession, Anvil will “squash” each new change into the latest commit — i.e. it will create a new commit with your latest changes and the previous changes. This effectively replaces the latest commit with the new one (In Git, this is called amending a commit.)

If you would like to “freeze” a commit, so that any new changes occur in a new commit, click the Commit button (like we did in the Manually Creating Commits section).

Branches

Creating branches

When you create an app, it comes with a single branch called master. You can think of the master branch as your app’s “default” branch. Initially, all the commits added to an app’s version history are committed to master.

You can also create additional branches. Additional branches let you “branch off” from a specific commit and do your own thing without affecting further commits on the original branch.

Branches are a powerful tool when you want to add a new feature or fix a bug. Committing changes to a new branch lets you encapsulate your changes. This makes it harder for unstable code to get merged into the app’s main code base (I’ll explain merging soon!).

Let’s try creating a branch by right clicking the latest commit and naming the branch client-code-changes. Then we’ll make a small change to the client code of the feedbackSurvey form.

The branch will now be visible in the version control tab.

This branch will move as you edit your app, to point at each new commit as you create it.

Switching Branches

You can choose which branch you’re editing from the Editing Branchdropdown, or by right clicking on the branch and selecting Checkout branch.

Let’s switch back to master. Next, we’ll find out how to merge branches.

Merging

Merging is Git’s way of combining branches back together again. Git finds the common parent between two branches and uses that to work out what has changed between that starting point and each of the commits you’re merging. Then, it will combine both sets of changes.

Let’s make a commit on master, so the Git tree in the version control tab looks something like this:

Withmasterchecked out, right click on the branch you’d like to merge and select Merge. Write a message to detail what you are merging and select Merge.

Merging is Git’s super power because it integrates all changes for you, however, sometimes two branches will have changes to the same file that git can’t resolve. When that happens, Git raises a conflict.

Conflicts

Conflicts generally arise when two people have changed the same lines in a file, or if one developer deleted a file while another developer was modifying it. In these cases, Git cannot automatically determine what is correct.

When an attempted merge fails with conflicts, Anvil will notify you with a dialog box.

Code Conflicts

If both sides of a merge have changed the same line(s) of code, you will see a code conflict.

If you select Open code, the conflicting lines of code will be displayed with different colours for each side of the merge.

You must now edit the text in this range to resolve the conflict. When you have done this, click the Resolved button on the conflict marker.

Component or Config Conflicts

If the conflict involves changes to the same component on a form or a piece of the app’s configuration, you will see a component conflict or a config conflict.

For component conflicts, edit the components to resolve the conflict, usually by incorporating the changes made on the branch you are merging in, not the branch you are on. Once this is done, simply click the Ignore button.

Config conflicts are the same, edit the configuration of your app to resolve the conflict and select Ignore .

Marking Conflicts As Resolved

Once you have resolved all the individual conflicts in a form, module, or your app’s configuration, you need to confirm that this item is fully resolved.

Once you have confirmed that all conflicts as resolved, you can click the Complete merge button in the Version History tab.

Reverting to a previous version

One thing the Anvil editor makes very simple is reverting your app to a previous version. All we need to do is right click on the commit we would like to go back to and select reset <branch-name> to here.

Publish specific versions

Typically, when you develop apps, you run the same code in several different environments. You might have a development environment, a testing environment and a production environment. This allows you to continue developing and testing your app without affecting your users.

Anvil apps are no different and, to make it easy to maintain different environments, Anvil comes with built-in deployment environments.

For each environment, you can choose a specific commit or branch to deploy. Let’s try it out by creating two environments for our app, one called production and another called development.

Publish a specific commit

At the top right of the editor, click the Publish button. Next, click the Publish this app button. This will create an environment called Published.

Now, we have created an environment, we can select the commit we would like this environment to use. Expand the App version section and select Link to a different version.

Select a commit from earlier on click Select this commit.

You will now see that our Published environment will load a specific commit.

Publish a specific branch

Next, let’s create a development environment, but instead of selecting a specific commit to publish, we will select a branch for this environment to publish. Start by clicking the Add another environment button and rename it to development. Then, in the App version section select Link to a different version.

Finally, click on the head of the branch we made earlier and press the Select branch '<name of branch>'.

Now, when you navigate to that environments URL, the app will load whatever the latest code is from that branch — this is great for making lots of changes in development and testing them out.

That’s it, we now have two environments with two different URLs, and each URL points to a different version of our app.

Conclusion and Recap

That was an intro to version control in Anvil. We’ve seen how simple it is to use and how powerful it can be. We’ve discussed a lot in this article, including:

Git can be overwhelming and, although Anvil provides a nice simplified interface, it can be useful to learn more about how Git works with a visual tool like LearnGitBranching.js.org — it really helped me when I was starting out.

Don't forget! Follow me on Twitter for more software development content!

Thanks for reading!

If you found this article useful and can spare a dollar, I’d appreciate the support.

I believe in privacy and I don’t run ads. For analytics, I use the open-source platform Plausible.

 © Coding With Ryan.RSS