Developer Portal Overview

The Moesif developer portal is an open-source app that you can deploy to provide a self-service experience for customers to subscribe and pay for your APIs. The developer portal is for API product owners looking to productize and monetize APIs.

As an open-source project, you can customize the brand and user experience to meet your requirements without fear of vendor lock-in.

Architecture

There are two main components:

  • my-dev-portal is a React based frontend for customers to subscribe to APIs

  • my-dev-portal-api is a Node.js API to communicate with the Moesif APIs and Billing APIs in a secure environment.

    Arch Diagram of Developer Portal

Configuration Requirements

For the portal to function, you must configure the following:

Category Supported Solutions
Identity / Access Management Auth0, Okta
Billing Provider Stripe
APIM / Gateway Auth0-M2M, JWT, Kong, AWS, Tyk

Deployment Steps

  1. Download the source code
  2. Configure your Identity Provider, Billing Provider, and APIM/Gateway
  3. Configure .env files
  4. Build, run, and test
  5. Configure dashboards
  6. Package and deploy

All of these, once configured, can be plugged in directly through the .env files contained within the API and front-end projects.

Downloading the Source Code

Using git, you’ll want to clone the Moesif Developer Portal repository to your local machine. If you’re unfamiliar with how to clone a git repository, check out the GitHub guide on how to do so.

Within the project, you will see three subfolders: my-dev-portal, my-dev-portal-api, and my-dev-portal-authorizer. For the project to work, both the my-dev-portal and my-dev-portal-api applications must be running.

Exploring the React Frontend

The my-dev-portal folder is a React application that contains the UI and logic for the developer portal. Any additions to the UI, styling or branding changes, and other user-facing changes will be done within this folder/project. Here are some specifics about what some key files/folders contain:

Path Description
src/components Contains all of the React UI elements.
src/styles Contains all of the front-end styles.
src/App.js Contains the application code to bring up the Node project.
src/provider.js React provider files (e.g., OktaProviderWithNavigate, StripeProvider) that inject core functionalities into the React app.

Exploring the Node Backend

The my-dev-portal-api project is where the APIs and various other logic are contained. In this project, you’ll have connectivity to Moesif, Stripe, and Kong through various APIs. For example, the /register endpoint in this project contains the logic used to register a new user in the various systems that are part of the developer portal ecosystem.

Path Description
app.js Contains all of the core API endpoint code and other business logic.

The my-dev-portal-authorizer project is where the AWS Authorizer code is contained. In this project, you’ll have the base code for the AWS authorizer as well as the code for the Auth0 Action and some other configuration items (all covered in detail in the docs). For example, the /register endpoint in this project contains the logic used to register a new user in the various systems that are part of the developer portal ecosystem.

Exploring the .env Files

Each of the projects in the developer portal, my-dev-portal and my-dev-portal-api, require a .env file to function. In the .env file, various API keys and other credentials are stored. Of course, when moving to production you may want to move these from the .env file and into a more secure secrets management system.

In the root of both the my-dev-portal and my-dev-portal-api projects, create a .env file. In each project, there is a .env.template file that shows the variables that you need to add. You can copy and paste these contents into the new .env files created in each of the projects. Various environment variables are covered in their respective Developer Portal docs. Each APIM, Billing Provider, and Identity Provider will have the steps to populate the .env file variables for each platform being used.

Frontend .env File

In the my-dev-portal/.env file, you should have the following key/value pairs, which will be populated depending on your desired setup:

# Portal envars
HOST="127.0.0.1"
PORT="4000"

# Stripe envars
REACT_APP_STRIPE_PRICING_TABLE_ID="prctbl_123abc"
REACT_APP_STRIPE_PUBLISHABLE_KEY="pk_test_123abc"
REACT_APP_STRIPE_MANAGEMENT_URL="https://billing.stripe.com/p/login/test_123abc"

# API server envars
REACT_APP_DEV_PORTAL_API_SERVER="http://127.0.0.1:3030"

# Auth type envars
REACT_APP_AUTH_PROVIDER="Auth0|Okta"

# Auth0 envars
REACT_APP_AUTH0_DOMAIN="yoururl.us.auth0.com"
REACT_APP_AUTH0_CLIENT_ID="Your Auth0 Client ID"

# Okta envars
REACT_APP_OKTA_ORG_URL="https://yoururl.okta.com/oauth2/default"
REACT_APP_OKTA_CLIENT_ID="Your Okta Client ID"

The first value we need to set in this .env file is the REACT_APP_DEV_PORTAL_API_SERVER value. This should be set to the URL and port where our my-dev-portal-api project will be deployed. If you’re running this locally and using the default configuration, this value can stay as it is. If you are running your API project on another URL or port, you can change this value to match.

Backend .env File

In the my-dev-portal-api/.env file, you should have the following key/value pairs, depending on your desired setup:

STRIPE_API_KEY="sk_test_123abc"
MOESIF_APPLICATION_ID="your Moesif application ID"
MOESIF_MANAGEMENT_TOKEN="your Moesif management token"
MOESIF_TEMPLATE_WORKSPACE_ID_LIVE_EVENT_LOG="workspace ID"
MOESIF_TEMPLATE_WORKSPACE_ID_TIME_SERIES="workspace ID"

# APIM Provider
APIM_PROVIDER="Kong|AWS|Tyk"

# AWS envars
AWS_INVOKE_URL="https://123abc.execute-api.region.amazonaws.com"

# Kong envars
KONG_URL="http://localhost:8001"

# Tyk envars
TYK_GATEWAY_URL="http://localhost:8080"
TYK_GATEWAY_SECRET_KEY="TYK_GATEWAY_SECRET_KEY"
TYK_DASH_ORG_ID="TYK_DASH_ORG_ID"

# Okta envars
OKTA_DOMAIN="https://you-okta-url.okta.com/"
OKTA_API_TOKEN="Okta API Token"

# Auth0 envars
AUTH0_DOMAIN="your-domain.us.auth0.com"
AUTH0_CLIENT_ID="auth0 client ID"
AUTH0_CLIENT_SECRET="auth0 client secret"
AUTH0_MANAGEMENT_API_AUDIENCE="https://your-domain.us.auth0.com/api/v2/"

The first value we need to set in this .env file is the MOESIF_APPLICATION_ID. The rest of these values will be populated as the Identity Provider, Billing Provider, and APIM/Gateway are set up.

Updated: