Testing Your App with a Staging Environment

Many websites have a separate staging or test version of their website. Typically this uses a separate URL (for example testing.yourwebsite.com) where new features can be tried out before releasing them on the main website (which would be yourwebsite.com in our example).

If you have such a test environment, you can also use that inside your app. This is really helpful when you want to make sure app-specific features (like push notifications, biometrics, in app purchases, custom tabs) or upcoming website changes work as expected in the app before rolling them out to your users.

Let’s go over a few ways you can access your test environment in the app, and what to keep in mind.

For One-Off Tests

If you only want to test specific things occasionally, these approaches are quick and require minimal setup.

Hidden Button on Production Website

A simple option is to add a link to your test environment somewhere on your regular website that only you can see or access.

Some examples:

• A link that only shows up when you’re logged in as an admin or specific test account.
• A small icon or button that only appears after tapping an invisible element a few times.
• A link on a page that is very rarely visited by users, e.g. in the footer of your terms and conditions page.

Once you click the link inside the app, you'll be in your test environment inside your app.

Using the App Console

All apps created with webtoapp.design include a built-in console. Here's a guide on how to open the developer console. Inside the console, click on the "Open URL" button and then enter the URL of your test environment.

Drawbacks

The approaches mentioned above sadly have some downsides:

• Adding a hidden link to the website or going through several steps every time you want to access the test environment is quite cumbersome.
• Some features in your app (e.g. injecting CSS or Javascript) might be tied to specific URLs. So if your test environment uses different URLs, certain things might behave differently than with the production website.
• You can't test changes to your webtoapp.design configuration. If you change the menu items you configured for your app, this change will go live in your app immediately.

Separate Test App

The most flexible solution is to create a separate app for your staging URL on webtoapp.design. This avoids the drawbacks of the other testing approaches and will save you a lot of time if you regularly perform tests.

With a test app, you will be able to do these things:

• You can download and install your test app separately from the main app through TestFlight and the APK file.
• The test app will directly open your testing environment, no secret buttons needed.
• You can test and change settings in the webtoapp.design dashboard for the test app only, without affecting your production app.

We offer a separate testing app like this as part of our enterprise plan. Please contact us if you'd like to set it up.