👩🔬 Lab - Customize the UI
In this lab you use everything you've learned so far, to add a customization to the pipeline. Specifically, you change the name of the chat room in the web UI.
You develop this change on a feature branch, and then you create a PR to merge your new feature into the
This is a common pattern for development - you can test your new service on the feature branch, and then test again on the
tutorial branch, before final integration into the production
Create an environment
To create a new environment (and branch):
+ New environmentto create a new environment (note, your screen will look slightly different to the one shown here):
Create a new environment called
Rename Chat Room.
Create a new branch called
rename-chat-room. To do this, from the branch dropdown click
+ New branchwhich displays the New branch dialog.
Make sure you branch from the
main, as you are going to merge your changes back into the
Complete creation of the environment using the default options.
On the projects screen, click your newly created environment,
Rename Chat Room.
Sync the environment
You now see that the Quix environment is out of sync with the Git repository. You need to synchronize the Quix view of the environment, with that stored in the repository.
To synchronize Quix with the repository:
The sync environment dialog is displayed, showing you the changes that are to be made to the
quix.yamlfile, which is the configuration file that defines the pipeline.
Sync environment, and then
Go to pipeline.
In the pipeline view, you see the services building. Ensure all services are "Running" before continuing.
Edit the code
You are now going to edit the code for the UI to rename the chat room. To do this:
Applicationsin the left-hand navigation. Locate the UI application in the list and click on it. The code view loads.
Locate the file
room.service.tsand click it. You can then change the room name to something like
Support Chat Room:
Committo save your changes (or use your usual Save hotkey such as Command-s).
Click the tag icon, and enter a tag value such as
Now click the
Redeploybutton on the top right of the code screen.
Edit deploymentdialog select the tag
Version tagdropdown, and then click
At this point the redeployment will restart. You see the spinner as the service rebuilds. After some time, the service the spinner will disappear and you can test the UI again. The name of the chat room has changed:
Once you're happy with your change you can move on to merge this to the
Merge the feature
Once you are sure that the changes on your feature branch are tested, you can then merge your changes onto the
tutorial branch. Here your changes undergo further tests before finally being merged into production.
To merge your feature branch,
Merge requestfrom the menu as shown:
Merge requestdialog, set the
rename-chat-roombranch to merge into the
You are going to create a pull request, rather than perform a direct merge. This enables you to have the PR reviewed in GitHub (or other Git provider). You are also going to do a squash and merge, as much of the feature branch history is not required.
Create the pull request
To create the pull request:
Create pull requestin Quix. You are taken to your Git provider, in this case GitHub.
Add your description, and then click
Create pull request.
Get your PR reviewed and approved. Then squash and merge the commits.
You can replace the prefilled description by something more succinct. Then click
Confirm squash and merge.
You can just merge, you don't have to squash and merge. You would then retain the complete commit history for your service while it was being developed. Squash and merge is used in this case by way of example, as the commit messages generated while the service was being developed were deemed to be not useful in this case.
Resync the environment
You have now merged your new feature into the
tutorial branch in the Git repository. Your Quix view in the Tutorial environment is now out of sync with the Git repository. If you click on your Tutorial environment in Quix, you'll see it is now a commit (the merge commit) behind.
You now need to make sure your Tutorial environment in Quix is synchronized with the Git repository. To do this:
Sync environment. The
Sync environmentdialog is displayed.
Review the changes and click
Go to pipeline.
Your new service will build and start in the Tutorial environment, where you can now carry out further testing. When you are satisfied this feature can be released to production, then you would repeat the previous process to merge your changes to Production