Why Qovery Preview Environments Are So Valuable to Development Teams
Tags: devops, productivity, webdev, javascript
Published: 2023-02-27 14:48:54

## The popularity of PR Preview Environments

Over the last few years, the use of PR “preview environments” have exploded in popularity.

Preview environments are clones of a production environment (including applications, databases and configuration) that are automatically created on every pull request.

Development teams use preview environments to “preview” the code changes in a pull request before they get merged. These environments are called “preview environments” or “ephemeral environments” because they are by definition, not permanent. These environments are temporary environments that represent a feature-specific version of staging or production, enabling developers, QA engineers, or even product managers to quickly review the new feature without the hassle of complex staging or production environment dependencies.

## Benefits of Preview Environments

Using PR preview environments has many benefits. To list a few:

1. Shorter Feedback Cycles and Faster Delivery - Preview environments can facilitate faster feedback cycles and reduce your time to market. For a product already in production, the ability to release fixes without overriding the staging build is a lifesaver.
2. Improved Review Process and Product Quality - Preview environments get all relevant stakeholders to the review table - developers, designers, QA, PMs, marketing, management and more. This improves the quality of the review process and, by extension, the quality of the code and product.
3. Reduced Costs - Because preview environments are ephemeral in nature, they are removed as soon as the PR is merged back into the master branch. This eliminates the need for permanent infrastructure which reduces cloud costs. Furthermore, the automatic provisioning and de-provisioning of deployment previews reduce the workload of DevOps teams and enable them to focus on other tasks

If you want to learn more about the benefits of using preview environments, check out [this article](https://www.qovery.com/blog/why-preview-environments-are-the-new-thing-in-devops) that offers a more detailed overview.

## Qovery Makes it Easy to Set Up Preview Environments

There are many services out there offering to facilitate “preview environments” for development teams, and the potential upside sounds great. But the reality is that setting up preview environments with other platforms can be difficult and costly. These preview environment systems often need to manage multiple applications within the same environment, coming from different repositories. It’s a challenging task, .especially when ongoing automation is involved.

This is why Qovery offers a preview environment solution that dramatically simplifies this process and provides preview environments without the DevOps friction, complexity and costs.

Using Qovery, you can directly integrate your preview environment with your AWS account and configure it with just a few clicks.


![Qovery Previews](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vztw6627n8g8ugcv52sa.jpg)

Check out [this step-by-step guide](https://hub.qovery.com/guides/tutorial/getting-started-with-preview-environments-on-aws-for-beginners/#auto-stop-and-start-your-preview-environments) to see just how easy it is to get started.

## Get clearer feedback in context by connecting Livecycle to your Preview Environments

Qovery’s easy-to-configure preview environments are just the tip of the iceberg though. Because once you’ve set up your preview environments, you can connect them to [Livecycle](https://www.sdk.livecycle.io/qovery?utm_source=devto&utm_medium=post&utm_campaign=qoverypost) and let your team collaborate and give feedback in context, on top of the PR itself.

[Livecycle’s SDK](https://www.sdk.livecycle.io/qovery?utm_source=devto&utm_medium=post&utm_campaign=qoverypost) turns your Qovery preview environments into collaborative playgrounds where every stakeholder can review, collaborate and comment in context, on top of the product UI.

When a PR is opened and a preview environment is created, the Livecycle collaboration tools are overlayed on the product UI, allowing each reviewer to leave their comments in context and to see the other comment threads and overall status.


![Qovery and Livecycle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cohebpt7a08qr7rqy7q.jpg)
Livecycle’s Figma-like, on-page markup capabilities facilitate a truly collaborative workflow on top of the Qovery infrastructure.

Livecycle maintains the comments per-playground, and everything is also synced back to GitHub (or your preferred Git/SCM provider) so that code owners can see the relevant feedback in their preferred context. And supported integrations with other platforms like Slack, Jira, and Linear allow you to speed up your workflow without adding steps or changing tools.

Livecycle extends the value of your Qovery preview environments by making them a place for contextual reviews and inclusive collaboration. This allows teams to achieve the streamlined workflows and increased velocity that they are aiming for.

## How it works: The Qovery + Livecycle Workflow

Once your Qovery environments are set up together with the Livecycle SDK, Livecycle will kick off the workflow by automatically distributing the link to the preview environment to all the relevant collaborators on the team when a PR is opened. And even if someone is missing from the list, you can add them at any time to join the project.

When a team member opens the preview environment, the Livecycle tools are readily available for collecting feedback in full context, including:

* Screenshots for highlighting specific areas of the UI
* Video capture to record a particular user sequence
* Element editor for making suggested changes to HTML and CSS elements
* Text-based comments
* Tagging team members, emoji reactions and status designation per-comment making sure everyone is kept in the loop

Since these tools are available in the preview environment itself, reviewers can give better feedback by marking up the actual product UI. And the code owners can understand the feedback faster and address it sooner, without needing to coordinate more meetings.

{% embed https://www.youtube.com/embed/4E4FwyXvEEY %}


## Getting Started with Qovery and Livecycle

To get started with your Qovery Preview Environments, check out [this step-by-step guide](https://hub.qovery.com/guides/tutorial/getting-started-with-preview-environments-on-aws-for-beginners/#auto-stop-and-start-your-preview-environments).

Adding the Livecycle SDK to the project can be as simple as this:

``` html
<script src="https://unpkg.com/@livecycle/sdk@stable/dist/browser/index.js"></script>
<script>
  LivecycleSdk.init().catch(console.error)
</script>
```

To learn how to connect the Livecycle SDK to your Qovery Preview Environments, check out the [Livecycle SDK documentation](https://docs.livecycle.io/getting-started/connect-previews/).

## Conclusion and Next Steps

The benefits of preview environments are becoming increasingly clear to product development teams. At the same time, many preview environment platforms are creating additional DevOps burdens to set up and maintain these preview environments.

Qovery solves this by providing an easy way to gain all the benefits of preview environments while simultaneously making the life of the DevOps team easier.

And by connecting Livecycle to these environments, development teams can collaborate in context on top of PR preview environments. 

**[Try Livecycle](https://www.sdk.livecycle.io/qovery?utm_source=devto&utm_medium=post&utm_campaign=qoverypost) with your Qovery Preview Environments today to dramatically improve your team’s performance and your overall developer experience.**