-
Notifications
You must be signed in to change notification settings - Fork 13
03: Configuring the Developer Portal
Now it’s time to pull down the source code for the Moesif Developer portal. 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.
Once the code is pulled down, open up your favorite code editor or IDE and open up the project.
Within the project, you will see two subfolders: my-dev-portal and my-dev-portal-api. For the project to work, both applications must be running.
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.
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.
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.
In the my-dev-portal/.env file, you should have the following key/value pairs, 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_AUTH_KEY='Bearer sk_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 only value we need to set in this .env file currently 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.
All the other values in this file will be filled in as we work through the remainder of the guide.
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 only values we need set in this .env file currently will be your Gateway URL (Kong / Tyk) and MOESIF_APPLICATION_ID.
For the KONG_URL, If you’re running a local instance of Kong, by default this should be running on http://localhost:8001. If this is the case, you can leave the value as is. If it is different or running remotely, you can change the value to point to your Kong gateway.
For the AWS_INVOKE_URL, you'll need to grab the Invoke URL from your AWS API gateway instance. To do this, go to your API Gateway instance, click on Stages, and then select the appropriate stage. On the Stage Editor screen, grab the Invoke URL and paste the value into AWS_INVOKE_URL.
For the TYK_GATEWAY_URL, If you’re running a local instance of Tyk, by default this should be running on http://localhost:8080. If this is the case, you can leave the value as is. If it is different or running remotely, you can change the value to point to your Tyk gateway.
This would also be a good time to grab your TYK_GATEWAY_SECRET_KEY. If running in docker, your TYK_GATEWAY_SECRET_KEY can be found in the tyk.conf file in the Gateway container under the "secret" variable.
While we are in tyk.conf, we need to set allow_master_keys to true. This allows us to automate authentication key creation via the Tyk API.
For the MOESIF_APPLICATION_ID, Your Moesif Application ID value is found in Moesif by going to the menu link in the bottom-left of the screen (which will show your name) and selecting API Keys. The key will then be on the page that appears under Collector Application Id.
As with the previous .env file, All the other values in this file will be filled in as we work through the remainder of the guide.