Getting Started - UBCC3/UI GitHub Wiki

Contents

  1. Prerequisites
  2. Prepare To Build
  3. Auth0 Authentication Config
  4. Config Environment File
  5. Build
  6. Continue to set up backend

Prerequisites

  1. Node.js
  2. Angular CLI
  3. Auth0

Prepare To Build

Dependency and installation guidance for Node.js, NVM, NPM, AngularCLI and others can be found on their official websites.

Auth0 Authentication Config

  1. Go to Auth0 official website address https://auth0.com/ create an account or sign up
  2. Create a Single Page Applications with the following configuration
  • Replace all localhost with your own domain if you are deploying in production environment
  • Change all http to https to enable TLS encryption with your certification in production environment
  • This is an example auth0 configuration for setting up local developing environment only
  • Some value will be changed along develop
  • Some value might make your services risky when expose to internet
Applications  
|
|-- Basic Information
│   │-- Name: MolMaker
│   │-- Description: (optional)
│
|-- Application Properties
|   │-- Application Logo: (use default or your own)
|   │-- Application Type: Single Page Application
|
|-- Application URIs
|   |-- Application Login URL (empty for now)
|   |-- Allowed Callback URLs
|   |   |-- http://localhost:4200/callback, 
|   |   |-- http://localhost:4200 
|   |-- Allowed Logout URLs
|   |   |-- http://localhost:4200
|   |-- Allowed Web Origins
|       |-- http://localhost:4200
|
|-- Cross-Origin Authentication
|   |-- Allow Cross-Origin Authentication (checked ✅)
|
|-- ID Token Expiration
|   |-- Maximum ID Token Lifetime: 36000
|
|-- Refresh Token Expiration
|   |-- Set Idle Refresh Token Lifetime (checked ✅)
|   |-- Idle Refresh Token Lifetime: 1296000
|   |-- Set Maximum Refresh Token Lifetime (checked ✅)
|   |-- Maximum Refresh Token Lifetime: 2592000
|
|-- Advanced Settings
    |-- Grant Types
        |-- Implicit (checked ✅)
        |-- Authorization Code (checked ✅)
        |-- Refresh Token (checked ✅)
  1. Create an API from the left panel with following config
APIs
|
|-- Permissions
|   |-- read:users
|   |-- read:profile
|-- Machine To Machine Applications
    |-- <created API name> (Test Application): authorized

Config Environment File

  1. Create a file named .env in the project root directory
  2. Fill in following environment variables
AUTH0_DOMAIN = (can be found on Auth0 dashboard > Applications> Applications> [your application name] > Settings > Basic Information)
AUTH0_CLIENTID = (can be found on Auth0 dashboard > Applications> Applications> [your application name] > Settings > Basic Information)
AUTH0_SECRET = (can be found on Auth0 dashboard > Applications> Applications> [your application name] > Settings > Basic Information)
AUTH0_AUDIENCE = (can be found on Auth0 dashboard > Applications> APIs > [your API name] > Settings > General Settings > Identifier)
AUTH0_ISSUER = (same as AUTH0_DOMAIN) 
AUTH0_ALGO = RS256
  1. Go to src > environments > environments.ts change the backend serverURL and httpInterceptor (Will be merge to env file)
export const environment = {
    // ***
    api: {
        serverUrl: 'http://<backend server host IP or domain>:<port>',
    },
    httpInterceptor: {
        allowedList: ['http://<backend server host IP or domain>:<port>/*'],
    },
};

Building & Deploying

  1. npm run build or ng build
  2. Move those compressed built files to web root on your frontend server

Continue to set up backend

⚠️ **GitHub.com Fallback** ⚠️