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.
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 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 content. You can work on the template content the same as the 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 Modifications and Creating your first 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.
Figure: FProxy CLI in Bash
How the FProxy server works
With the FProxy server enabled, retrieving modification content works as follows:
- The Message API call is proxied to FProxy.
- FProxy calls the Message API with the same request for modification content.
- FProxy receives the response from the Message API.
- 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.
- 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 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 or tracking-type comparison groups, since these contain no code content. You can only download HTML variation content for modifications.
- 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.
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.
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
Figure: Tools and components of modification development (click to enlarge)
Where to go next
Before you can start developing with FProxy, you need to:
- Install FProxy.
- Initialize a directory for your site's modification content.
- 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.