Forem: shry

Local development with Frontity and wordup

shry — Mon, 08 Jul 2019 09:58:15 +0000

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.

Developing a WordPress theme/plugin with wordup

shry — Thu, 09 May 2019 16:13:39 +0000

As the developer of wordup, i would like show how easy and fast you can setup a new WordPress project with wordup

What is wordup?

Wordup is an open-source development toolkit for setting up and managing your local WordPress Theme/Plugin development, so that you can totally focus on coding.

The wordup-cli is a command line interface written in nodejs and uses docker-compose.

It is available as a package on npm

Requirementes

You need to have nodejs and docker installed on your system.

Init a new project

We are using wordup-cli as a local devDependency.

To do that we will run the wordup-cli commands via npx.

npx belongs to npm and executes a command even if it's not installed on your system.

To start your first project run (in a folder of your choice):

npx wordup-cli init

You will be guided to some questions. After that wordup will install automatically all containers and components.

Note: If you use wordup-cli as a devDependency make sure to always use npx before every wordup command.

You can find the whole wordup documentation on GitHub

Start developing

Take a look at the newly created project folder in your editor. All files located in the /src folder belong to the WordPress plugin/theme you want to develop.

Files outside of this folder belong to your project in general.

In the package.json file you can see the wordup project settings.

Export your project

After some coding you want to distribute your WordPress plugin/theme.

You can do that by running in your project folder:

npx wordup export

Wordup will export your /src folder to a zip file, based on .distignore and your wordup settings.

You have also the posibilty to export your whole project. Export docs

Happy Coding!!

For more information visit wordup.dev

wordup-dev / wordup-cli

Wordup is a fully integrated development platform for WordPress. Develop plugins and themes locally. Preview in the cloud. Automatic updates in WP.

Wordup CLI

⚠️CAUTION: This package is unmaintained

Wordup CLI is an open-source development toolkit for setting up and managing your local WordPress Theme/Plugin development, so that you can totally focus on coding.

It is based on docker-compose and uses a docker containerized LAMP-stack with all WordPress Plugins/Themes you need for your current project.

Features

What you can do with wordup-cli:

💡Rapidly test new ideas - And develop your new WordPress theme/plugin projects in wordup.
⏱Speed up your development - Install a new project with a blank WordPress installation in a matter of minutes
🛠️Boilerplate - Scaffold your theme/plugin with the official source code from WordPress (e.g. underscore). You can also add code snippets like Gutenberg blocks to your source code.
⚙️Automatic installation of dependencies - Automatically download and…

View on GitHub