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:
- Track changes to your app
- Create branches and work on features simultaneously
- Merge branches together
- Revert to previous app versions
- Publish specific app versions
Let’s start by by looking at 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 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.
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.
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).
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
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
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.
You can choose which branch you’re editing from the
Editing Branchdropdown, or by right clicking on the branch and selecting
Let’s switch back to
master. Next, we’ll find out how to merge branches.
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:
masterchecked 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 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.
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.
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
Config conflicts are the same, edit the configuration of your app to resolve the conflict and select
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.
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.
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
At the top right of the editor, click the
Publish button. Next, click the
Publish this app button. This will create an environment called
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.
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.
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:
- Tracking changes to your app
- Creating branches and working on features simultaneously
- Merging branches together
- Reverting to previous app versions
- Publishing specific app versions
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