Installation

This document provide detail notes & instructions for installing, building & deploying ASP.NET jLive on ASP.NET MVC or ASP.NET Core Platforms

Product Detail

ASP.NET MVC Version

This document covers installation process for ASP.NET jLive in ASP.NET MVC environment.

Directory Structure

There are three directories currently available

  • Project: Core project files
  • Database: Core database script
  • AWS
  • : Advance video processing script to utilize AWS Platform.

i: Project Directory

It include complete Visual Studio 2017+ compatible ASP.NET MVC5 solution. You can directly run .sln file to open and start working in project files.

Project directory further include Angular directory which include Angular 6+ compatible applications for dashboard and myaccount functionality. It should not be part of final deployment solution. Each angular application reside within Angular directly is a complete standalone application generated via Angular CLi. In order to work within it, you have to open and build it via Angular CLI commands.

There are currently two applications written in Angular 6+

  • Admin Dashboard: Single page real time application for handling all dashboard features.
  • My Account: Singe page real time application for handling my account features.

Admin Dashboard source located in /Angular/Admin Directory and Myaccount application source located in /Angular/account directory.

Both applications are generated through Angular CLI and configured within project. But still you have to compile and build it via Angular CLI commands. It can't be compiled via existing Visual Studio IDE.

Both applications generate output under the following directories within ASP.NET jLive project files. Configured via angular.json file within angular application.

  • /Scripts/lib/admin
  • /Scripts/lib/account

Note: readme.txt file exist with both application with detail instructions how to build angular application under asp.net mvc project.

ii: Database Directory

It include sql script for all tables used by this product as backend database source.

iii: AWS Directory

It includes list of lambda script packages along with documentation for enabling advance video processing via AWS cloud platform.

Installation Steps

Installation of this product is straight forward, its ASP.NET MVC solution so it requires

  • Windows Platform
  • IIS Webserver
  • IIS Url-Rewrite Module (for two rules set for pointing angular application directories)
  • Angular CLI

Installation steps involve

  • Install url rewrite module: https://www.iis.net/downloads/microsoft/url-rewrite
  • Install db script on database
  • Open web.config file and update configurations properly.
  • Give write permission to /contents/ directory for uploading media files
  • Give write permission to /assets/encoder/ directory in-case you need to utilize FFMPEG for publishing videos
  • Open each angular application and build it with instruction provided in readme.txt file or below in this document.

Check project configuration section for configuring various settings.

Project Configuration

If you open Web.Config file you will notice list of configurations need include

// adjust project url
<add key="url" value="http://localhost:4147/" />
// adjust page caption
<add key="Page_Caption" value="ASP.NET jMedia" />
// adjust member account update type option (0: credit / purchase, 1: renew account)
<add key="Member_Account_Upgrade_Type" value="0" />
// adjust member account upgrade redirect (0: account page, 1: purchase page)
<add key="Member_Account_Upgrade_Redirect" value="0" />
// Enable mandrill email engine
<add key="Enable_Mandrill" value="false" /> <!-- true / false-->
// Setup mandrill key
<add key="Mandril_Key" value="" />
// Enable amazon SES email engine
<add key="Enable_SES" value="true" />
// Adjust SES configurations
<add key="SES_Host" value="{host}" />
<add key ="SES_Username" value="{username}" />
<add key="SES_Password" value="{password}"/>
// Enable AWS Cloud
<add key="Enable_AWS" value="true" />
// Enable AWS Security Configurations
<add key="AWS_ACCESSKEY" value="" />
<add key ="AWS_SECRETEKEY" value="" />
// adjust database connection string in entity framework connection string
<connectionStrings>
<add name="mvcportalEntities" connectionString="
metadata=res://*/Framework.Model1.csdl|res://*/Framework.Model1.ssdl|res://*/Framework.Model1.msl;provider=System.Data.SqlClient;provider 
connection string=&quot;data source=host,1433;initial catalog={databasename};
user id={username};password={password};MultipleActiveResultSets=True;App=EntityFramework&quot;" 
providerName="System.Data.EntityClient" />
</connectionStrings>
// Adjust normal SMTP mail engine
<system.net>
    <mailSettings>
      <smtp from="support@example.com">
        <network host="smtp_mail_host" userName="support@example.com" port="25" password="***" />
      </smtp>
    </mailSettings>
    <settings>
      <httpWebRequest useUnsafeHeaderParsing="true" />
    </settings>
  </system.net>

NPM Repositories

Project have package.json file on root. You have to run npm install on command prompt to install all required project dependencies.

Control Panel

You can access control panel by login via credential

    UserName: administrator
    Password: admin123

Once logged in you will see Control Panel link on top navigation. Click on it, it will bring you to control panel.

Application Host Url Settings

As mentioned above, there are two angular 6+ applications running within project. Both applications communicate via backend api through Host url configured under the following directory

Deployed applications fetchs host information from here.

  • /assets/account/configs/
  • /assets/admin/configs

While working directly in angular application. It uses host information within own project setup located in

  • /angular/account/assets/configs
  • /angular/admin/assets/configs

Control Panel Settings

Once you access control panel, you can go to Settings part to configure various website functionality and settings from here.

Working in Angular Application with ASP.NET MVC Project

Currently there are two angular applications available in ASP.NET jLive

  • Dashboard Application
  • User Account Application

Due to nature of angular applications, you can't directly build it within Visual Studio IDE easily. Both applications located within ASP.NET jLive but work as a standalone applications.

You have to use Angular CLI to compile and publish each app.

Once published it will be automatically part of existing solution.

Detail instructions for working with each angular application

Working in Angular Application

Follow steps below while working, customizing and building angular applications

i: Open project in any preferred IDE for angular applications e.g Visual Code. Note: we not recommend using Visual Studio IDE for angular applications.

ii: Open config file located in /app/configs/app.confg.ts and update settings

    // adjust configuration file path
    configUrl = 'assets/configs’;
    // adjust host with local development or production url in case for live deployment
    host: 'http:// localhost:4147/'

iii: Open app.module.ts and update localization resource directory path

  • ../assets/admin/i18n/ in case application running within ASP.NET jLive
  • ./assets/i18n/ in case you are running and working within application directly

iv: Open /assets/configs/ directory and update settings

  • Update host information to target development environment in config.development.json
  • Update host information to taget product environment in config.production.json
  • Setup env.json value as development or production accordingly

v: Open readme.txt and follow step iii (open angular.json and add css styles listed here and paste into Styles section of angular.json file.

vi: Run npm install to install all required dependencies.

Execute ‘ng serve –open’ to directly open the application in browser. “If you are working locally and your host pointed to local server. Make sure your ASP.NET MVC application already running in order to access backend api by application and load the application.

Building & Deploying Application

When you feel you done all required changes in application and want to publish it. Follow the steps.

1: Make sure you ASP.NET MVC 5 application not in running state to avoid any deadlock in files as application source already hosted under ASP.NET MVC project directory. Incase deployment throw error, please go to scripts/libs/admin or scripts/libs/account directory and manually remove existing files.

2: Open /configs/app.configs.ts file and update

    // update config url
    configUrl = '../assets/account/configs’; 
    or ‘../asets/admin/configs’ or you can use same directory for both account or admin as both access backened api with same urls.

3: Adjust value of host (to make sure it target proper url)

    host: 'http:// localhost:4147/'

4: Open app.module.ts and update value of ./assets/i18n/ with ../assets/admin/i18n or ../assets/account/i18n directory

Note: make sure you also copy i18n directory from angular application /assets/i18n to asp.net mvc project assets directory “/assets/account/i18n” or “/assets/admin/i18n” directory.

5: Open /assets/configs/ directory and update env.json file with value either production or development

Note: make sure you copy /angular/assets/configs/ directory from application source and paste into asp.net project assets/account or assets/admin directory as asp.net mvc application will use this to access backend api.

6: Open readme.txt and follow step iii (open angular.json and remove styles listed here from Styles section of angular.json file as these files already part of asp.net mvc application.

7: Execute the following command to compile and publish application with updated settings

  // for admin application
  ng build --base-href=/admin/ --deploy-url /scripts/lib/admin/ --prod --output-hashing none  
  // for account application
  ng build --base-href=/account/ --deploy-url /scripts/lib/account/ --prod --output-hashing none  

This will build application and updated files in /scripts/lib/admin or /scripts/lib/account/ directory.

ASP.NET Core Version

Installation instruction for ASP.NET Core version will be added shortly. Please contact us if you have any question.

Articles