Frontity Embedded Mode
In Frontity there are two main modes of implementation: Decoupled Mode and Embedded Mode
Embedded Mode offers several advantages over Decoupled Mode.
- The WordPress site exists under the primary domain, thus ensuring that:
- all the SEO benefits already built in to WordPress work as normal
- existing SEO (for a site transitioning to Frontity) will not be affected
- sitemaps generated by WordPress/Yoast/All-in-one-SEO work as normal
- WordPress page cache plugins and hosting CDNs continue to work as normal
- Content producers/editors continue to have the same experience
- post/page preview remains available
- the admin bar is active for logged in users
But there are some things to be taken into account when using this Embedded Mode:
- Frontity still needs to be hosted on a separate node server/serverless function (albeit on any domain you like including default domains provided by the hosting provider)
- more routing is involved (WordPress makes a call to Frontity which returns the HTML to WordPress) so a caching plugin is a necessity rather than simply a nice to have.
Installation is a three step process: Download → Install → Activate.
In order to use Frontity in embedded mode with this Frontity Embedded Mode plugin you need to:
This can be configured in a variety of ways:
Once the plugin has been activated a new 'Frontity Embedded Mode' option appears under 'Settings'.
Select this and enter the URL of the Frontity server in the input field. (During development this can be
http://localhost:3000. In production this will be the deployed location of your Frontity site)
It is also possible to use an environment variable instead of changing the URL in the settings.
Note that the environment variable, if it exists, takes precedence over the setting configured in the settings page.
Lastly a PHP constant can be defined. This would usually be done in the
define( 'FRONTITY_SERVER', 'https://myfrontityserver.com' );
Note that if the PHP constant exists, it takes precedence over both the environment variable and the settings page setting.
By default Frontity will look for static assets (such as images, fonts, .js or .css files, etc...) in the path
However, since in Embedded mode the primary domain is pointing to the WordPress installation, Frontity will not find the static assets at this location.
Therefore, if required, it's possible to change the directory or URL where your static assets are stored at build time. To do this you can use the
--public-pathoption of the
npx frontity buildcommand.
The URL (or path) of the static assets will differ depending on the scenario in which you're using this Embedded Mode plugin.
If you are using the same server for both WordPress and Frontity, and your Frontity project is at
/wp-content/frontity, say, then your static folder will be at
You can change the folder when you run
npx frontity buildthus:
> npx frontity build --public-path /wp-content/frontity/build/static
This ensures that Frontity will source it's assets from this location instead of from the default
If you've deployed Frontity to an external hosting service, for example Vercel, then you can use the
--public-pathoption to point directly to the Vercel URL:
> npx frontity build --public-path https://myfrontityapp.vercel.app/static
If you want to use the Embedded mode while you are developing in your local environment, you can do so by using the
--public-pathparameter in the
npx frontity devcommand as well:
> npx frontity dev --public-path http://localhost:3000/static