Snap Switcher

Using multiple environments to create stages in the development process is a common practice in web projects. There are many options; some use Development, Beta, and Production, while others use Development, QA, Stage, and Production. What they all have in common, however, is a set of test data that exists in the same form in every environment. Developers and testers use the same content in different environments to test site components.

In this post, we’ll explain the purposes of environments in development, why you’ll need to switch between them, and what actions are typically taken to make those switches happen. We’ll also explain the difference that Exadel’s Snap Environment Switcher plug-in makes in this process.

It’s easy enough to switch to another environment just by changing the origin of the URL in the browser’s address bar because there is an exact copy of the web project on any other environment (with the possible exception of just-added features or fixes). While constantly changing manually like this is possible, it is not necessary.

In 10-15 minutes you can find, install, and configure an extension for switching environments in your browser and get rid of annoying manual operations. With a couple of mouse clicks, you can jump from one environment to another and back, which in our opinion is pretty great.

But what about mode switching? Isn’t that just as important, and where are all the web extensions to help with that?

Modes are states of content in a web project that define the way a user can use and influence content. Obviously, the most common modes are viewing (Publish) and editing. In fact, almost all web projects have some kind of admin mode that gives advanced content editing capabilities.

Modes, like environments, are defined through a URL. Only here, the signs of the mode are already contained in the URL pathname. The pathname contains some form of a content identifier as well as a mode identifier. This identifier can be arbitrary, depending on your Content Management System (CMS).

In web projects, there is a practice for splitting modes by dividing instances. This is done for security reasons, and to reduce the load on public instances. A similar structure is implemented in CMS — Adobe Experience Manager. Let’s take a closer look.

There are two instances in AEM: Author and Publish.

AEM Publish Instance is where published content is located. It usually runs on port 4503 and is accessible from anywhere. Publish receives activated content from AEM Author Instance.

AEM Author Instance is a server, usually running on port 4502. This is where users create and edit content and transfer it to Publish Instance through activation. It also configures page components and handles other actions that should not be visible to website visitors or that require a lot of CPU time. This instance is usually located behind an internal firewall and accessed through a VPN for security reasons.

Because these instances are divided, things can get a little complicated.

The first reason for this complexity is that environments can no longer be described simply with a list of origins. Now there are two such lists — one for each instance.

So how do you describe the rules for changing modes? If you’re not dividing modes into instances, it’s enough to simply change the URL in the address bar according to the rules dictated by your CMS settings. The potential hiccups begin with the division of modes into several instances.

The first reason for this complexity is that environments can no longer be described with a list of origins (one for each instance). The second problem is that when changing the mode, it may be necessary to change the origin in the URL. But how can we set up rules for these changes?

To change the mode, again, just change the URL in the address bar according to your CMS settings. It is possible to do it manually, but we’re trying to help you avoid this routine. You may experience issues looking for an extension with such helpful functionality, especially taking into account the features which will be discussed later in our article.

There were no ready-made extensions with this functionality, so our team created their own Snap Environment Switcher extension. You can find the extension page on the Google Webstore.

For your convenience, all of the possibilities for managing environments and modes are located in the extension popup window. This window appears when you click on the extension icon in the browser toolbar.

Extension Popup Window
As you can see, the project name is displayed here. It also allows you to choose the environment and mode. The values in the selectors are the current environment and mode in the project. Naturally, the popup window will not be shown for cases when it is impossible to determine which environment is reflected in the URL in the address bar. If you click on the extension icon and nothing happens, then this is exactly what’s happening.

In order to switch to another environment or mode, choose the required values using the selectors and click the button. To open a new mode and/or environment in a new tab, use the appropriate checkbox.

Please note that environments can have multiple origins (domains or IP). To switch to the next origin in the list, just click on the button without changing anything in the popup window. The list is cyclical — when you reach the final element on your list, you’ll transition back to the first.

But first of all, in order for the popup window to work, you need to configure the plug-in. To do this, use the Options item from the extension management menu.

You can read how to configure the extension in the extension setup guide on the Guide tab, or wait for our next article in which we plan to write about the plug-in configuration process.

Now let’s quickly go through the options for configuring the extension:

  • You can configure all your projects (the number of projects is unlimited)
  • Within each project, you can configure modes and environments (there are also no restrictions)
  • Mode settings are based on regular expressions
  • Any environment can be configured as a group of sub-environments
  • You have the option to configure the relationship between sub-environments and modes so that when the mode changes, the sub-environment and the domain also change automatically (for example, switching from Publish instance to Author instance and vice versa)

You can export the finished extension configuration as a file and share it with team members. The operations for export and import are provided in the configuration.

Our work on the extension continues. Currently, we are improving the user interface and fixing bugs. We are also planning to add some new features in the future.

People are already using our extension on their projects. We hope that you’ll try it, too!
Author: Dmytro Shovchko

How can we help you?
Contact Us