Introduction

Note: The project dependencies have been updated and now require Node.js v18+. To update your development envorinment to the latest version of Node.js go to https://nodejs.org/en/ and download the latest LTS version.

Getting Started

You can copy/clone/rename using your favorite tools or use the following collection of Powershell commands:

#To run from command line you must run the Powershell as Admin
#and set the execution plan:
#   Set-ExecutionPolicy Unrestricted
#Then you can run the script from the command line:
#   .\cfuivue -ProjectFolder "NewFolder"
#
#This parameter is passed from the command line,
#or if you run this directly you can update the values as desired
param(
    [Parameter()]
    #Set the folder, either full path ('C:\TFS\NewProject')
    #or subdirectory ('./NewProject') relative to script)
    [String]$ProjectFolder = 'C:\TFS\NewFolder'
)

#################################################################################
#Changes to anything below should not be necessary
#################################################################################
[String]$ProjectFolderPath = $ProjectFolder
[String]$GitFolderPath = $ProjectFolder + '/.git'
git clone https://eps-software@dev.azure.com/eps-software/CODE.Framework.SPA/_git/Latest.UI.Vue $ProjectFolder
Remove-Item -Path $GitFolderPath -Recurse -Force -Confirm:$false
cd $ProjectFolder
npm install
"."
"You may now open the project located at $ProjectFolderPath"

Configuration

After cloning the repository you should change a few configuration settings to help identify your applicaiton. These settings can be found in the file \src\config.js.

let apiUrl = "../api/";
if (location.port) {
  //For v1 Services Port Number is 44383;
  //For v2 Services Port Number is 7264
  apiUrl = "https://localhost:7264/api/";
}

export const appTitle = "Vue Starter";

//Local Storage keys
export const storageBaseKey = "cf.vue";
export const storageUserKey = storageBaseKey + ".user";
export const storageAppIdKey = storageBaseKey + ".appid";

//System message defaults
export const defaultMessageX = "right";
export const defaultMessageY = "top";
export const defaultMessageTimeout = 6000;

//Service Endpoints
export const urlDocumentService = apiUrl + "document/";
export const urlMessageService = apiUrl + "message/";
export const urlReportService = apiUrl + "report/";
export const urlSecurityService = apiUrl + "security/";
export const urlTaskService = apiUrl + "taskstatus/";
export const urlUserService = apiUrl + "user/";

  1. apiUrl : By default all API calls will be made relative to where the Vue app is running. However if the Vue app is running on a specific port number (as when running the development server) it will direct API calls to a specific URL. If using the CF Service Starter app it should automatically direct API calls to the Service localhost address. By default the CF Service Starter is running at https://localhost:7264/api, but yours may differ if you change the launchSettings.json file. (**NOTE: If you publish the application to a website that runs on a specific port number (other than 80) you will have to update the apiUrl code)

  2. appTitle : This string is used both in the application title bar and the browser tab to denote the application's name

  3. storageBaseKey : The Vue app makes use of both local and session storage. This “BaseKey” should be set to something unique to your project.

  4. \package.json|name : Must be all lowercase with no spaces. Hyphens and underscores are allowed. This is the project name should it be published to a registry, but since our Vue app is a “private” application it is generally unimportant, but recommended you update it anyway.

Previous
Next