Audit Apps is a coordinated effort instrument that removes the difficult work from giving a climate to exhibit item changes.

Presentation

Audit Apps:

  • Give a programmed live see of changes made in an element branch by turning up a powerful climate for your union solicitations.
  • Permit designers and item supervisors to see your progressions without expecting to look at your branch and run your adjustments in a sandbox climate.
  • Are completely incorporated with theĀ GitLab DevOps LifeCycle.
  • Permit you to send your progressions any place you need.

Review Apps Workflow

In the above model:

  • A Review App is assembled each time a submit is pushed toĀ topic branch.
  • The analyst bombs two audits prior to passing the third survey.
  • After the survey has passed,Ā topic branchĀ is consolidated intoĀ masterĀ where it is conveyed to arranging.
  • Subsequent to having been affirmed in arranging, the progressions that were consolidated intoĀ masterĀ are sent in to creation.

How Review Apps work

A Review App is a planning of a branch with anĀ environment. Admittance to the Review App is made accessible as a connection on theĀ merge requestĀ relevant to the branch.

Coming up next is an illustration of a consolidation demand with a climate set progressively.

Review App in merge request

In this model, a branch was:

  • Effectively constructed.
  • Sent under a unique climate that can be reached by tapping on theĀ View appĀ button.

Subsequent to adding Review Apps to your work process, you follow the expanded Git stream. That is:

  1. Push a branch and let the sprinter send the Review App dependent on theĀ scriptĀ definition of the dynamic climate work.
  2. Trust that the sprinter will build and send your web application.
  3. Snap on the connection gave in the consolidation demand identified with the branch to see the progressions live.

Designing Review Apps

Audit Apps are constructed onĀ dynamic conditions, which permit you to progressively establish another climate for each branch.

The way toward arranging Review Apps is as per the following:

  1. Set up the foundation to have and convey the Review Apps (check theĀ examplesĀ below).
  2. InstallĀ andĀ configureĀ a sprinter to do arrangement.
  3. Set up an occupation inĀ .gitlab-ci.ymlĀ that utilizes theĀ predefined CI climate variableĀ ${CI_COMMIT_REF_NAME}Ā to establish dynamic conditions and confine it to run uniquely on branches. On the other hand, you can get a YML layout for this employment byĀ enabling audit appsĀ for your task.
  4. Alternatively, set an employment thatĀ manually stopsĀ the Review Apps.

Empower Review Apps button

IntroducedĀ in GitLab 12.8.

When arranging Review Apps for an undertaking, you need to add a new position toĀ .gitlab-ci.yml, as referenced previously. To encourage this and in the event that you are utilizing Kubernetes, you can click theĀ Enable Review AppsĀ button and GitLab will incite you with a format code block that you can reorder intoĀ .gitlab-ci.ymlĀ as a beginning stage. To do as such:

  1. Go to the undertaking your need to make a Review App work for.
  2. From the left nav, go toĀ OperationsĀ >Ā Environments.
  3. Snap on theĀ Enable Review AppsĀ button. It is accessible to you in the event that you have Developer or higherĀ permissionsĀ to that venture.

Duplicate the gave code piece and glue it into yourĀ .gitlab-ci.ymlĀ file:

Enable Review Apps modal

  1. Don’t hesitate to tune this layout to your own requirements.
  2. Survey Apps auto-stop
  3. Perceive how toĀ configure Review Apps conditions to terminate and auto-stopĀ after a given timeframe.
  4. Survey Apps models
  5. Coming up next are model ventures that show Review App setup:
  • NGINX.
  • OpenShift.
  1. Other examples of Review Apps:
  • Ā Cloud Native Development with GitLab.
  • Review Apps for Android.
  1. Route Maps
  2. Introduced in GitLab 8.17. In GitLab 11.5, the file links are available in the merge request widget.
  3. Route Maps allows you to go directly from source files to public pages on theĀ environmentĀ defined for Review Apps.
  4. Once set up, the review app link in the merge request widget can take you directly to the pages changed, making it easier and faster to preview proposed modifications.
  5. Configuring Route Maps involves telling GitLab how the paths of files in your repository map to paths of pages on your website using a Route Map. Once set, GitLab will displayĀ View on … buttons, which will take you to the pages changed directly from merge requests.
  6. To set up a route map, add a file inside the repository atĀ .gitlab/route-map.yml, which contains a YAML array that mapsĀ sourceĀ paths (in the repository) toĀ publicĀ paths (on the website).
  7. Route Maps example
  8. The following is an example of a route map forĀ Middleman, a static site generator (SSG) used to buildĀ GitLab’s website, deployed from itsĀ project on GitLab.com:
  9. # Team data
    - source: 'data/team.yml'  # data/team.yml
      public: 'team/'  # team/
    
    # Blogposts
    - source: /source\/posts\/([0-9]{4})-([0-9]{2})-([0-9]{2})-(.+?)\..*/  # source/posts/2017-01-30-around-the-world-in-6-releases.html.md.erb
      public: '\1/\2/\3/\4/'  # 2017/01/30/around-the-world-in-6-releases/
    
    # HTML files
    - source: /source\/(.+?\.html).*/  # source/index.html.haml
      public: '\1'  # index.html
    
    # Other files
    - source: /source\/(.*)/  # source/images/blogimages/around-the-world-in-6-releases-cover.png
      public: '\1'  # images/blogimages/around-the-world-in-6-releases-cover.png
  10. Mappings are defined as entries in the root YAML array, and are identified by aĀ -Ā prefix. Within an entry, there is a hash map with two keys:
  • source
    • A string, starting and ending withĀ ', for an exact match.
    • A regular expression, starting and ending withĀ /, for a pattern match:
      • The regular expression needs to match the entire source path –Ā ^Ā andĀ $Ā anchors are implied.
      • Can include capture groups denoted byĀ ()Ā that can be referred to in theĀ publicĀ path.
      • Slashes (/) can, but don’t have to, be escaped asĀ \/.
      • Literal periods (.) should be escaped asĀ \..
  • public, a string starting and ending withĀ '.
    • Can includeĀ \NĀ expressions to refer to capture groups in theĀ sourceĀ regular expression in order of their occurrence, starting withĀ \1.
  1. The public path for a source path is determined by finding the firstĀ sourceĀ expression that matches it, and returning the correspondingĀ publicĀ path, replacing theĀ \NĀ expressions with the values of theĀ ()Ā capture groups if appropriate.
  2. In the example above, the fact that mappings are evaluated in order of their definition is used to ensure thatĀ source/index.html.hamlĀ will matchĀ /source\/(.+?\.html).*/Ā instead ofĀ /source\/(.*)/, and will result in a public path ofĀ index.html, instead ofĀ index.html.haml.
  3. After you have the route mapping set up, it will take effect in the following locations:
  • In the merge request widget. The:
    • View appĀ button will take you to the environment URL set inĀ .gitlab-ci.yml.
    • Dropdown will list the first 5 matched items from the route map, but you can filter them if more than 5 are available.View app file list in merge request widget
  • In the diff for a merge request, comparison, or commit."View on env" button in merge request diff
  • In the blob file view."View on env" button in file view
  1. Visual Reviews
  2. STARTER
  3. BRONZE
  4. Version history
  5. With Visual Reviews, members of any team (Product, Design, Quality, and so on) can provide feedback comments through a form in your review apps. The comments are added to the merge request that triggered the review app.
  6. Using Visual Reviews
  7. After Visual Reviews has beenĀ configuredĀ for the Review App, the Visual Reviews feedback form is overlaid on the right side of every page.
  8. Visual review feedback form
  9. To use the feedback form to make a comment in the merge request:
  10. Click theĀ ReviewĀ tab on the right side of a page.
  11. Make a comment on the visual review. You can make use of all theĀ Markdown annotationsĀ that are also available in merge request comments.
  12. Enter your personal information:
    • IfĀ data-require-authĀ isĀ true, you must enter yourĀ personal access token.
    • Otherwise, enter your name, and optionally your email.
  13. ClickĀ Send feedback.
  14. Ā To see Visual reviews in action, see theĀ Visual Reviews Walk through.
  15. Configure Review Apps for Visual Reviews
  16. The feedback form is served through a script you add to pages in your Review App. If you haveĀ Developer permissionsĀ to the project, you can access it by clicking theĀ ReviewĀ button in theĀ PipelineĀ section of the merge request. The form modal will also show a dropdown for changed pages ifĀ route mapsĀ are configured in the project.
  17. review button
  18. The provided script should be added to theĀ <head>Ā of your application and consists of some project and merge request specific values. Here’s how it looks for a project with code hosted in a project on GitLab.com:
  19. <script
      data-project-id='11790219'
      data-merge-request-id='1'
      data-mr-url='https://gitlab.com'
      data-project-path='sarah/review-app-tester'
      data-require-auth='true'
      id='review-app-toolbar-script'
      src='https://gitlab.com/assets/webpack/visual_review_toolbar.js'>
    </script>
  20. Ideally, you should useĀ environment variablesĀ to replace those values at runtime when each review app is created:
  • data-project-idĀ is the project ID, which can be found by theĀ CI_PROJECT_IDĀ variable.
  • data-merge-request-idĀ is the merge request ID, which can be found by theĀ CI_MERGE_REQUEST_IIDĀ variable.Ā CI_MERGE_REQUEST_IIDĀ is available only ifĀ only: [merge_requests]Ā is used and the merge request is created.
  • data-mr-urlĀ is the URL of the GitLab instance and will be the same for all review apps.
  • data-project-pathĀ is the project’s path, which can be found byĀ CI_PROJECT_PATH.
  • data-require-authĀ is optional for public projects but required forĀ private and internal ones. If this is set toĀ true, the user will be required to enter theirĀ personal access tokenĀ instead of their name and email.
  • idĀ is alwaysĀ review-app-toolbar-script, you don’t need to change that.
  • srcĀ is the source of the review toolbar script, which resides in the respective GitLab instance and will be the same for all review apps.
  1. For example, in a Ruby application with code hosted on in a project GitLab.com, you would need to have this script:
  2. <script
      data-project-id="ENV['CI_PROJECT_ID']"
      data-merge-request-id="ENV['CI_MERGE_REQUEST_IID']"
      data-mr-url='https://gitlab.com'
      data-project-path="ENV['CI_PROJECT_PATH']"
      id='review-app-toolbar-script'
      src='https://gitlab.com/assets/webpack/visual_review_toolbar.js'>
    </script>
  3. Then, when your app is deployed via GitLab CI/CD, those variables should get replaced with their real values.
  4. Determining merge request ID
  5. The visual review tools retrieve the merge request ID from theĀ data-merge-request-idĀ data attribute included in theĀ scriptĀ HTML tag used to add the visual review tools to your review app.
  6. ​After determining the ID for the merge request to link to a visual review app, you can supply the ID by either:​​
  • Hard-coding it in the script tag via the data attributeĀ data-merge-request-idĀ of the app.
  • Dynamically adding theĀ data-merge-request-idĀ value during the build of the app.
  • Supplying it manually through the visual review form in the app.
  1. Enable or disable Visual Reviews
  2. STARTER
  3. Visual Reviews is deployed behind a feature flag that isĀ enabled by default.Ā GitLab administrators with access to the GitLab Rails consoleĀ can opt to disable it.
  4. To disable it:
  5. Feature.disable(:anonymous_visual_review_feedback)
  6. To enable it:
  7. Feature.enable(:anonymous_visual_review_feedback)
  8. Authentication for Visual Reviews
  9. IntroducedĀ in GitLab 12.10.
  10. To enable visual reviews for private and internal projects, set theĀ data-require-authĀ variableĀ toĀ true. When enabled, the user must enter aĀ personal access tokenĀ withĀ apiĀ scope before submitting feedback.
  11. This same method can be used to require authentication for any public projects.
  12. Limitations