Integrating Floro



You could integrate floro into any application. Currently our documentation and example demos focus on React and React Native. However, you could work backward from the documentation and code examples to integrate floro into a native application, an alternative JS framework, or even a CLI tool. Server rendered UI obviously cannot be tested offline with the browser extension but the assets can still be updated in real time.

Demo Repositories

If you are integrating floro into a vanilla express (or other node server) project, it is much better to use the Remix repository as documentation. Due to some limitations with how Next handles SSR, we strongly recommend Remix over Next. However, if you do not need to integrate the text plugin or you do not need live production updates to your product copy, then either framework should work fine as a reference.

Code API

As the api will change from project to project, there is no standard API. You could view the respective generators for each plugin to see the data structures consumed by the application but reading the source of the example projects will give you the best sense of how the code works.

However, the constant across all projects is that your floro repository ultimately becomes an upstream dependency to your application code.

This does mean you are basically dealing with a sub-moduled architecture, which can be daunting at first. However, once you get used to working with floro it becomes pretty easy to reason about.

Universal Features

Floro content comes with a couple of guaranteed features. You do not have to implement all of these features to get value out of floro. Some features such as Real Time Content Updates might not make sense for your application if you only depend on floro for managing color consistency in SVGs.

  • Asset Type-Safety - Every generator should be able to implement a strict and type-safe API.
  • Offline Content Edits - Just as developers are able to preview code changes in their localhost environment, content editors are able to test their local content against their production website without needing to setup a local environment. They will need to install the floro Chrome Extension though.
  • Real Time Content Updates - When a content change gets pushed or merged to the main branch, a webhook event is emitted. Depending on the content type and plugin integration, the webhook event can be consumed to update modified assets in real time without requiring a rebuild of the entire application. This allows non-developers to make production changes without you having to worry if they are going to break the production build.
  • Content Debug-ability - Some floro plugins are able to be debugged. Debugging a plugin usually means being able to use the production state of the application to lookup or quickly access the asset in floro. For example, with the chrome extension, you do not need to manually search for strings in the plugin (usually). You can instead access the strings by clicking on them when the floro debug mode is toggled on in the floro Chrome Extension.

Rest API (Real-Time Prod Updates)

If you want to support real time production updates, you should use the floro webhook to monitor for changes to a given floro branch (usually main). However, if you are using floro for a client side application, such as a mobile app, you may want to check if your repository's main branch has changed and then pull for changes from your floro repository when your application is launched.

Below is the system design floro uses for handling real-time updates to text for an SSR rendered application. The documentation for each demo covers the system design for real time updates in much greater depth.

Continuous Integration/Continuous Deployment

CI/CD is completely supported by floro. The only major modification you need to make is that you need to install the floro cli as a build step. You then need to build your floro modules before you can run test or build your code.

The remix demo has good documentation on working with github actions & docker.