This guide will try to get you from not knowing what Frontity is, to feeling amazed about the things you can do with it!
Frontity has it's own CLI so you can just create a new Frontity project with a single command:
npx frontity create my-app && cd my-app
For those wondering what npx is you can have a look at this article. TL;DR It downloads an npm package to run just this one time and then removes it from your computer.
This command will create a new directory with the following structure:
my-app/|__ node_modules/|__ package.json|__ frontity.settings.js|__ favicon.ico|__ packages/|__ mars-theme/
Now you can start a development server with:
npx frontity dev
This server will be listening to http://localhost:3000
and watching for any changes inside the packages
folder.
Once you are happy with your site and want to deploy it to production you can use
npx frontity build
to create a production-ready bundle.
It will create a /build
folder with a server.js
file and a /static
folder with all your javascript files and other assets. You can either
Use npx frontity serve
to run it like a normal Node app.
Once installed, Frontity will connect to our starter blog, but you can change this in the file frontity.settings.js
, inside the @frontity/wp-source
settings:
frontity.settings.tsconst settings = {...,packages: [...,{name: "@frontity/wp-source",state: {source: {// Here you should write the url point of your WordPress API.api: "https://test.frontity.io/wp-json/"}}}]}โexport default settings;
Now you can run it again with npx frontity dev
and the theme should be now populated with your own WordPress content.
With Frontity you won't have your site code in the root folder like you would have with gatsbyjs
or next.js
. Instead you will develop Frontity packages and in order to personalize your site you'll edit a theme package.
The installed theme with npx frontity create
is @frontity/mars-theme
and you can find it in packages/mars-theme/
. You can edit any of its files while running Frontity and the site will refresh automatically.
npx frontity create
will install themars-theme
inpackages/
so the theme can be edited by the developer. However, this theme doesn't need to reside inpackages/
if you don't want to edit it. It can be installed directly withnpm
insidenode_modules/
and it will work exactly the same.
โ
Still have questions? Ask the community! We are here to help ๐