VCS Manager
The VCS Manager in WaveMaker helps you manage and track your application's source code as it evolves. It brings essential version control workflows into a single, easy-to-navigate workspace.
-
Manage your application's source code and track changes over time from one place
-
Perform core version control actions like pull, push, view changes, and review commit history
-
Collaborate smoothly by comparing versions, resolving conflicts, and syncing with external repositories
Watch the VCS Manager Walkthrough video below to explore the UI and understand how these workflows come together in WaveMaker.
VCS Manager
00:00: Hi, and welcome!. In this video, we'll take a guided walk through of the VCS Manage in
00:06: WaveMaker. Along the way, you'll see how this space helps you manage and maintain your code repository—bringing together contributions from multiple developers working in parallel, while keeping versions clean and manageable.
00:18: Let's get started.
00:20: For this video, we have set up a project.
00:23: We have a single page called dashboard. And an imported database.
00:28: So, this actions have created code, which are organised in the project structure as folders and files.
00:34: This will help us set up the context and view the source code and it's evolution.
00:40: So, let's get to the VCS workspace as shown here.
00:43: In the VCS dropdown we see five options, which are behind the scene, mostly, VCS commands, which we are fairly familiar with. Pull, Push, View changes, and commit history.
00:56: The 5th option is for configuration of your project with an external repo, that you might own.
01:02: This makes it possible to push code directly to your own external repo.
01:07: When we go to the pool changes menu wave maker Checks if there are any uncommitted local changes.
01:13: If so it temporarily stashes them pulls the latest changes from the remote master into the local repository and then reapply the stashed changes.
01:23: Once the pull is completed successfully the project reloads.
01:27: There can be merge conflicts during a pool more on that later.
01:32: Let us go to the next menu item, "Push Changes".
01:35: This invokes the push changes dialogue.
01:38: We see the project name and a text area to type in our commit message below the text area is an uneditable text box that adequately lists down all uncommitted changes.
01:50: Let us enter our commit message describing the changes.
01:53: Make sure the description is comprehensive enough for other contributors
01:57: Click on "Ok" to confirm and save your commit message for the push operation.
02:02: Clicking on the view changes would open up the dialogue where we can view all our uncommited changes.
02:08: But, since we just now pushed our changes, the local repository is clean and the dialogue won't show up in this case.
02:15: We will visit that dialogue later, after we make some local changes
02:20: Let us now, visit the next menu item, "Commit History".
02:24: This is the commit history dialogue.
02:26: All the commits made by various contributors are listed here with the latest on the top.
02:31: In this case the sole contributor is me.
02:35: So the author column shows only one name.
02:38: letters visit the first commit by clicking on the view changes link of the last item in the row
02:45: As soon as we create a project in wavemaker.
02:48: It creates a host of files behind the scene.
02:51: These files are project configuration files UI related front-end files service-related back-end files, etc. All these files get committed and pushed on the very first creation of The Project
03:03: As we go further, we will be making changes to pages such as modify Pages create Pages etc.
03:11: So we are specifically interested in the pages section within all the committed files.
03:16: So let us go through all the files, which were created by default within the pages section of the commit.
03:24: Here you can see the files related to a page of type partial in a folder called common like common dot CSS and so on.
03:32: Here we can see all the files related to the Login page.
03:37: On the creation of a project in wavemaker. It Creates a page by default, called the main page. And here you can see all the files, related to the main page in the main folder.
03:49: Other pages created are, footer, header, Etc.
03:54: Now let us go visit the commit history space where files have been added or modified and committed.
04:00: What we are trying to do here is observe how the VCS were spaces UI presents the differences between the two versions of the same file before and after the commit.
04:12: Here, we see the commit history list. The most recent at the top.
04:17: On the rightmost side of each row is a call to action called "View Changes".
04:22: Let us go to the latest commit and view the interface of how the changes are presented.
04:28: At the very top we see the commit ID followed by the timestamp and author.
04:33: And then there is a listed table of all files, either modified added or deleted if present.
04:40: On the right end of each row is a icon button that will take us to the actual changes of that particular file. Let's view one.
04:47: I am selecting the employee dot HTML file.
04:50: This is a newly added file and hence the previous server version shows blank and the content of the committed version is shown on the right.
05:11: Let's see what the difference shows in the committed version in line 29 a new object called Go to page. Employee got inserted and this means a new page navigation variable for the newly created employee page. Got added.
05:24: this is a 10 line insertion
05:30: No let us go checkout some files that have changes to existing lines of code. For that, I would like to select the second commit from top, which has the commit message, Modified left nav and header.
05:41: As you can see, there are two files here that were modified in this commit.
05:45: header dot HTML and left nav dot HTML
05:49: let us first checkout the header.HTML file.
05:54: In the server version of the file we see some red highlighting.
05:57: For example in line 7 the value top right is highlighted in red and correspondingly in the committed version of the file. We see it has been replaced by the value start and this has been highlighted as Green
06:11: now red highlighting means an omission and green highlighting means an addition.
06:18: Similarly, let's go visit the changes of the left nav dot HTML file.
06:24: We see the same pattern of suggesting red highlighting as a mission.
06:28: Here we see the entire lines of code from the second to sixth liner emitted.
06:33: Let us revisit the pull menu.
06:39: If you recall we have encountered this prompt before so I am clicking okay to pull changes from remote.
06:46: So my changes were stashed and changes were pulled from remote and now it will try and apply my changes on top.
06:54: If you recall I created a page called employee.
06:59: another team's member made changes to that Pages page title and committed
07:03: I too have made changes to the page title so you can see here. We have encountered emerge conflict.
07:10: Now let us see how it can be resolved.
07:12: What we see here, are three options, "Apply Local", meaning discard changes from Remote and override with my local changes.
07:21: The 2nd option is "Apply Remote", meaning override local changes with changes from remote.
07:27: The third and last option is "Resolve conflict" which means, manually edit the merged file and apply.
07:34: let us go through the rest of this UI
07:36: on the left menu we see two grouping filters category named as
07:42: all others and pages
07:45: Since we have only one file that has conflict we see the count of all and pages as one.
07:51: The next grouping is change type and we see there are a total of 6 files with changes.
07:58: count of files with changes from both local and remote is one
08:02: total files with changes in the local R3 and remote files with changes are 4 the main content area has two tabs review merge that gives a list of files with conflicts.
08:15: The other TAB called resolve conflict opens up the files with conflict in the diff format one by one.
08:22: Here I am chosen to go with the resolve conflict button on the rightmost side of each files row. This gives me control to review and resolve conflict manually by editing the merged file.
08:34: So, I am hitting the edit button here, to go and manually edit the file.
08:38: We are presented with the three, split windows UI. On the left is the Remote server file. On the right is the local file, and in the middle is the merged file. The place where the conflict exists, is highlighted red.
08:52: Let us see the situation here.
08:54: The caption attribute on line number 6 is where the conflict resides. The remote file has the value, Employee Listing, And the local file has the value as, Employee List.
09:07: And I want the value to be, Employee List, like the local.
09:11: I can do this in three ways, discard remote, or take local, or manually edit the merged file and make the value as, Employee List.
09:21: So I go to the merge result window and Manually edit the caption value as Employee List
09:32: Since this was the only conflict, I am going ahead and hitting on the apply button here.
09:36: So we are left with no files that has conflicts. and this prompt asks me to reload the project.
09:43: We must take note here, that files which had no conflicts are pulled in, if from remote, and applied if from local.
09:50: So we see that, as expected both the tabs are devoid of any files with conflict.
10:04: let us go to the filter called, All, to see all the changed files list. and we can see here that only one file had conflicts and it is green now, which means it has been resolved
10:16: we can go and view how we resolved it by clicking on this edit button here.
10:22: So since, everything looks good here. I want to finish the merge and move on. Hitting ok for this prompt here.
10:29: And the project reloads.
10:34: There is one more menu, we said, we will revisit, once we have local changes. And that is, View Changes.
10:42: So let's see,
10:43: how does the view changes UI looks like.
10:46: So this dialogue structurally lists down all the files which are changed locally.
10:50: There are two folders and one file in the root directory
10:54: So in the List of files, we can visit any files, and compare to the files in the remote.
11:10: And that's about it with the View changes menu.
11:14: Let's visit the last Menu, that is, Push to External Repo.
11:17: we are presented with this simple UI where wavemaker provides us the settings to set up our project with an external Repo
11:25: this enables us to pull and push code directly to an external repository that we might own.
11:31: The first option is github.
11:33: This is a form with four Fields we need to provide the data for the respective github account and hit export.
11:39: This will set up the project directly with the github account.
11:43: The same goes with Bit bucket. If you own a Bitbucket account, you can set up this project directly with your Bitbucket account
11:50: If you have a Git Repo account, set it up here.
11:56: So that was all, you need to know to set up your WaveMaker project to your External repo.
12:01: I hope this walkthrough adequately equipped you with the knowledge of the VCS manager of wavemaker. You have learned how to pull and push code how to view your changes and compared against files on the remote how to resolve conflict if required
12:16: and most of all how to work collaboratively with fellow teammates on the same project.