Local development with Frontity and wordup

#wordpress #webdev #react #tutorial

Frontity is a great tool for develping React based WordPress themes.

For local development it's nice to have also a local WordPress installation, which Frontity needs because it uses the WP API to retrieve its content.

To achieve a seamless local development stack you can combine Frontity with the WordPress development toolkit called wordup.

Requirements

You will need to install Docker and wordup-cli on your machine and set up on the system path.

And if you don't have a Frontity project already, you can create a new project with:

$ npx frontity create my-app && cd my-app

More informations:

Set up wordup for your Frontity project

In order to use wordup for your project you have to create a wordup config file. The config.yml has to be located in the .wordup folder of your project.

The content of the file should look like this:


# For Frontity you only need the local WordPress 
# installation. Because you don't develop a theme
# or plugin in a classic way
type: installation

# The internal project name
projectName: Testproject

# The slug of your installation
slug: testproject

# The relative folder where the wp-content folder will be located
srcFolder: wp-content

# The localhost port of your WP server
port: 9000

# WordPress installation config
wpInstall:
  # Title of the WordPress installation
  title: Testproject

  # WordPress users with role
  users:
    - name: admin
      password: 123456
      email: test@example.com
      role: administrator

  # If necessary: custom roles
  roles:
    - name: A Custom editor role
      key: custom_role
      clone_from: editor
      capabilities:
        - view_products
        - read_products
        - build_products

  # Plugins you need for your project
  plugins: {}

  # Themes you need for your project
  themes: {}

Tip: If you use git for your project, make sure to exclude the wp-content folder.

Change Frontity settings

That's it with the wordup config. Now you only have to edit the frontity.settings.js, so that Frontity knows where your local WordPress API is located.

//... Other settings ...
  "packages": [
    // ...
    "name": "@frontity/wp-source",
        "state": {
        "source": {
            "api": "http://localhost:9000/wp-json"
        }
    }
  ]
//... Other settings ...

Run project locally

Your project is now ready to work with wordup. Start your local WP server with:

$ wordup install

After some minutes your WordPress installation should be running. In order to work with Frontity, you just have to change the permalink structure in your WP Admin. Under Settings > Permalink set the permalink to: Day and name

Now you can start also the Frontity dev server with:

$ npm run dev

You should now see the standard Hello World post in your Frontity React App.

Info: There could be a file permission error, if you have set up frontity as a superuser (on mac or linux). Just change the project folder permissions to your current user.

Advanced features

With wordup you have the possiblity to create fixtures for your WordPress installation.

This feature helps you to have some basic WordPress posts, pages, categories, menus etc. ready for your local development.
See the wordup documentation for more information.