Migrating your Wordpress Blog to Frontity

Frontity is an Open Source Front-end Framework to build super-fast headless Wordpress sites using React, which serves its data through the Wordpress REST API.

What will you learn in this article
I will explain a few things about REST API, What a headless wordpress site means, Frontity, and how to get started with it.

What do you need to know for this Course?

• You need to know about Wordpress and be familiar with it.

• You will need to have understood some basics of React to help you sync the information here.

• Programming Knowledge/little coding experience

• Nodejs installed on your machine. If you don't have it, you can check it here to get started

• Open mind to learn

What is the REST API

The acronym REST API stands for Representational State Transfer Application Programming Interface. So, we will take it one after the other in other to make you understand the terminologies much better.

REST is a set of rules (constraints ) or basically an architectural style to which is used in building web services. When a web service meets the demands of REST is considered a RESTful web service.

you can read about REST here

API is a computer interface that allows communication and interactions between two machines or software applications. APIs are more like a messenger that delivers a request to a specific provider and in return brings back the responses from the provider back to where the initial request was made.

### Headless Wordpress Site, what is that?
This is simply the approach that uses the Wordpress database and backend but not the frontend user interface.

So, the headless there means that the site does not make use of the Wordpress end-user interface. The site frontend can be built with any frontend technology then use Wordpress as Backend.

Why do you need Frontity

Frontity can not be overemphasized on what you can achieve using it without knowing much about Bundling, Transpiling, Routing, Server rendering, State Management, CSS management, and so on.

Frontity helps you build wordpress sites using React without having to do a lot of configuration to get started as a developer.

Many Wordpress Developers before now have to go through the pain of configuration REST API in order to use React, now Frontity came in to bridge that gap and offer a seamless connection between Wordpress Developers trying to use React and React developers trying to use Wordpress so everybody wins. Frontity is purely focused on Wordpress.

Frontity has themes you can actually jump into or you can create yours by yourself if you know how to write React codes. It will also amaze Frontity has its own Frontity's Twenty Nineteen Theme and Twenty-Twenty theme which is very similar to the Wordpress 2019/2020 themes respectively.

Let's get right into Migrating our blog to Frontity

So, I this tutorial I won't be going into details about how to create a Frontity theme rather we will be using one of the Frontity created theme called Chakra

Note: you can use any of the frontity theme of your choice by simply going to *npm * website and search using the

frontity-theme

tag

Go to your command line, locate your preferred directory, and type

npx frontity create your-app-name

You will be asked to choose a starter theme (on the Cli frontity only provide 2 options), It is recommended that you use the mars-theme as you are starting frontity for the first time.

npx: installed 
? Pick a starter theme to clone:
 @frontity/mars-theme (recommended)
@frontity/twentytwenty-theme

After the project is completely created, you will have to run this code below on you Command line

cd frontity-tutorial && npx frontity dev

your site will be displayed at the http://localhost:3000

Alternatively

If you have used frontity before and just want to go straight using the Chakra theme, you will have to clone the repository on Github then run

git clone https://github.com/chakra-ui/frontity-chakra-ui-theme
cd frontity-chakra-ui-theme
npm install && npx frontity dev

If you are attempting Frontity for the first time I would suggest you follow the first step and skip the alternative method, in other to understand how it all works.

So after your project is fully completed, you will see the whole files like in the image below in your text editor

We can now go straight to using our chakra-theme to make our blog look greater with a nice feel.

Awesome!! Your new blog is running on the Frontity Chakra theme, looking gorgeous and amazing.

Now the Frontity allows you to further redesign your site to your personal look and feel by going to the codebase and redesign your site, but we won't go much into that.

Let's add a Contact form to our blog and see how it works.
We will be making use of the Frontity Contact Form 7, you won't need much configuration because frontity already handles that behind the scene.

Let's get started by first, going to our Wordpress Dashboard which serves as our backend, and install the Contact form 7 in order to get the shortcode there and then use it for our frontity contact form 7.

• Go to your wordpress Dashboard and install the *Contact Form 7 * plugin and activate it.

The Contact creates a tab called Contact on your Wordpress Dashboard

• Go to the Contact and copy the shortcode there

• Create a Contact Page and paste the code you've copied there

After you are done with this, let us move over to our terminal and install the frontity Contact Form 7 plugin so the form can actually work on our Frontity site.

Quickly go to your terminal and type npm install frontity-contact-form-7 which you can as well check out here

Setting this up requires zero configuration which frontity has already helped us get rid of.

Locate your frontity-settings.js again and add your package name which is frontity-contact-form-7 there

"packages": [
      "frontity-contact-form-7"
]

Another thing you should do is to add your contact menu on the frontity-settings.js

const settings = {
  name: "chakra-react",
  state: {
    frontity: {
      url: "https://test.frontity.io",
      title: "Test Frontity Blog",
      description: "WordPress installation for Frontity development"
    }
  },
  packages: [
    {
      name: "frontity-chakra-theme",
      state: {
        theme: {
          menu: [
            ["Home", "/"],
            ["Nature", "/category/nature/"],
            ["Travel", "/category/travel/"],
            ["Japan", "/tag/japan/"],
            ["About Us", "/about-us/"],
            ["Contact Us", "/contact-form-7/"]
          ],
          socialLinks: [
            ["pinterest", "https://www.pinterest.com/frontity/"],
            ["facebook", "https://www.instagram.com/frontity/"],
            ["twitter", "https://www.twitter.com/frontity/"]
          ],
          featured: {
            showOnArchive: true,
            showOnPost: true
          }
        }
      }
    },
    {
      name: "@frontity/wp-source",
      state: {
        source: {
          api: "https://test.frontity.io/wp-json"
        }
      }
    },
    "@frontity/tiny-router",
    "@frontity/html2react",
    "@frontity-contact-form-7"
  ]
};

export default settings;

These easy steps create your frontity contact page, and you can as well further style your Contact page to look better to match your theme and looks.

Having issues with this, comment below