Skip to content
1fe Documentation

Step 1: Create Your 1fe Instance

In this first part of our proof of concept tutorial, you’ll set up a local 1fe instance from scratch.

New to 1fe? It’s a micro-frontend platform that lets teams build independent applications (widgets) that work together seamlessly. Find out what makes it special ✨ before we dive in! This will give you hands-on experience with the core architecture.

What You’ll Learn

  • How to scaffold a new 1fe instance

📋 Prerequisites

  • Node.js 22.x.x+
  • Yarn 4.x.x+

🔧 Manual Installation

  1. Scaffold a starter application:
Terminal window
npx @1fe/create-1fe-app <test-app-name>
  1. Clone the 1fe widget starter kit (WSK):

We’ll also grab the widget starter kit - it’s a pre-configured template with all the tooling and example code you need to create widgets. Think of it as your widget creation toolkit! 🛠️ Learn more about widgets and why they’re awesome.

Terminal window
git clone https://github.com/docusign/1fe-widget-starter-kit.git
  1. Set up both the repos:

First you need to build the 1fe monorepo and the starter kit.

Terminal window
cd <test-app-name> # adjust this to fit your directory structure
yarn && yarn build

Then, you need to set up the starter kit.

Terminal window
cd 1fe-widget-starter-kit # adjust this to fit your directory structure
yarn
  1. Run the starter app development server
Terminal window
cd <test-app-name> # adjust this to fit your directory structure
yarn dev

You can now visit your instance at http://localhost:3000. You will see this mirror our demo website here. We will take a look later at how to customize this instance.

  1. Run the development server for the WSK
Terminal window
cd 1fe-widget-starter-kit/ # adjust this to fit your directory structure
yarn dev

This will open WSK at the following link.

You now have a functioning 1fe instance running locally! 🎉

🎯 What You’ve Accomplished

  • ✅ Set up a complete 1fe development environment
  • ✅ Created your first 1fe instance with server and shell components
  • ✅ Understood the basic architecture of how 1fe works

👉 Next Step

Now that you have a working 1fe instance, it’s time to learn how to build widgets and understand the development workflow.

→ Step 2: Develop Your First Widget

Continue to learn the development workflow and build a custom widget.