Local development with Frontity and wordup

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:

• Frontity docs
• Wordup docs

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.