Integrating Aurelia with WordPress backend

1

I would like to create a WordPress plugin. The plugin adds a panel to the WordPress admin interface. This panel should host an Aurelia application.

I have successfully gotten the Aurelia application to work in WordPress.

Screenshot 2024-06-25 at 16.18.17
Screenshot 2024-06-25 at 16.18.171413×763 35 KB

All WordPress does at the moment is this:

function render_admin_screen() {
    echo '<my-app></my-app>';
    echo '<script type="module" src="http://localhost:9000/entry.bundle.js"></script>';
}

Which translates to adding the two html tags when the user clicks on the plugin name on the side menu.

Yay, this is working. It even automatically updates when changes are made to the code.

Now the next step is to add routing. The url of the page is structured like this http://localhost:8888/wp-admin/admin.php?page=PluginName.

Adding in router lite-config

.register(RouterConfiguration.customize({
    useUrlFragmentHash: true
  }))

and routes

@route({
  routes: [
    { path: '', redirectTo: 'database' },
    {
      path: 'database',
      component: DatabaseRoute,
      title: 'Database',
    },
    {
      path: 'settings',
      component: SettingsRoute,
      title: 'Settings',
    },
  ],
  fallback: 'database'
})

Now with routing turned on, when the au app is activated the url changes to this:
http://localhost:8888/wp-admin/admin.php?page=PluginName/#/database?page=PluginName

Navigating to one of the routes then changes it back to this:

http://localhost:8888/wp-admin/admin.php?page=PluginName/#/settings

Looks like everything works as expected here.

I guess another approach is to swap the my-app tag for an iframe

function render_admin_screen() {
	echo '<iframe src="http://localhost:9000/index"></iframe>'; 
}

Everything works as expected here.

Has anyone tried something similar? Any tips?

2 Likes