Step 2: Develop Your First Widget

Great! You now have a working 1fe instance from Step 1. In this second step, you’ll dive into the development experience by creating and customizing widgets. This is where you’ll see the real power of 1fe’s development workflow.

What You’ll Learn

How to explore and test existing widgets
The widget development workflow and tooling
Platform utilities and how widgets integrate with the shell

🔍 Explore the local 1fe instance

Test Sample plugins

Visit http://localhost:3001/widget-starter-kit/utils to view the example starter plugin
Click the button utils.context.get
What just happened?
1. 1fe loaded and rendered the plugin tied to the /widget-starter-kit route.
2. When utils.context.get was clicked, the plugin loaded a child widget via the platform utilities provided by 1fe shell.

Read more about widgets and plugins and platform utilities.

In the above section, we explored the example starter plugin. Let’s override that example plugin to use our plugin running locally.

If not already running, Run yarn dev in 1fe-widget-starter-kit/
Terminal window
```
1
cd 1fe-widget-starter-kit
2
yarn dev
```
1fe CLI will serve the widget bundle at http://localhost:8080/js/1fe-bundle.js
Visit http://localhost:3001/widget-starter-kit and click the {...} button at the bottom right corner of the screen.
Search for @1fe/widget-starter-kit within the shelf and select the matching module
In the Override URL field, enter http://localhost:8080/js/1fe-bundle.js and click Apply override.
Make changes to your widget and observe the changes in the browser.

⚙️ Customize your 1fe instance

In the previous step, we overrode the example plugin to use our local plugin. Now let’s look at how to host your plugin locally so it shows up by deafult in the 1fe instance.

Build plugin assets

Make any content change to 1fe-widget-starter-kit/src

1
import { platformProps } from "@devhub/1fe-shell";
2
import React, { useEffect } from "react";
3
import { Router as Widget } from "./components/router";
4
import { withProvider } from "./withProvider";
5
import { WidgetProps } from "./contract";
6

7
const RootWrapper: React.FC<WidgetProps> = (props) => {
8
  useEffect(() => {
9
    platformProps.utils.appLoadTime.end();
10
    console.log("Hello from app1!");
11
  }, []);
12

13
  return <Widget {...props} />;
14
};
15

16
export default withProvider(RootWrapper);

Build the plugin within 1fe-widget-starter-kit directory

Keep your 1fe instance running in the background.
1fe CLI will need the development server for the build process. This will later be pointed to a deployed environment once your 1fe instance is hosted.
Terminal window
```
1
# 1fe
2
cd 1fe-widget-starter-kit
3
yarn build:widget
```

dist folder contents

We’ll also need the playground widget for our 1fe instance. The playground widget provides essential development tooling and runtime utilities.

Fork the 1fe-playground repository to your GitHub account.

1
git clone https://github.com/<your-github-username>/1fe-playground.git
2
cd 1fe-playground

Install dependencies and build the widget:
Terminal window
```
1
yarn install
2
yarn build:widget
```

Host the widgets locally

Fork this mock-cdn-assets repository This repository contains the live configurations and widget assets per environment that power demo.1fe.com. We will use this as a jumping off point to get our own version of the assets
Create a new directory within integration/widgets/@1fe/widget-starter-kit of your forked cdn repo. The directory name should be the version from the package.json of the widget-starter-kit repository. (e.g 1.0.2).
Upload the contents of the 1fe-widget-starter-kit/dist/ directory to the new directory.
Create a new directory within integration/widgets/@1fe/playground of your forked cdn repo. The directory name should be the version from the package.json of the playground repository (e.g 1.0.50).
Upload the contents of the 1fe-playground/dist/ directory to the playground directory. Following is an image which showcases what the directory structure will look like after you have moved the code over.
Serve them locally using the serve package by running the following command
```
1
npx serve -C <root-of-cdn-assets-repo-locally>
```

One of the key features of 1fe is the ability to dynamically load widgets and plugins via Live Configurations. We will now take advantage of these configurations to get our local 1fe instance to get the config’s from our local CDN.

The widget-versions.json file defines the available versions for each widget that can be loaded by the 1fe platform. Create integration/configs/widget-versions.json file within your forked mock-cdn-assets repository and update it like so:

1
[
2
  {
3
    "widgetId": "@1fe/playground",
4
    "version": "<version of the bundle we moved to mock-cdn-assets>"
5
  },
6
  {
7
    "widgetId": "@1fe/widget-starter-kit",
8
    "version": "<version of the bundle we moved to mock-cdn-assets>"
9
  }
10
]

Update live.json

The live.json file contains the runtime configuration for the plugins that are being loaded

Locate integration/configs/live.json within your forked mock-cdn-assets repository and make the following changes:
Update the basePrefix to point to your server running locally through the serve package

Remove the sample-widget and sample-widget-with-auth widget configurations as they are not needed for this example. Following is what the diff will look like. Also, here is a PR showcasing these changes

1
{
2
 "libraries": {
3
   "basePrefix": "http://localhost:3000/integration/libs/"
4
 },
5
  "widgets": {
6
   "basePrefix": "http://localhost:3000/integration/widgets/",
7
    "configs": [
8
      {
9
        "widgetId": "@1fe/playground",
10
        "plugin": {
11
          "enabled": true,
12
          "route": "/widget-starter-kit"
13
        }
14
      },
15
     {
16
       "widgetId": "@1fe/sample-widget",
17
       "plugin": {
18
         "enabled": true,
19
         "route": "/sample-widget"
20
       }
21
     },
22
     {
23
       "widgetId": "@1fe/sample-widget-with-auth",
24
       "plugin": {
25
         "enabled": true,
26
         "route": "/sample-widget-with-auth",
27
         "auth": {
28
           "authenticationType": "required"
29
         }
30
       }
31
     }
32
    ]
33
  }
34
}

Confirm that the updated Live Configurations are working by visiting the following link:
```
1
http://localhost:3000/integration/configs/live.json
```

Point your local 1fe instance to the new CDN assets

To point the 1fe instance to the new CDN assets, update the src/config/ecosystem-configs.ts file with the following changes:

1
// ...
2
export const configManagement: OneFEConfigManagement = {
3
  widgetVersions: {
4
    url: `http://localhost:3000/integration/configs/widget-versions.json`,
5
  },
6
  libraryVersions: {
7
    url: `http://localhost:3000/integration/configs/lib-versions.json`,
8
  },
9
  dynamicConfigs: {
10
    url: `http://localhost:3000/integration/configs/live.json`,
11
  },
12
  refreshMs: 30 * 1000,
13
};

Navigate to starter kit locally and check the console for the message “Hello from app1!” to confirm that your changes are being reflected.

Tada!

A rocketship in space

🎉 You have a local 1fe instance!

You’ve successfully set up local development for your 1fe widgets! You can move on to the next section if you want to deploy your 1fe instance quickly to showcase it’s benefits to your team. Or, you can use the below links to jump to different sections to learn more.

🎯 What You’ve Accomplished

✅ Explored the widget development workflow using the playground
✅ Learned about platform utilities and how widgets integrate with the shell
✅ Understood the development tools and local development process
✅ Built hands-on experience with widget creation and testing

👉 Next Step

Now that you understand how to develop widgets locally, it’s time to take your proof of concept to production and show stakeholders a complete deployment.

→ Step 3: Deploy Your Proof of Concept

In the final step, you’ll deploy your instance to a production environment.