Cleaning up..

Author: mohitkhatri89

src/content/docs/reference/terminology.mdx

@@ -20,34 +20,32 @@ This section provides definitions for common terms used throughout the 1fe ecosy
 
 ### 1fe
 
-A micro-frontend platform that standardizes development, deployment, and execution of frontend experiences. 1fe provides shared utilities and governance controls through a centralized platform team while allowing individual teams to focus on creating unique user experiences.
+A micro-frontend platform that standardizes development, deployment, and execution of frontend experiences. 1fe provides shared utilities and governance controls through a centralized platform team while allowing individual teams to focus on creating unique user experiences. The main repository is available on [GitHub](https://github.com/docusign/1fe).
 
-### 1fe Instance [[memory:5051784]]
+### 1fe Instance
 
-A hosted application that runs the 1fe platform for your organization. This is the main application that serves as the runtime environment for all widgets and plugins in your ecosystem.
+A hosted application that runs the 1fe platform for your organization. This is the main application that serves as the runtime environment for all widgets and plugins in your ecosystem. You can get started with the [1fe-starter-app](https://github.com/docusign/1fe-starter-app) template.
 
 ### CI/CD
 
-Continuous Integration/Continuous Deployment. 1fe provides standardized pipeline templates through `1fe-ci-cd` to ensure consistent building, testing, and deployment processes across all widgets and plugins.
+Continuous Integration/Continuous Deployment. 1fe provides standardized pipeline templates through [1fe-ci-cd](https://github.com/docusign/1fe-ci-cd) to ensure consistent building, testing, and deployment processes across all widgets and plugins.
 
 ### CDN
 
 Content Delivery Network. A distributed network of servers used to deliver widget assets efficiently. 1fe deployments typically use a CDN to serve widget bundles for optimal performance.
 
 ### CLI
 
-Command Line Interface. The `@1fe/cli` package provides the primary tool for building, developing, and validating widgets and plugins in the 1fe ecosystem.
+Command Line Interface. The [@1fe/cli](https://www.npmjs.com/package/@1fe/cli) package provides the primary tool for building, developing, and validating widgets and plugins in the 1fe ecosystem.
 
 ### Contextual Injection
 
-A mechanism where the `@1fe/shell` package is intercepted at runtime and replaced with platform-specific utilities contextualized to each widget. This enables widgets to access platform utilities without prop drilling.
+A mechanism where the [@1fe/shell](https://www.npmjs.com/package/@1fe/shell) package is intercepted at runtime and replaced with platform-specific utilities contextualized to each widget. This enables widgets to access platform utilities without prop drilling.
 
 ### Ecosystem
 
 The complete set of packages, repositories, tools, and standards that make up the 1fe platform, including core packages, starter kits, templates, and community widgets.
 
-## Component Types
-
 ### Widget
 
 Any packaged JavaScript logic that runs in a browser. Widgets live in their own repositories, control their own release lifecycle, and can be embedded within other widgets or plugins. They follow 1fe standards and are never permitted to be IIFEs (Immediately Invoked Function Expressions).
@@ -60,15 +58,15 @@ A widget that is tied to a specific URL route. Plugins represent full page exper
 
 A widget where the version can be locked to a specific version by the host widget or plugin. If not pinned, the latest version is automatically used.
 
-### Design System Component
+### Live Configurations
 
-A simple, atomic presentation component with minimal logic that can be widely reused from a design perspective. These are typically part of a shared design system rather than independent widgets.
+Dynamic configuration files that specify widget versions, CDN locations, and deployment status. These enable runtime updates without server restarts.
 
 ## 🔧 Technical Components
 
 ### Shell
 
-The main application shell provided by `@1fe/shell` that includes common UI components (headers, navigation) and shared platform utilities. The shell is delivered as part of the initial HTML response and provides the foundation for all widget execution.
+The main application shell provided by [@1fe/shell](https://www.npmjs.com/package/@1fe/shell) that includes common UI components (headers, navigation) and shared platform utilities. The shell is delivered as part of the initial HTML response and provides the foundation for all widget execution.
 
 ### Sandbox
 
@@ -82,23 +80,15 @@ Props provided by the 1fe platform to widgets, including environment information
 
 Optional props passed from a parent widget to a child widget for integration purposes. These enable feature flags, configuration APIs, and data sharing between widgets.
 
-### Monorepo
-
-A single repository containing multiple related packages. The core 1fe packages are maintained in a monorepo structure for easier development and coordination.
-
 ## 🛠️ Development Tools
 
 ### 1fe Playground
 
-A special plugin that provides a sandbox environment for developing and testing widgets in isolation during local development. It allows developers to mock platform props and test widget behavior before deployment.
+A special plugin that provides a sandbox environment for developing and testing widgets in isolation during local development. It allows developers to mock platform props and test widget behavior before deployment. Available in the [1fe-playground](https://github.com/docusign/1fe-playground) repository.
 
-### Starter Kit
+### 1fe Widget Starter Kit
 
-Template repositories (like `1fe-widget-starter-kit`) that provide pre-configured setups for creating new widgets and plugins, including build scripts, CI/CD configurations, and best practices.
-
-### Live Configurations
-
-Dynamic configuration files that specify widget versions, CDN locations, and deployment status. These enable runtime updates without server restarts.
+Template repository ([1fe-widget-starter-kit](https://github.com/docusign/1fe-widget-starter-kit)) that provides a template for building widgets within the 1fe ecosystem. This starter kit provides the foundation, examples, and best practices for developing production-ready widgets.
 
 ## Development Patterns
 
@@ -110,10 +100,6 @@ An architectural approach where frontend applications are decomposed into smalle
 
 The import pattern used to access platform utilities: `import { platformProps } from "@1fe/shell"`. This syntax is intercepted and replaced with actual platform utilities at runtime.
 
-### Lazy Loading
-
-The practice of loading widgets on-demand rather than upfront. 1fe automatically lazy-loads all widgets to improve initial page load performance.
-
 ### Guest Development
 
 Development work done by teams outside the core platform team. 1fe aims to reduce guest development friction by providing standardized tools and clear boundaries.
@@ -122,19 +108,19 @@ Development work done by teams outside the core platform team. 1fe aims to reduc
 
 ### @1fe/cli
 
-The command-line tool for building, developing, and validating widgets. Key commands include `build`, `contracts`, and `dev`.
+The command-line tool for building, developing, and validating widgets. Key commands include `build`, `contracts`, and `dev`. Available on [npm](https://www.npmjs.com/package/@1fe/cli) and [GitHub](https://github.com/docusign/1fe/tree/main/packages/cli).
 
 ### @1fe/server
 
-The core Express.js server package that provides the runtime backbone for 1fe instances, including configuration polling and asset serving.
+The core Express.js server package that provides the runtime backbone for 1fe instances, including configuration polling and asset serving. Available on [npm](https://www.npmjs.com/package/@1fe/server) and [GitHub](https://github.com/docusign/1fe/tree/main/packages/1fe-server).
 
 ### @1fe/shell
 
-Provides the application shell, layout components, and shared platform utilities that are available to all widgets at runtime.
+Provides the application shell, layout components, and shared platform utilities that are available to all widgets at runtime. Available on [npm](https://www.npmjs.com/package/@1fe/shell) and [GitHub](https://github.com/docusign/1fe/tree/main/packages/1fe-shell).
 
-### create-1fe-app
+### @1fe/create-1fe-app
 
-A scaffolding tool for quickly creating new 1fe instances by answering setup questions in the terminal.
+A scaffolding tool for quickly creating new 1fe instances by answering setup questions in the terminal. Available on [npm](https://www.npmjs.com/package/@1fe/create-1fe-app) and [GitHub](https://github.com/docusign/1fe/tree/main/packages/create-1fe-app).
 
 ---
 

src/content/docs/tutorials/Developing Your First Widget/getting-started.mdx

@@ -54,7 +54,7 @@ Ensure you have the following installed:
 # Check Node.js version (22+ required)
 node --version
 
-# Check yarn version
+# Check yarn version(4.x.x)
 yarn --version
 ```
 
@@ -105,84 +105,91 @@ my-first-widget/
 This is your main widget component:
 
 ```typescript title="src/app1.tsx"
-import React, { useEffect } from "react";
 import { platformProps } from "@1fe/shell";
+import React, { useEffect } from "react";
+import { Router as Widget } from "./components/router";
+import { withProvider } from "./withProvider";
 import { WidgetProps } from "./contract";
 
-const MyWidget: React.FC<WidgetProps> = (props) => {
+const RootWrapper: React.FC<WidgetProps> = (props) => {
   useEffect(() => {
-    // Widget initialization
     platformProps.utils.appLoadTime.end();
-    console.log("Hello from my first widget!");
+    console.log("props", props);
   }, []);
 
-  return (
-    <div>
-      <h1>My First Widget</h1>
-      <p>Welcome to 1fe widget development!</p>
-    </div>
-  );
+  return <Widget {...props} />;
 };
 
-export default MyWidget;
+export default withProvider(RootWrapper);
 ```
 
 ### Widget Contract (`src/contract.ts`)
 
 Defines the interface between your widget and the platform:
 
 ```typescript title="src/contract.ts"
-export interface WidgetProps {
-  // Define the props your widget expects
-  title?: string;
-  theme?: "light" | "dark";
-  // Add more props as needed
-}
+import { PlatformPropsType } from "@1fe/shell";
+
+export type HostPropsContract = Record<string, unknown>;
+
+export type WidgetProps = {
+  host: HostPropsContract;
+  platform: PlatformPropsType;
+};
 ```
 
 ### Configuration (`.1fe.config.ts`)
 
 Controls how your widget is built and deployed:
 
 ```typescript title=".1fe.config.ts"
-import { defineConfig } from "@1fe/cli";
-
-export default defineConfig({
-  widget: {
-    name: "my-first-widget",
-    entry: "src/app1.tsx",
-  },
-  // Additional configuration options
-});
+import { OneFeConfiguration } from "@1fe/cli";
+import { getBaseConfig } from "@1fe/sample-widget-base-config"; // this is the redistributed package for the organization
+
+const configuration: OneFeConfiguration = {
+  baseConfig: getBaseConfig,
+};
+
+export default configuration;
 ```
 
 ## 🚀 Starting the Development Server
 
+:::note[1fe Instance Required]
+**Important:** This command requires a running 1fe instance to work properly. If your organization doesn't have a 1fe instance set up yet, you'll need to follow [Tutorial 1: Setup and Deploy a 1fe POC](/tutorials/setup-and-deploy-1fe-poc/) to get your 1fe instance up and running locally first.
+:::
+
 Now let's get your widget running locally:
 
 ```bash
 # Start the development server
 yarn dev
-
-# Or with npm
-npm run dev
 ```
 
 You should see output similar to:
 
 ```
-✓ Widget development server started
-✓ Widget bundle available at: http://localhost:8080/js/1fe-bundle.js
-✓ Ready for development!
+✔ Webpack
+  Compiled successfully in 3.82s
+
+<i> [webpack-dev-server] Project is running at:
+<i> [webpack-dev-server] Loopback: http://127.0.0.1:8080/
+<i> [webpack-dev-server] 404s will fallback to '/index.html'
+post action hook executed
+[dev] Opening the widget in the playground with the URL:
+        http://localhost:3001/playground?widgetUrl=http%3A%2F%2F127.0.0.1%3A8080%2Fjs%2F1fe-bundle.js
 ```
 
 **What just happened?**
 
+<div class="prose">
+
 - The 1fe CLI compiled your widget
 - Started a local development server
 - Made your widget available at a local URL
 - Enabled hot reloading for development
 
+</div>
 ## 🔍 Verifying Your Setup
 
 Let's make sure everything is working:
@@ -197,28 +204,49 @@ http://localhost:8080/js/1fe-bundle.js
 
 You should see JavaScript code (the compiled widget bundle).
 
-### 2. Check Development Logs
+### 2. Open in playground
 
-In your terminal, you should see:
+If your team doesn't have their own 1fe instance, you can open the widget in our demo 1fe instances playground by visiting:
 
-- No TypeScript errors
-- Successful compilation messages
-- Hot reload ready status
+```
+http://demo.1fe.com/playground?widgetUrl=http%3A%2F%2F127.0.0.1%3A8080%2Fjs%2F1fe-bundle.js
+```
 
 ### 3. Make a Test Change
 
 Edit `src/app1.tsx` and change the heading:
 
-```typescript title="src/app1.tsx" {8}
-return (
-  <div>
-    <h1>My Awesome First Widget!</h1>
-    <p>Welcome to 1fe widget development!</p>
-  </div>
-);
+```typescript title="src/app1.tsx" {3, 16-21}
+import { platformProps } from "@1fe/shell";
+import React, { useEffect } from "react";
+import { Alert } from "antd";
+import { Router as Widget } from "./components/router";
+import { withProvider } from "./withProvider";
+import { WidgetProps } from "./contract";
+
+const RootWrapper: React.FC<WidgetProps> = (props) => {
+  useEffect(() => {
+    platformProps.utils.appLoadTime.end();
+    console.log("Widget loaded with props:", props);
+  }, [props]);
+
+  return (
+    <div>
+      <Alert
+        message="🎉 Widget Ready!"
+        type="success"
+        style={{ margin: "8px" }}
+        closable
+      />
+      <Widget {...props} />
+    </div>
+  );
+};
+
+export default withProvider(RootWrapper);
 ```
 
-Save the file and watch your terminal - you should see the widget recompile automatically.
+Save the file and watch your terminal - you should see the widget recompile automatically and your browser should show a pretty banner at the top of the page with a close button.
 
 ## 📁 Understanding Widget Architecture
 
@@ -244,20 +272,6 @@ The typical development cycle is:
 3. **Build** - Compile with `yarn build:widget`
 4. **Deploy** - Push to your organization's deployment pipeline
 
-## ✅ Validation Checklist
-
-Before moving to the next step, ensure:
-
-<div class="prose">
-
-- [ ] **Node.js 18+** installed and working
-- [ ] **Widget starter kit** cloned and dependencies installed
-- [ ] **Development server** running without errors
-- [ ] **Bundle URL** accessible at http://localhost:8080/js/1fe-bundle.js
-- [ ] **Hot reloading** working when you make code changes
-
-</div>
-
 ## 🎉 Success!
 
 Congratulations! You now have a fully functional widget development environment. Your widget is compiled, served locally, and ready for development.
@@ -268,10 +282,6 @@ Now that your development environment is ready, let's learn how to use the 1fe P
 
 **→ [Step 2: Using the Playground for Development](/tutorials/developing-your-first-widget/using-playground/)**
 
-In the next step, you'll load your widget in the playground and start the interactive development workflow.
+In the next step, we will explore the playground to learn more of it's features.
 
 ---
-
-:::tip[Organization Integration]
-Once you're comfortable with this standard workflow, ask your platform team about organization-specific development tools. The concepts you're learning here apply to any custom tooling your organization provides!
-:::