Getting started with WunderPreview

From zero to a running preview in almost no time!

In this guide, we’ll show you everything you need to do to get automated previews for your software project.

Connecting WunderPreview to your GitHub account

Go to app.wunderpreview.com and log in with your GitHub account.

You will see an almost empty dashboard with a link called "Add new organization".

Click the "Add new organization" link and you’ll be directed to GitHub where you can select the GitHub organization and the repositories you want to connect to WunderPreview.

Screenshot of selecting the repositories to connect to WunderPreview
Selecting the repositories to connect to WunderPreview

When you’ve finished selecting your repositories you will be redirected back to WunderPreview. There you’ll see your dashboard with your GitHub organizations and the list of connected repositories:

Screenshot of the WunderPreview dashboard
The WunderPreview dashboard

Starting your previews

In your WunderPreview dashboard you can see your connected repositories.

The first time you click on a repository you’ll need to "enable" it. This will allow our WunderPreview Bot to post links to your previews into your pull requests (more on the WunderPreview Bot further down).

Screenshot of enabling a repository
Enabling a repository

When you select one of your enabled repositories you will get a list of the recently updated pull requests. This is where you access your previews and their logs and also see the status of all your previews.

Screenshot of repository list
One preview currently building.

For every pull request you can see when it was last updated and by whom.

Additionally, you can see the status of the preview. This will tell you if the preview is running, currently building or if an error occurred during the build. The first status a preview has is "Not running".

On the right side you have two controls "Show Logs" and "Preview".

Preview: If your preview is already running, this button will bring you to your running preview! The first time you click this button will start the build process of your preview.

Show Logs: This opens the log viewer of your preview system (more on the log viewer below).

When you enable a repository in WunderPreview it will receive links to the preview URLs right there in the pull requests on GitHub.

Screenshot of GitHub with link to the latest preview with a history of all previews in this pull request
Link to the latest preview with a history of all previews in this pull request.

Whenever you push to your pull request the comment will be updated so you always have the link to the latest preview.

You will also get a list of all the previews for this pull request, so it is easy to compare different commits of the pull request.

Using the log viewer

Screenshot of service logs of a running preview
Service logs of a running preview.

We have two kinds of logs in our log viewer: the "Build Log" and the "Service Log".

Build Log: The log that is generated when building your preview container.

Service Log: All messages your project prints to standard output and/or standard error.

Changing preview settings and environment variables

By default, WunderPreview tries to connect to your project via port 8000. If your project is running on a different port you’ll get an error:

Screenshot of error when port settings need to be changed
The port settings need to be changed.

Change the port in the repositories settings. Just click the "Change Port in Settings" button to go to your repositories settings.

In the WunderPreview Dashboard you can get to the repositories' setting by clicking the small cog on the right side of the list of repositories:

Screenshot of WunderPreview dashboard
The cogs on the right side lead to the repositories settings page.

The settings screen of your repository look something like this:

Screenshot of WunderPreview repository settings

Here you can change various things:

  • Enable WunderPreview: This enables or disables your repository in WunderPreview. Only enabled repositories will have previews and receive preview links in their pull requests on GitHub.

  • Require authentication: If this setting is enabled, all visitors of your preview link will be asked to authenticate with their GitHub account. Only members of your GitHub organization with access to this repository can view your preview.
    If this is setting is disabled everyone with the link can view your preview.
    This setting is enabled by default for all private GitHub repositories.

  • Port: The port your project is running on. The default is 8000.

  • Environment Variables: Here you can specify environment variables for your project.
    During the build of your preview container, these environment variables are given as build arguments to the "docker build" command.
    These environment variables are injected into the running preview, so they are also available during run-time of your preview.
    All environment variables are saved in a encrypted file only your WunderPreview user has access to. We never print the environment variables in any of our log files.

Special environment variable

There are some special environment variables like IS_WUNDERPREVIEW.

Those variables are given as build argument to the "docker build" command and are also available during run-time of your preview.

Read the full guide on environment variables in WunderPreview

Bottom Line

That's all you need to set up WunderPreview and give your development team the power of automated previews!


Do you have any questions or remarks? Just send us an email to hi@wunderstack.io. We are happy to hear from you!

Keep things moving with automated previews.

Screenshot of WunderPreview Dashboard