A while back, I wanted to create an addon for Local by Flywheel that connected a popular database management tool, TablePlus with Local by Flywheel. Local is a development tool used by WordPress developers all over. At WebDevStudios, we use it daily. As a beginner creating a Local addon myself, I learned a lot and decided to build an example Local addon as a screencast series to share what I learned.
Note: You can check out the videos below, but you can also watch it in a YouTube Playlist (or save for later). All the same notes are in the video descriptions on YouTube and with links to specific times in the videos, which may be helpful.
Introduction and Running the Addon Generator
After a quick introduction, I explore what it will take to create an addon for Local and start off by running the create-local-addon addon generator.
Links to know:
Please note that for create-local-addon to work, you must be using the latest version of node. I recommend using NVM, but in this video I am running the most stable version.
00:10 Introduction
01:36 What you’re going to need
02:50 Node, NVM
06:00 Starting by running the Local Addon Generator Tool: create-local-addon
10:35 Reviewing the result and symlinking
Explore the Generated Code, Built Tools, and Coding Standards
In this video, we look at what the generated addon gives us, explore build tools, and how to work with Local via Electron Inspection Tools/Develop tools.
00:05 Reviewing the generated code and tweaking generated code
01:30 NPM scripts and build tools
03:30 Running Chromium (Electron) Devtools (more later on in the video)
04:00 NPM run watch
05:45 Installing Yarn
06:05 NPM run build and NPM run prepare
06:35 Coding standards and babel-eslint fix (boring)
16:05 Review of tagging in the repo and how to push to a repo
18:39 Deeper overview of the generated code in src/
19:19 Review of main.ts (Note: I forgot to clear this file out; see result in repo.)
21:11 Hooks
21:46 Look at what the generated boilerplate does by default
23:10 Using Chromium/Devtools and console.log for examining data and the build tools
Build the Addon
In this video, we build our actual addon that queries the database for the active theme and shows it in the overview panel and explore the methods our component has from the generator and what they do.
Links to know:
00:07 What our addon will do (feature decision)
00:40 Dive in and start building our addon and reworking the boilerplate into our own component
02:42 Keeping super(props) around
07:50 Please see the repo on the final content for main.ts, as there was a lot of code removed
09:07 Looking up the hook we need
11:33 Adding our hook
11:56 Exporting hooks and exploring context variable
13:42 Site variable and other React variables
15:40 Passing variables to the component
19:14 Looking at the site object
20:07 Playing with the render() method (“Hi”)
21:27 Start building the content of our component
22:28 this.state of the component (I explained poorly)
23:27 Getting the active theme via MySQL
49:29 Modifying state
50:20 Working results, what did we do?
58:27 componentDidMount and componentWillUnmount methods and improving the result
01:03:55 setState
01:11:40 Cleaning up lib/ (and you might break it, just like I did)
Branding Your Addon, Distributing It, and Fixing Bugs
In this last video, I go over how to brand your addon, distribute it, and along the way, we even find a bug, fix it, and push out a new tested release.
00:05 Cleanup and customization
04:43 Packing up your addon for distribution
10:42 Testing your package
13:20 Finding a “bug” with our addon and fixing it
14:32 How to re-symlink your development addon
19:42 Fixing out new bug and releasing a new version
27:36 Binding this keyword
32:42 Releasing a new version
38:35 Conclusion
Good luck creating your addon for local. Hopefully, these videos will help. Remember, you can always return to the playlist and learn at your own pace. For more technically savvy content like this, be sure to read our blog daily and sign up for our email newsletter.
Comments