You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: Take ownership of your 1FE app by customizing the default plugin and hosting it on a CDN.
4
4
sidebar:
5
5
order: 3
6
6
---
@@ -10,7 +10,7 @@ import { FcOk } from "react-icons/fc";
10
10
11
11
Let's customize your new 1FE app by making changes to the default plugin! Since 1FE is powered by CDN, we will update and build the plugin and host the assets.
12
12
13
-
## <SlPencilstyle={{ display: 'inline', marginRight: '0.5rem', verticalAlign: 'middle' }} /> Make changes to example plugin
To get started quickly, we can use github's mirrored assets on the jsdelivr CDN.
82
+
To get started quickly, we will use jsdelivr CDN to host the needed assets.
61
83
62
84
##### 1. Fork this [mock-cdn-assets](https://github.com/docusign/mock-cdn-assets/tree/main) repository
63
-
This repository contains the Live Configurations and widget assets per environment that power demo.1fe.com. We will use this to host our plugin assets and rely on [jsdelivr](https://www.jsdelivr.com/) to act as a CDN to start powering our application.
85
+
This repository contains the live configurations and widget assets per environment that power [demo.1fe.com](https://demo.1fe.com). We will use this as a jumping off point to get our own version of the assets and rely on [jsdelivr](https://www.jsdelivr.com/) to act as a CDN to start powering our application.
64
86
65
-
##### 2. Update the live configs
66
87
67
-
One of the key features of 1FE is the ability to dynamically load widgets and plugins via [Live Configurations](../../main-concepts/live-configurations). We will update the Live Configurations to point to our new plugin assets.
88
+
## <SlCloudDownloadstyle={{ display: 'inline', marginRight: '0.5rem', verticalAlign: 'middle' }} /> "Deploy" your plugins to CDN
89
+
90
+
We will host the plugin assets using our forked repo from the previous step to make them accessible to the 1FE app. This allows for dynamic loading of widgets and plugins.
68
91
69
-
##<SlCloudDownloadstyle={{ display: 'inline', marginRight: '0.5rem', verticalAlign: 'middle' }} /> "Deploy" your plugin to CDN
92
+
##### 1. Upload widget assets
70
93
71
-
Upload the new assets to your forked mocked-cdn-assets repository
72
-
1. Create a new directory within `development/widgets/@1fe/starter-kit` of your forked repo. The directory name should be the next bumped version. (e.g `1.0.2`).
94
+
<divclassName="prose">
95
+
1. 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`).
73
96
74
97
2. Upload the contents of the `1fe-widget-starter-kit/dist/` directory to the new directory.
75
98
99
+
3. Create a new directory within `integration/widgets/@1fe/bathtub` of your forked cdn repo. The directory name should be the version from the package.json of the bathtub repository (e.g `1.0.50`).
100
+
101
+
4. Upload the contents of the `1fe-bathtub/dist/` directory to the bathtub directory.
76
102
77
103
78
-
3. Push these changes to your forked repository.
104
+
5. Push these changes to your forked repository.
105
+
106
+
6. Create and push a tag. This is important for JSdelivr to cache the assets properly.
107
+
```
108
+
git tag v1.0.2
109
+
git push origin v1.0.2
110
+
```
111
+
112
+
6. Confirm that the assets are publicly accessible by visiting these jsdelivr cdn locations. Replace with your gh username and versions:
##### 3. Update the Live Configurations to find your new plugin assets
123
+
</div>
86
124
87
-
1. Locate `common-configs/development.json` within your forked mock-cdn-assets repository.
125
+
##### 2. Update the live configs
88
126
89
-
2. Under `cdn.libraries.basePrefix`and `cdn.widgets.basePrefix`, update the base prefix to point to your jsdelivr cdn.
127
+
One of the key features of 1FE is the ability to dynamically load widgets and plugins via [Live Configurations](../../main-concepts/live-configurations). We will now update the Live Configurations to point to our new plugin assets.
The `widget-versions.json` file defines the available versions for each widget that can be loaded by the 1FE platform.
132
+
133
+
1. Create `integration/configs/widget-versions.json` file within your forked mock-cdn-assets repository and update it like so:
134
+
```json title="widget-versions.json"
135
+
[
136
+
{
137
+
"widgetId": "@1fe/bathtub",
138
+
"version": "<version uploaded to CDN>"
139
+
},
140
+
{
141
+
"widgetId": "@1fe/widget-starter-kit",
142
+
"version": "<version uploaded to CDN>"
102
143
}
103
-
}
144
+
]
104
145
```
105
146
106
-
3. Under `cdn.widgets.releaseConfig`, locate the widgetId `@1fe/starter-kit` and update with the new version.
147
+
###### Update live.json
148
+
149
+
The [`live.json`](https://1fe-a.akamaihd.net/integration/configs/live.json) file contains the runtime configuration for the plugins that are being loaded
150
+
151
+
<divclassName="prose">
152
+
1. Locate `integration/configs/live.json` within your forked mock-cdn-assets repository and make the following changes:
5. Confirm that the update Live Configurations is reflected on jsdelivr: `https://cdn.jsdelivr.net/gh/<your-github-username>/mock-cdn-assets/common-configs/development.json`.
If you refresh the page and see Content Security Policy errors blocking you from loading assets from jsdeliver, don't panic! 🚨
242
+
243
+
You need to update the CSP settings in the 1FE app(`src/csp-configs.ts`) to allow jsdeliver(`https://cdn.jsdelivr.net/`).
244
+
:::
245
+
Navigate to [starter kit locally](http://localhost:3001/widget-starter-kit/utils) and check the console for the message "Hello from app1!" to confirm that your changes are being reflected.
- There should be proper CDN hosting for Live Configurations and widget assets.
158
254
- Each widget should live in their own repository.
159
-
- Each widget should own CI/CD pipelines that upload assets to CDN and bump release versions on merge. (Templates Coming Soon! <SlRocketstyle={{ display: 'inline', marginRight: '0.5rem', verticalAlign: 'middle' }} /> )
255
+
- Each widget should own CI/CD pipelines that upload assets to CDN and bump release versions on merge.
256
+
257
+
Follow the guide [here](../../platform-guides/productionize) to productionize your 1FE app.
Copy file name to clipboardExpand all lines: src/content/docs/getting-started/local-development.mdx
+32-3Lines changed: 32 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,14 +19,43 @@ yarn dev
19
19
20
20
1FE CLI will serve the widget bundle at `http://localhost:8080/js/1fe-bundle.js`
21
21
22
-
##### 2. Visit `http://localhost:3001/app1` and click the `{...}` button at the bottom right corner of the screen. 
22
+
##### 2. Visit `http://localhost:3001/widget-starter-kit` and click the `{...}` button at the bottom right corner of the screen. 
23
23
24
-
##### 3. Search for `@1fe/starter-kit` within the shelf and select the matching module
24
+
##### 3. Search for `@1fe/widget-starter-kit` within the shelf and select the matching module
##### 5. <FcOkstyle={{ display: 'inline', marginRight: '0.5rem', verticalAlign: 'middle' }} /> Make changes toy our widget and observe the changes in the browser.
32
+
##### 5. <FcOkstyle={{ display: 'inline', marginRight: '0.5rem', verticalAlign: 'middle' }} /> Make changes to your widget and observe the changes in the browser.
33
+
34
+
:::note[🔒 CSP Fun Fact!]
35
+
**Whoops! Page reload causing CSP issues?**
36
+
37
+
If you refresh the page and see Content Security Policy errors blocking your local widget, don't panic! 🚨
38
+
39
+
You need to update the CSP settings in the 1FE app(`src/csp-configs.ts`) to allow your local development server(`http://localhost:8080/`).
40
+
:::
41
+
42
+
---
43
+
44
+
## 🎉 Congratulations! You made it!
45
+
46
+
You've successfully set up local development for your 1FE widgets! Now it's time to explore and build amazing things. Here are some important sections to check out next:
47
+
48
+
### 🧠 **Learn the Core Concepts**
49
+
-**[Live Configurations](../../main-concepts/live-configurations)** - Understand how 1FE dynamically loads widgets
50
+
-**[Widgets vs Plugins](../../main-concepts/widgets)** - Learn the difference and when to use each
51
+
-**[Platform Architecture](../../main-concepts/architecture)** - Deep dive into how 1FE works under the hood
52
+
53
+
### 🔧 **Level Up Your Development**
54
+
-**[API Reference](../../api-reference/1fe-server-reference)** - Complete API documentation for building widgets
55
+
-**[Externalizing Libraries](../../platform-guides/externalizing-libraries)** - Optimize bundle sizes and share dependencies
56
+
57
+
### 🚀 **Ready for Production?**
58
+
-**[Productionize your setup](../../platform-guides/productionize)** - Take your app to production
0 commit comments