What is the Angular Template?

The Angular template is an open source, Angular based reference implementation of our marketplace and partner portal sites. These implementations can be downloaded, customized and launched in minutes. We’ve released these sites so our customers could benefit from our established best practices, launch a marketplace or partner portal quicker and keep control over the code. We’re also working on a React version of our Template which will be released soon.

How does it work?

Our Angular Template is open source code, composed of a Components and Services library, Partner Portal and Marketplace site reference implementations. The Component and Service library contains all the components and services (logic) which is compiled and packed into our Angular Components npm. This is then used by the Partner Portal and Marketplace sites. The Partner Portal site allows developers (or partners) to sign up, log in, manage and submit their listings (apps, integrations, extensions, etc). The Marketplace site allows users to sign up, log in, and consume (download, install, purchase, etc.) developers’ listings (apps, integrations, extensions, etc.).

To help you get started with the Angular templates, we’ve put together some helpful assets.

Design
We’ve open sourced the design files to let your designers customize and iterate the designs without having to create them from the ground up. Use it to quickly create designs that match your branding. These files contain all pages and components that you will find in your Partner Portal and Marketplace sites. Download the Angular Template’s design files (Sketch or Figma).

Download
Download (or fork) our Component and Service, Marketplace, Partner Portal and Angular Common Components libraries. Follow the instructions to install, configure and run your project locally. These code repositories are frequently updated with new features, improvements and bug fixes. Because of that, keep in mind that eventually, you might want to update your project with the latest version of it.

This step requires you to sign up on OpenChannel so you can connect your marketplace to it. But don’t worry, signing up is easy and free, no payment or credit card is required.

Build
Once you have your project up and running locally, you can start customizing it to meet your needs. We use Storybook to help with components management and Compodoc for documentation.

Launch
When your project is ready to be released, you will need to host it somewhere and set up the site on the OpenChannel dashboard. We recommend hosting on Netlify.

How to customize the template?

First, you’ll want to get setup by following the instructions within the guide: Setting up Self Hosted Sites. After you’ve got your site configured, please:

  1. Downloaded or fork a Marketplace or Partner Portal site
  2. Install, build and run the site locally by following the instructions outlined in the readme file

You can then start the customization of your sites.

The Components and Services library documented in Storybook has all components, logic and configuration for your Partner Portal and Marketplace sites. These components and their configurations can be extended in the Partner Portal and Marketplace projects. So, whenever you need to change the style of pages and components, let’s say the login page and all its components, we recommend doing it in the Partner Portal and Marketplace project. 

In the Partner Portal and Marketplace libraries, you will find a folder /src/app that contains pages and components for customization. Follow the readme instructions on how to run Compodoc with your project to learn more about the services and components.