Add additional routes using React

The Power-Up Generator used a combination of the following libraries to render pages with React JSX content:

• React-Router - Routes paths to the correct React component

• Webpack HTML Plugin - Generates static HTML files for each path and bundles JS

If you would like to add additional endpoints, follow the guide below to route traffic correctly.

1. Create a new React Component that should be rendered

You should create a new React component which you would like rendered on a particular route.

A simple function-based React component could be as follows, taken from the src/attachment-sections.tsx example in the template (Source Code).

import React from 'react';

function AttachmentSection() {
    return (<p>This is an attachment section!</p>);
}

export default AttachmentSection;

Remember the filename and path that you chose, as you’ll need this in the next step.

2. Add the Component to the React Router as a Lazy Load

Once you’ve created a basic starter React component, you need to add it to the React Router so that it knows where to direct the path to in terms of React Hierarchy.

This involves adding the following to the src/router.tsx file (Source Code):

• A Lazy Loader for the React file, which will allow Webpack to perform chunking on the component

• A new <Route> which represents the path that the component should be available on

A minimal example of adding a CardBackSection is shown below:

...
const CardBackSection = React.lazy(() => import('./card-back-section/CardBackSection'));
...
function PowerupRouter() {
    return (
        <Suspense fallback={<div style={{ margin: '6px' }}>Loading...</div>}>
            <Router basename={process.env.CONTEXT_PATH}>
                ...
                <Route path="/attachment-section.html">
                    <AttachmentSection />
                </Route>
                ...
            </Router>
        </Suspense>
    );
}
...

This step has made the React component available when accessed on the right URL, however, we still need to tell Webpack to generate a matching HTML file. See how to do this next.

3. Add a corresponding HTML Plugin to the Webpack Config

As we’re using Webpack to generate matching *.html files for our React routes, we need to tell Webpack to generate another HTML file and configure it to retrieve the right chunk from the modules.

The Webpack configuration file is available at the root of a project created using the Power-Up Generator or Power-Up Template e.g. webpack.config.ts (Source Code).

We need to add the following to the plugins object:

new HtmlWebpackPlugin({
    chunks: ['addon'],
    template: 'templates/react.hbs',
    favicon: 'static/favicon.png',
    filename: '<path, with .html>', // Update to match the path from react-router
    templateParameters: {
        powerup_name: process.env.POWERUP_NAME,
        powerup_app_key: process.env.POWERUP_APP_KEY
    }
}),

4. Use the path as a target for a Capability

Your path and component should now be configured to be available and will execute when the right path is requested.

You can add it as a target in one of your capabilities, if they support it. For example, with the following commands:

• t.modal() - Show a dialog, which is centered in the screen and captures input (Documentation)

• t.popup() - Show a popup at the current mouse position (Documentation)

• t.bottomBar() - Show a panel at the bottom of the Board (Documentation)

You can also specify URL example, the Card Button in the example Power-Up (See line 7)

export function getCardButton(_t: Trello.PowerUp.IFrame, props: CapabilityProps): Trello.PowerUp.CardButton[] {
    return [{
        icon: props.baseUrl + props.icon.dark,
        text: 'Add a Note',
        callback: (tc: Trello.PowerUp.IFrame) => tc.popup({
            title: 'Add a Note',
            url: './card-button.html',
            height: 300
        })
    }];
}5. Restart any Webpack processes

5. Restart any running Webpack watches

You should now restart any running package commands, such as webpack watchers (yarn watch) so that they can pick up the change in the Webpack configuration - this is not included in the automated reload functionality.

You can use Ctrl + C on the terminal to stop any running command.

Next Steps

You may want to access the Trello API inside your new React component and in the next guide we’ll take you through how to do this.