Debugging a Local Add-on

Local Add-ons
1

Hey Clay,

I’m trying to figure out how to develop a Local add-on and so far running into a few snags. I’ve got a menu item showing up in Local in the MORE dropdown. But:

  1. Is there a way to see console.log while developing?
  2. Is there a way to load changes to the add-on within Local without restarting Local?
  3. Can you describe the routing a little?

I’ve got this for the renderer:

'use strict';

const path = require('path');

module.exports = function(context) {

	const hooks = context.hooks;
	const React = context.React;
	const {Link, Route} = context.ReactRouter;

	const AddonTest = require('./AddonTest')(context);

	hooks.addContent('routesAddonTest', () => {
		return <Route key="site-info-test" path="/site-info/:siteID/test" component={AddonTest}/>
	});
	
	hooks.addFilter('siteInfoMoreMenu', function(menu, site) {
		
		menu.push({
			label: 'Test ' + site.id,
			enabled: !this.context.router.isActive(`/site-info/${site.id}/test`),
			click: () => {
				context.events.send('goToRoute', `/site-info/${site.id}/test`);
			}
		});

		return menu;

	});

};

And here’s my AddonTest.js:

module.exports = function (context) {

	const Component = context.React.Component;
	const React = context.React;
	const $ = context.jQuery;

	return class AddonTest extends Component {

		render() {

			return (
				<div style={{display: 'flex', flexDirection: 'column', flex: 1, padding: '15px 0'}}>
					<h4>Test</h4>
				</div>
			);
		}
	}

}

I’m not sure what the Route path should be and as written it doesn’t seem to be going to any path when the item in the MORE dropdown is clicked - it’s just reloading the default screen.

Thanks for the help!

2

Hey @sambrodie –

Thanks for playing around with Local addons!

To your first couple of questions about debugging – I would recommend taking a look at this addon: GitHub - tpkemme/local-addon-devtools: Chrome Dev Tools Addon for Local by Flywheel

That repo will open devtools within Local as well as register a reload() function on the window object. You can call that method in the devtools console, which should be enough to get your saved/transpiled JS into Local:

10%20PM
10%20PM1548×866 45.4 KB

I’ll let someone else chime in on the routing because I’m a little fuzzy on it myself :slight_smile:

Let me know if that addon helps get you some more visibility into what you are trying to do!

– Ben

3

Hey Ben, thanks!

I’ve got the debugger installed and working nicely. I also realized why the Route wasn’t working. I had been using “routesAddonTest” in the addContent hook when this should be “routesSiteInfo” like so:

hooks.addContent('routesSiteInfo', () => {
	return <Route key="site-info-test" path="/site-info/:siteID/test" component={AddonTest}/>
});

Thanks again!

1 Like