We are in the process of preparing our framework to be used by other developers than us, but we haven't finished yet. If you want to start working with it, please send us an email to [email protected] and we'll help you set up a local environment.
» Frontity is a framework to build WordPress themes using React.
It is based in a fully-decoupled approach. This means it uses Node (and not PHP) to create the final server-side-rendered html.
It uses the REST API to fetch content from WordPress and a small PHP plugin (our Frontity WP Plugin) to inject Frontity in WordPress.
Apart from React, state is managed with MobxStateTree and CSS with Styled-Components.
Frontity is also extensible. Right now we have extensions like Disqus comments, OneSignal notifications, Adsense, Doubleclick, SmartAds, Google Analytics, Google Tag Manager, Custom CSS or Custom HTML. This means, your Frontity Theme won't have to reinvent the wheel each time including stuff than can be outsourced to extensions.
The Frontity's render engine also supports AMP html. This means you can reuse your React and CSS code to create your AMP pages.
First, clone this repo:
git clone https://github.com/frontity/frontity
Then clone the extensions you want to use in the packages
folder:
cd frontity/packages
git clone https://github.com/frontity/wp-org-connection
git clone https://github.com/frontity/saturn-theme
Install the packages:
cd ..
npm install
And run the project!
npm run start:pwa
Run npm run start:pwa
to start the project in development mode.
Run npm run build:pwa -- -p && npm run serve:pwa -- -p
to start the project in production mode.
Server starts in http://localhost:3000
by default.
This sets MODE
to pwa
:
npm run start:pwa
And this sets MODE
to amp
:
npm run start:amp
You can also pass --pwa
or --amp
to npm run start
:
npm run start -- --pwa
or npm run start -- --amp
You can also set MODE=amp
or MODE=pwa
in the environment variables.
Default NODE_ENV
is development
.
This sets NODE_ENV
to production
:
npm run start:pwa -- --prod
or npm run start:pwa -- -p
Default Express server is http://localhost:3000
.
This starts Express server on https://localhost:3000
:
npm run start:pwa -- --https
or npm run start:pwa -- -s
This starts node in debug mode:
npm run start:pwa -- --debug
or npm run start:pwa -- -d
Default Express port is 3000
.
This starts the server in a different port:
npm run start:pwa -- --port XXXX
This setting is for HMR only. You should use the static
query to set the public path dynamically.
This sets Webpack's HMR path (__webpack_hmr
) to http://localhost:3000
or https://localhost:3000
(depending on your http/https configuration):
npm run start:pwa -- --wp
or npm run start:pwa -- -w
This setting is for HMR only. You should use the static
query to set the public path dynamically.
This sets Webpack's HMR path (__webpack_hmr
) to a custom path:
npm run start:pwa -- --hmr https://ngrok.io/xxx
If you want to analyze the bundles, you can pass:
npm run start:pwa -- --analyze
or npm run start:pwa -- -a
The output html
files will be located in the .build/pwa/(client|server)/analyze
folders.
You should pass some queries to configure the server.
Use http://localhost:3000?siteId=XXX
to specify the site.
Use http://localhost:3000?ssrUrl=http://domain.com
to specify the SSR server.
Use http://localhost:3000?staticUrl=http://domain-static.com
to specify the Static server.
Use http://localhost:3000?server=http://domain.com
to specify both the SSR and the Static servers.
If you don't pass any server, a dynamic path ('/'
) will be used.
Use http://localhost:3000?env=prod
to specify a prod
(production) environment. If you don't pass it, then pre
is used.
This project adheres to Semantic Versioning and Angular Conventional Changelog. Every release is documented on the Github Releases page.
This project is licensed under the terms of the Apache 2.0 license.
Please take a look at our Contribution Guide.