Why env0
Solutions
Infrastructure as Code (IaC) Automation Teams and GovernanceManaged Self-Service env0 for the Enterprise
DocumentationPricing
Resources
Case StudiesIn the NewsVideosWebinars
Blog
Login
Get a Demo
FREE TRIALContact us
Aug 27, 2020

Web Application Preview Environments

Avner Sorek
Software Engineer

Web applications, Single page applications, static websites. They are everywhere. No matter if your back-end is running on Kubernetes or serverless, public cloud or on-premise, if you have a front-end, there is a good chance it is a browser rendered, statically delivered bundle of HTML, CSS and Javascript. 

In my previous blog posts, I discussed ‘Feature Environments’ and ‘Per-Pull Request Environments’. Making your entire system run such environments is no small feat, especially if you are running complex infrastructure, a very large scale system, or legacy code without IaC. But you can still make a small effort and gain a lot of value, by adapting these isolated environments for your front-end. It’s the perfect place to start, because

  • Statically hosted front-ends tend to live on relatively simple and stateless infrastructure.
  • Sharing a feature-in-progress on the front-end is the most interesting part of the feature to share, and non-technical stakeholders will want to see that, e.g., a Product Manager that wants to do acceptance tests. 

Per-pull request environments for the front-end are commonly called “Preview environments” and can be achieved in many ways. Some CI/CD providers even offer preview environments as a paid feature, but I’d like to show you how easy it is to do this on your own - using Terraform. Rolling this out on your own, will give you better control over your infrastructure, allowing you to create preview environments which are closer to your production environment, and will probably cost you less - by cutting out the middleman.

To demonstrate how, I’ll be running a simplified React app, packaged with Parcel, and using Terraform for resource provisioning, Github as a VCS, and env0 as my environment management platform. The full source code can be found here.

There are two important files we need to look at - the first one is `env0.yaml` :

version: 1
deploy:
steps:
  terraformInit:
    before:
      - yarn
      - yarn run build
  terraformOutput:
    after:
      - aws s3 sync ./dist s3://$(terraform output s3_bucket_name)

‍

env0 will handle our Terraform files natively, taking care of creating, updating, and deleting any cloud resources we need. Before env0 initializes Terraform, we want to build our frontend. We want to do that before, so in case anything fails, we won’t provision the infrastructure for nothing.

After Terraform completes, we will run an aws CLI command, to sync our dist folder to our s3 bucket. This will upload our built website files to the bucket for hosting.

The second file we should notice is our `pr-environments.yaml`, located in the `.github` folder. It will tell Github to trigger env0, everytime we open, update, or close a Pull Request.

name: "PR Environments"
on:
pull_request:
  types: [opened, closed, reopened, synchronize]
jobs:
env0_pr_environment:
  name: "PR Environment"
  runs-on: ubuntu-16.04
  container: node:12
  steps:
    - name: Install env0 CLI
      run: yarn global add @env0/cli
    - name: Deploy Environment
      if: github.event.action != 'closed'
      run: >
        env0 deploy
        --apiKey ${{ secrets.ENV0_API_KEY_ID }}
        --apiSecret ${{ secrets.ENV0_API_KEY_SECRET }}
        --organizationId ${{ secrets.ENV0_ORG_ID }}
        --projectId ${{ secrets.ENV0_PROJECT_ID }}
        --blueprintId ${{ secrets.ENV0_BLUEPRINT_ID }}
        --environmentName "${{ github.head_ref }}"
        --revision "${{ github.head_ref }}"
    - name: Destroy Environment
      if: github.event.action == 'closed'
      run: >
        env0 destroy
        --apiKey ${{ secrets.ENV0_API_KEY_ID }}
        --apiSecret ${{ secrets.ENV0_API_KEY_SECRET }}
        --organizationId ${{ secrets.ENV0_ORG_ID }}
        --projectId ${{ secrets.ENV0_PROJECT_ID }}
        --environmentName "${{ github.head_ref }}"

‍

The steps here are pretty simple - we install the env0 CLI using a simple `yarn install` command, and we run the env0 CLI with the required parameters. The CLI will already know to create or update an environment based on the name, which will be the same as the branch we are working on. 

When the PR will be closed, we will run the CLI with the `destroy` command, and env0 will take care of cleaning up our cloud resources, so we can keep a clean cloud account, with low costs. 

Looking at an open Pull Request, Github informs us that it ran the deployment successfully - 

‍

Looking at env0, we can see a list of all our PR environments, and for each one, we can use the “Outputs” section, to get the environment’s website URL - 


That way I can Slack my product manager, and let them know they can already play around with the new video feature we’ve been working on, so I can get feedback early!


Advanced Environment Management‍

Using env0 for managing preview environments opens up some new options that are only available on an advanced environment-as-a-service platform such as env0. To name a few:

  • Time To Live for environments - making sure I don’t have any leftover resources.
  • Detailed cost monitoring - getting actual costs per environment is a huge help in understanding where our cloud costs come from.
  • Role based access - anyone in the organization can access env0, and I know they won’t do any damage, when they are assigned the correct role. 

Thank you for taking the time to read this post, I hope it helps you setting up preview environments for your web application. Once you’ve tried it yourself, I’d love to hear about it! Let me know on Twitter at @envzero.


Request a Demo

SHARE
You may also like
Ad-hoc tasks
DevOps, People, and Process
Managing Pulumi IaC with env0
Go back to blog
CNCF Member Badge
Company
About UsIn the NewsPress ReleasesCase StudiesAdditional ResourcesCareers
Developer and DevOps
APITerraform ProviderTerratag Open Source
Terraform Cloud AlternativeDIY AlternativeAtlantis Alternative
FREE TRIAL
Follow Us
Terms of ServicePrivacy PolicySecuritySystem Status
© Copyright env0 2022
This website uses cookies. We use cookies to ensure that we give you the best experience on our website. Learn More
PreferencesDenyAccept
Privacy Preference Center
When you visit websites, they may store or retrieve data in your browser. This storage is often necessary for the basic functionality of the website. The storage may be used for marketing, analytics, and personalization of the site, such as storing your preferences. Privacy is important to us, so you have the option of disabling certain types of storage that may not be necessary for the basic functioning of the website. Blocking categories may impact your experience on the website.
Reject all cookiesAllow all cookies
Manage Consent Preferences by Category
Essential
Always Active
These items are required to enable basic website functionality.
Marketing
These items are used to deliver advertising that is more relevant to you and your interests. They may also be used to limit the number of times you see an advertisement and measure the effectiveness of advertising campaigns. Advertising networks usually place them with the website operator’s permission.
Personalization
These items allow the website to remember choices you make (such as your user name, language, or the region you are in) and provide enhanced, more personal features. For example, a website may provide you with local weather reports or traffic news by storing data about your current location.
Analytics
These items help the website operator understand how its website performs, how visitors interact with the site, and whether there may be technical issues. This storage type usually doesn’t collect information that identifies a visitor.
Confirm my preferences and close