Modifications are real-time changes to a web page designed to improve the user experience and guide visitors to complete conversions. You create modifications through the Frosmo Control Panel.

After you have created a modification, you have two options for developing its content (HTML, CSS, JavaScript):

The Control Panel is the simpler way to develop modification content, but FProxy gives you more options for using your own tools and processes, especially if you're a software developer. This guide focuses on FProxy. For more information about developing modifications in the Control Panel, see Modifications and Creating your first modification.

Regardless of where you develop your modification content, you test the content on the site using the Frosmo Debugger.

For more information, see:

What is FProxy?

FProxy consists of a desktop-based command-line interface (CLI) and a web proxy server:

FProxy CLI in Bash

Figure: FProxy CLI in Bash

How the FProxy server works

The FProxy server is a proxy for the Message API (but it also works for modifications whose content is preloaded). This allows the Frosmo JavaScript library running on your site to retrieve modification content from your local file system instead of the Frosmo back end. Bypassing the back end in this way allows you to develop modification content locally on your computer and instantly preview the content on your site. When you're ready to put the content in production, so that visitors can see it on the site, you upload it.

With the FProxy server enabled, retrieving modification content works as follows:

  1. In the browser, the Frosmo JavaScript library calls the Message API for modification content.
  2. The Message API call is proxied to FProxy.
  3. FProxy calls the Message API with the same request for modification content.
  4. FProxy receives the response from the Message API.
  5. FProxy checks whether the variation returned in the response exists in the local file system and, if it does, replaces the original content in the response with the local content.
  6. FProxy sends the (updated) response to the Frosmo JavaScript library.
  7. The browser displays the (updated) modification content.

FProxy pros and cons

Compared to the Control Panel, developing modifications with FProxy has several advantages:

FProxy also has a few limitations you need to be aware of:

FProxy and workspaces

 FProxy supports workspaces. You can use FProxy to develop and test workspace modifications the same way you would production modifications:

The only difference to working with production modifications is that you cannot hot-reload changes to workspace modification content made in the Control Panel.

If a workspace modification uses a template, the template must also be in the workspace. If you try to download a workspace modification that uses a production template, FProxy throws an error and fails the download.

For more information about workspaces and workspaces preview mode, see Workspaces and Previewing a workspace.

What is the Frosmo Debugger?

The Frosmo Debugger is a web application that allows you to preview and debug modifications on your site during development. You need the Frosmo Debugger for setting up the FProxy server for your site.

For more information about the Frosmo Debugger, see Frosmo Debugger.

Overview of the tools and components of modification development

The following figure (click to enlarge) shows you where and how the different tools and components fit in when you develop modifications on your computer. The Frosmo back end is the only truly remote component. The drive in which you store your modification files may be a local or network drive, but it is nonetheless part of your local file system. The code editor with which you edit modification files can be any source code editor or integrated development environment (IDE) that allows you to work on HTML, CSS, and JavaScript files. You can implement version control with Git, Apache Subversion (SVN), or virtually any other version control system (VCS).

Tools and components of modification development

Figure: Tools and components of modification development

Where to go next

Before you can start developing with FProxy, you need to:

  1. Install FProxy.
  2. Initialize a directory for your site's modification content.
  3. Install the SSL certificate for the FProxy server, if you're using HTTPS.

After you have everything set up, you can start developing.

To get started with a simple example, see Example: Creating a simple site banner.

If you run into problems, see Troubleshooting and FProxy CLI commands and parameters.