A modification is a real-time change to a web page designed to personalize or otherwise improve the user experience of the website and to guide visitors to complete a conversion. You create modifications through the Frosmo Control Panel.

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

  • Frosmo Control Panel

    You define the content in the Control Panel. The only tool you need is a browser running the Control Panel. You can, of course, use an external source code editor to write the content, but to deploy the content you need to copy it to the Control Panel.

    You can create content templates that allow you to define content once and then reuse that content across multiple modifications.

  • FProxy

    You use FProxy to download the content to your local file system, edit the content in any source code editor, and use FProxy to upload the content back to the Frosmo back end. You can manage the downloaded content files with any version control system.

    If a modification uses a template, FProxy automatically downloads and uploads the template content alongside the modification. You can work on template content the same as modification content. For simplicity, this guide mostly talks about "modification content" or just "content", but you can assume that to also include template content.

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 Creating and editing a modification.

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

For more information, see:

What is FProxy?

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

  • FProxy CLI allows you to download and develop modification content locally on your computer, outside the Control Panel.
  • FProxy server allows you to live-preview and hot-reload modification content (including templates) on your site during development, without the need to first upload the content to the Frosmo back end or update the Frosmo custom script for your site. Hot reloading allows you to reload only the content of the changed modification rather than the entire page.

    You can also hot-reload changes to modification content made in the Control Panel, provided you do not have the same modification (or template) downloaded on your computer.

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:

  • You can write modification content in any source code editor without having to copy the content back to the Control Panel.
  • You can use code linting for CSS and JavaScript, since FProxy separates HTML, CSS, and JavaScript content to dedicated source files.
  • You can manage modification content with a version control system, since the content is in a file system.
  • You can hot-reload modification content in your browser, so that only the content of the changed modification rather than the entire page is reloaded. This is especially useful in situations where reloading the page would throw you out of a funnel you want to stay in, such as a payment funnel.
  • You can monitor for changes in your downloaded modification content and automatically upload changed files to the Frosmo back end.

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

  • You cannot create new modifications or variations through FProxy. You can only download content for modifications that already exist in the Frosmo back end. If you want to develop a new modification, you must first create the modification and its variations through the Control Panel or the Graniitti API.
  • FProxy does not support image variations (a deprecated feature of the Frosmo Platform) or variations whose content type is Original content, since these variations do not contain any code content.
  • If a modification or variation is removed from the Frosmo back end, FProxy does not automatically remove the corresponding files from your file system. You need to manually remove the files.
  • In the browser, the FProxy server can only retrieve and hot-reload downloaded content for active modifications. While you can download and upload content for deactivated modifications, you cannot preview local changes to that content through the server.
  • The FProxy server is not compatible with workspaces. For more information, see FProxy and workspaces.
  • If you have JavaScript in your modification that changes the DOM or the global page state through the window object, hot reloading does not revert these changes. Hot reloading simply executes the JavaScript of the reloaded modification on top of previous executions for the same modification.

FProxy and workspaces

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

  • Download and develop workspace modification content locally on your computer.
  • Live-preview and hot-reload the downloaded workspace modification content (including templates) on your site in workspace preview mode.

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 Frosmo Preview?

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

For more information about the application, see Frosmo Preview.

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 (click to enlarge)

Where to go next