We integrate with an existing repository on GitHub, GitLab, or Bitbucket to provide customizable full-stack preview environments directly into every pull request.
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).
Webapp.io is well suited for creating full-stack preview environment for every commit, but that’s far from the only thing it can do! We also support the following:
And much more! Check out our Advanced Workflows documentation for more information.
If you’d like to make any improvements to these docs, you can edit these docs directly.
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.
Clone the new Livechat Example repository to your local machine.
Click on the “Code” button to get the URL to clone locally.
git clone (INSERT URL HERE)
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
Make a change to the project locally, and push your changes to the repository you created.
git add . git commit -m "making some change to Livechat example" git push
Go to your dashboard on webapp.io to see your run, click on “Details”,“main-layerfile”, then “View website”.
Click on “main-layerfile” here, followed by “View Website”.
Wait for the server to start, you’ll be redirected to a preview environment with the Livechat Example.
That’s all you need to view the full-stack preview 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.
To view the power of preview 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
/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:
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
The following general limits are applied to all Webapp.io accounts to prevent abuse.
|Team members per organization||10||Unlimited||Custom|
|Number of Layerfiles created||Unlimited||Unlimited||Unlimited|
|Snapshots of Environments||1||50||Custom|
|Concurrent builds per organization||None||12||Custom servers|
If your project is likely to exceed these limits, please contact sales to discuss solutions.
|Domains per organization||Unlimited||Unlimited||Unlimited|
A snapshot is a copy of a virtual machine at a specific moment in time. Snapshots help to load environments and configurations so that you can skip running steps that have not changed or that have successfully executed on previous commits.
Listed below is a summary of how we delete snapshots. It’s important to review this to learn the states of snapshots at different times.
Order Snapshot Importance (VIP, Important, Not Important)
Environments (Layerfiles with EXPOSE WEBSITE, Layerfiles that expose a debug terminal, etc.) have three lifecycle levels:
The Running lifecycle to Stopped lifecycle happens for a few reasons:
The Stopped lifectyle to Deleted lifecycle happens for two reasons: