Local development with Frontity and wordup 
Tags: wordpress, webdev, react, tutorial
Published: 2019-07-08 09:58:15

---
title: Local development with Frontity and wordup 
published: true
description: How to set up a local WP installation for Frontity projects
tags: wordpress, webdev, react, tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/wk4gabqaxsz29elolgpn.png
---

[Frontity](https://github.com/frontity/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](https://github.com/wordup-dev/wordup-cli).

## Requirements 

You will need to install [Docker](https://docs.docker.com/install/) and [wordup-cli](https://github.com/wordup-dev/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:

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

*More informations:*

* [Frontity docs](https://docs.frontity.org/)
* [Wordup docs](https://docs.wordup.dev)

## 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:

```yaml

# 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.

```js
//... 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:

```sh
$ 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:

```sh
$ 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](https://docs.wordup.dev/config#fixtures) for more information.