This guide will try to get you from not knowing what Frontity is, to feeling amazed about the things you can do with it!

Create a new Frontity project

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/

Start development

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.

Production mode

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.

• Upload your static folder to a CDN and your server.js file to a serverless service, like Now or Netlify.

Custom setup

Once installed, Frontity will connect to our starter blog, but you can change this in the file frontity.settings.js, inside the @frontity/wp-sourcesettings:

frontity.settings.ts
const 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.

Edit the starter theme

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 the mars-theme in packages/ so the theme can be edited by the developer. However, this theme doesn't need to reside in packages/ if you don't want to edit it. It can be installed directly with npm inside node_modules/ and it will work exactly the same.

​