Documentation

Introduction

Welcome to the webapp.io docs. If you’d like to make any improvements, you can edit these docs directly. Happy coding!

What is webapp.io?

Webapp.io enables you to review changes to your projects within minutes instead of hours. We integrate with an existing repository on GitHub, GitLab, or Bitucket to provide customizable full-stack review environments directly into every pull request.

  1. Install webapp.io onto your repository
  2. Add a Layerfile (a set of instructions that tells webapp.io how to setup and run your application)
  3. Get a preview environment for every commit

Every time you push a new change, webapp.io leverages snapshots to create new copies of virtual machines (not containers!) in seconds by re-using instructions that have not been updated.

As an example, instead of running “npm install” for every push you make, webapp.io takes a snapshot so that on a subsequent push we can skip the “npm install” step (unless your dependencies have changed).

Beyond Review Environments

Webapp.io is well suited for creating full-stack review environment for every commit, but that’s far from the only thing it can do! We also support the following:

  • Pull Request Template Builder (create a template to access important information for your webapp directly from your pull request)
  • Polyrepositories (if you have multiple repo’s running your project, we support it)
  • Review Environments on your Domain
  • OAuth (logging in with external sites)

And much more! Check out our Advanced Workflows documentation for more information.



Quickstart

To view the power of review environments in action, let’s go through an example with our open-source version of Slack, Livechat Example, that uses Docker Compose. For the purpose of this quickstart guide, the codebase is monorepository, so all of the services are within a single folder (/services).

Our Livechat Example contains the following within the /services folder:

  • /api (our api to handle all requests)
  • /cypress (for running tests)
  • /migrate (for populating our database)
  • /web (our React frontend)

Most importantly, in the root directory, we have our Layerfile which is a set of instructions that tells webapp.io how to install, build, and run the Livechat Example. This Layerfile for our Livechat example is shown below:

Layerfile

FROM vm/ubuntu:18.04
    
# Install docker
RUN apt-get update && \
apt-get install apt-transport-https ca-certificates curl software-properties-common && \
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | apt-key add - && \
add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu bionic stable" && \
apt-get update && \
apt install docker-ce

# Install docker-compose
RUN curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose && \
chmod +x /usr/local/bin/docker-compose

# Copy repository files
COPY / /root

RUN /root/pull-images.sh
RUN REPEATABLE docker-compose build --parallel
RUN BACKGROUND docker-compose up

# EXPOSE WEBSITE creates an internet visible link
EXPOSE WEBSITE localhost:8000

To see the Livechat Example in 90 seconds, click the button below OR follow the steps below for a more detailed walkthrough.

View a Preview Environment for the Livechat Example


Livechat Example Walkthrough

Step 1: Go to the GitHub repository for the Livechat example and fork the repository.

Screenshot of the Livechat Example repo.

Screenshot after clicking on the button in GitHub to fork the repository.



Step 2: Clone the new Livechat Example repository to your local machine.

Click on the "Code" button to get the URL to clone locally.

terminal

        git clone (INSERT URL HERE)


Step 3: Sign up to webapp.io and install webapp.io on your GitHub account, ensuring that webapp.io has access to the repository you created.

Screenshot of the sign-up page for webapp.io

Screenshot of the installations buttons on webapp.io



Step 4: Make a change to the project locally, and push your changes to the repository you created.

terminal

    git add .
    git commit -m "making some change to Livechat example"
    git push


Step 5: Go to your dashboard on webapp.io to see your run, click on “Details”,“main-layerfile”, then “View website”.

Screenshot of the run page with the Livechat Example completed.

Screenshot of the detail page. Click on "main-layerfile" here, followed by "View Website".



Step 6: Wait for the server to start, you’ll be redirected to a preview environment with the Livechat Example.

Screenshot of the Livechat Example in a preview environment.

That’s all you need to view the full-stack review environment with webapp.io! Next, try making another change to one of the views (I.e., in /services/web/src/views/login/login.js) and push a new commit to see another preview environment with your changes.