Structure of the Frontity repository
The official repository of Frontity is a monorepo (managed with lerna). This means it contains several NPM packages that can be published individually but managed as a group.
├── packages
│ ├── amp
│ ├── analytics
│ ├── babel-plugin-frontity
│ ├── components
│ ├── comscore-analytics
│ ├── connect
│ ├── core
│ ├── create-frontity
│ ├── error
│ ├── file-settings
│ ├── frontity
│ ├── google-ad-manager
│ ├── google-analytics
│ ├── google-tag-manager-analytics
│ ├── head-tags
│ ├── hooks
│ ├── html2react
│ ├── mars-theme
│ ├── router
│ ├── smart-adserver
│ ├── source
│ ├── tiny-router
│ ├── twentytwenty-theme
│ ├── type-declarations
│ ├── types
│ ├── wp-comments
│ ├── wp-source
│ └── yoast
├── projects
│ ├── mars-theme
│ ├── mars-theme-ts
│ └── twentytwenty-theme
├── coverage
│ ├── ...
├── e2e
│ ├── e2e.js
│ ├── selenium
│ ├── ...
├── lerna.json
├── ...
├── package.json
└── tsconfig.json
The most relevant folder of this repository is the packages folder that contains all Frontity packages.
The projects folder contains a set of projects created for development purposes usually used to test the packages.
The e2e folder contains the End-To-End Tests (UI Tests) that start both a Frontity server and a WordPress server, along with a browser to test the behaviour of packages in real Frontity projects.
Frontity projects are built around the idea of packages that encapsulates logic that can be reused across projects. Frontity packages may be considered as the equivalent of WordPress plugins. They're the ingredients of the final Frontity project.
A Frontity project is basically the sum of the Core package plus a Theme package plus a selection of Features packages. We can also use Collections packages to help us speed up the development of our Frontity project
The packages folder of the frontity repository contains the code of these packages and their dependencies.
| Path | Package | Category | Description |
|---|---|---|---|
/packages/amp |
@frontity/amp |
AMP Package 
|
The Frontity package for AMP  
|
/packages/analytics |
@frontity/analytics |
Analytics Types | Base types and actions to build analytics packages for Frontity 
|
/packages/babel-plugin-frontity |
babel-plugin-frontity |
Frontity Core | Babel Plugin for Frontity 
|
/packages/components |
@frontity/components |
Collection 
|
Collection of React components for Frontity  
|
/packages/comscore-analytics |
@frontity/comscore-analytics |
Analytics Package
|
Comscore Analytics package for Frontity 
|
/packages/connect |
@frontity/connect |
Frontity Core | The state manager of Frontity. Similar to MobX but much more lightweight because it's based on ES6 proxies. 
|
/packages/core |
@frontity/core |
Frontity Core | The core package of the Frontity framework. 
|
/packages/create-frontity |
create-frontity |
Frontity Core | Frontity package to use npm init instead of npx. 
|
/packages/error |
@frontity/error |
Frontity Core | Frontity errors and warnings". 
|
/packages/file-settings |
@frontity/file-settings |
Frontity Core | A settings package for Frontity that uses a frontity.settings.js file. 
|
/packages/frontity |
frontity |
Frontity Core 
|
Frontity cli and entry point to other packages. 
|
/packages/google-ad-manager |
@frontity/google-ad-manager |
Ads Package
|
Integrate your Frontity site with Google Ad Manager. 
|
/packages/google-analytics |
@frontity/google-analytics |
Analytics Package
|
Analytics package to use Google Analytics with Frontity. 
|
/packages/google-tag-manager-analytics |
@frontity/google-tag-manager-analytics |
Analytics Package
|
Analytics package to use Google Tag Manager with Frontity. 
|
/packages/head-tags |
@frontity/head-tags |
SEO Package
|
Integrate your Frontity site with REST API - Head Tags by Frontity. 
|
/packages/hooks |
@frontity/hooks |
Collection
|
Collection of React hooks for Frontity. 
|
/packages/html2react |
@frontity/html2react |
Render Package
|
HTML to React converter for Frontity. 
|
/packages/mars-theme |
@frontity/mars-theme |
Theme Package 
|
A starter theme for Frontity. 
|
/packages/router |
@frontity/router |
Router Types | Types for the Frontity router namespace. 
|
/packages/smart-adserver |
@frontity/smart-adserver |
Ads Package
|
Integrate your Frontity site with Smart Adserver. 
|
/packages/source |
@frontity/source |
Source Types | Types for the Frontity source namespace. 
|
/packages/tiny-router |
@frontity/tiny-router |
Router Package
|
Tiny router for Frontity projects. 
|
/packages/twentytwenty-theme |
@frontity/twentytwenty-theme |
Theme Package
|
The WordPress Twenty Twenty starter theme for Frontity. 
|
/packages/type-declarations |
@frontity/type-declarations |
Frontity Core | Types declarations for the different Frontity APIs. 
|
/packages/types |
@frontity/types |
Frontity Core | Types for the different Frontity APIs. 
|
/packages/wp-comments |
@frontity/wp-comments |
Comments Package
|
Add integration for WordPress native comments. 
|
/packages/wp-source |
@frontity/wp-source |
Source Package
|
A Frontity source package for the REST API of self-hosted and WordPress.com sites. 
|
/packages/yoast |
@frontity/yoast |
SEO Package
|
Integrate your Frontity site with Yoast SEO plugin. 
|
Some of these packages are only meant to be used internally by other packages. Those packages with features that are most practical for Frontity projects are marked w/ the labels:
-
for Feature packages
-
for Theme packages
-
for Collection packages
-
for Core packages
In this video you can learn more about the purpose of these Frontity Packages in the
frontityrepository
The official repository of Frontity is a monorepo managed by lerna.
The bootstrapping process of this monorepo allows you to install the dependencies the packages and projects in the repo and symlink these packages that are dependencies of each other.
That's why the projects under the projects folder are a good way to test the packages of the repo (local changes in any of the packages used by these projects will be reflected in them).
| Path | Description |
|---|---|
/projects/mars-theme-ts |
A simple Frontity project using mars-theme and a TypeScript frontity settings for testing purposes |
/projects/mars-theme |
A simple Frontity project using mars-theme for testing purposes |
/projects/twentytwenty-theme |
A simple Frontity project using twentytwenty-theme for testing purposes |