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.

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.

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:

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.
• In the diff for a merge request, comparison, or commit.
• In the blob 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. 
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. 
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