Edge Builder 101: Scaffold Your First Edge App in Minutes
If you've ever wanted to put a focused, lightweight app on top of Aras Innovator(R) without paying the usual setup tax, Edge Builder is a solid place to start. It scaffolds the project for you, wires up a clean connection to Edge API, and hands you a deployable React app, so you can skip the plumbing and get straight to building something useful.
This post is for Aras Innovator developers and technical users who want a quick way to stand up a small app against their Innovator data. We'll keep the scope narrow: what Edge Builder is, what you get, and how to go from nothing to a running, deployed scaffold. For more details, check out the official InnovatorEdge Builder documentation.
To keep things concrete, we'll use a running example throughout: a small app that lets users browse Parts from their Innovator instance. Nothing fancy, just a list and a detail view. It's a good stand-in for the kind of focused, task-based app Edge Builder is designed for, and it's small enough that every decision below has an obvious analog in your own project.
What is Edge Builder
Edge Builder is one piece of the broader InnovatorEdge platform, a cloud-native ecosystem designed to extend Aras Innovator. The ecosystem includes a variety of interconnected services, but this article will focus on the Edge Builder developer toolkit which contains:
- A CLI for creating and deploying your app
- Managed hosting
- Support for multi-environment deployment
- A UI component library
- Native integration with Edge API
Together, these tools help developers quickly build, deploy, and manage apps that leverage the digital thread data and capabilities of Aras Innovator - all backed by the secure access layer of Edge APIs.
Prerequisites
This post picks up where the earlier posts in this series left off, after you've already set up your Edge API and CIAM authentication.
Before you get started with Edge Builder, make sure you have:
- Node.js 20 or later installed (run node -v in your terminal to confirm)
- An InnovatorEdge API with data for your app
- An API key for your Edge API
- (Optional) User credentials for your Edge API
- (Optional) The CIAM Client ID and Audience ID for your application, needed if you set up CIAM authentication - see "Setting Up User Login for Aras InnovatorEdge APIs and Apps" (link to be added) if you haven't done that yet
A note on authentication: Regardless of whether you want to authenticate your app with user credentials, you'll still need to provide edgecli with an API key to generate the OData client (the code that maps your API to your app's data model). If you need to generate a new key you can follow the steps in our Edge APIs blog.
If you're following along with the Parts example, make sure your Edge API actually exposes the Part ItemType. This ensures that the OData client will be generated with a typed Part resource you can import directly.
Create the app
Our first step is to install the Edge CLI. Open a terminal window in the directory you want to hold your app and run the install command:
npx @arascorp/edge-install edgecli --force
Next we need to login to Edge Builder:
edgecli login
A browser window will open and prompt you to login. Enter the same credentials you use to access the Edge API management service.
Then create the application:
edgecli create
When prompted:
- Enter your project name.
- Enter your project description. (optional)
- Choose Aras React Application as the project type.
- Choose the Use current directory when asked where to install the project.
- Enter an application name – lowercase alphanumeric characters only. This will be visible in your application url.
- Choose y when asked whether to generate the OData client.
- Enter the metadata url for your API – just add /$metadata to the end of the execution endpoint url on the Configure API page of your Edge API.
- Enter an API key for your Edge API
- If you chose to set up CIAM authentication, you will get two additional prompts:
- Enter the Client ID for your application in CIAM
- Enter the Audience ID for your API in CIAM
- Choose the default options for the remaining prompts
Edge Builder then lays down the project structure and a default starter app we can build on.
Run the app locally
Before you deploy, it's worth running the app locally to make sure everything is running correctly. Start the development server from your project folder:
npm install
npm run dev
Then open the app in your browser. You should see the default starter app, already connected to your Edge API.
Deploy
When you're ready to ship, deployment is one command:
edgecli deploy
That's it. From nothing to a running scaffold backed by your Edge API, no plumbing required. Edge Builder also creates a default main environment automatically, which keeps that first deploy painless.
What success looks like
After edgecli deploy finishes, you should have:
- A React project folder with the standard Edge Builder structure and a default starter app
- A generated OData client that mirrors your Edge API schema (including a typed Part resource, for our example)
- A live main environment with the starter app deployed and reachable
If you can open the deployed URL and see the default starter app, you're in good shape. You now have a starting point that sits on top of your Innovator data, with access governed by your existing Innovator permissions and your Edge API.
Next steps
The newly scaffolded app is dead simple with a minimalist test page, and that's by design. Edge Builder's CLI tool gets the foundation in place fast: a project layout, a deployment path, a chosen stack, and an OData client that mirrors your Edge API schema. What you do from there is where the real app takes shape.
In the next post, we'll pair that starting point with an AI coding assistant to turn the generic starter into the Parts app our users actually need and do it faster than building it by hand.
Have a question about getting Edge Builder set up, or a focused app you're thinking about building? Let us know in the comments or over in the Aras Community forums.