Developer PC Setup

Developing MPages with Clinical Office:MPage Developer and Angular requires the installation of some freely available software as well as a free GitHub and npm.js account. This software should be installed on the PC or Mac that you plan on using to develop your MPages.

Ideally, the PC/Mac you develop your MPages on should be able to access the Discern MPages web service by either being located on the hospital network or through VPN access. Discern MPages web service is used by Angular to allow real-time live development of your MPages through built-in proxy capabilities. Configuration of the Angular proxy functionality is described in the documentation for the two project templates.

Required Software

The following software needs to be installed on your development workstation/server.

• Node.js
• Microsoft Visual Code (or other TypeScript capable editor)
• Git command line executable
• Angular CLI

Node.js Installation

1. Navigate to https://nodejs.org/en/download/ to download and install the version of Node compatible with your computer. Windows users should choose the Windows Installer (.msi) compatible with their Windows install.
2. Once you run the installer, you will be greeted by the welcome screen. Click the Next button to get started.
3. Accept the license terms and click Next.
4. You will be prompted for an installation location. Make any desired changes to the installation location and click the Next button.
5. On the Custom Setup window, simply click the Next button.
6. Click the check-box to automatically install necessary tools on the "Tools for Native Modules" window if you wish to add tooling for Python and Visual Studio. (OPTIONAL)
7. You are now ready to install Node.js. Click the "install" button and wait for the completed installation screen to appear and click the Finish button.
8. After completion, you will be shown a command prompt which will start the installation of the additional tools if you chose to add them. Let it run to completion.
9. You can test that Node is working by opening a command shell and typing:
   

   node --version

10. If you do still need to support older versions of Angular or Internet Explorer, we highly recommend NVM which allows you the ability to quickly switch versions of Node.js.

NPM Installation

Angular CLI Installation

1. From your command prompt, install Angular CLI with the following command:
   

   npm install -g @angular/cli

   This will install the newest version of Angular. If you are running a previous version, it will be updated.
   *** Note ***
   Updating your global Angular installation does not update the versions of your Angular projects. You must manually update your projects as Angular was designed to allow you the ability to compile older versions of code.
2. You can see which version of Angular is installed on your PC by typing in:
   

   ng version

3. Close your command line.

Git Command Line Installation

Visual Studio Code Installation

Visual Studio Code is a powerful and free source code editor developed by Microsoft suitable for developing MPages with Angular.

1. Download the Visual Studio Code installer from https://code.visualstudio.com.
2. Run the Installer and follow the prompts. You can keep the defaults until you see the "Select Additional Tasks" screen.
3. On the "Select Additional Tasks" screen, you can check all the boxes as shown in the screen below.
   

Visual Studio Code Extensions

Visual Studio Code Extensions add additional functionality to Visual Studio Code. There are thousands of extensions available to make development easier. For MPage development we are going to add the "ESLint" and "Angular Language Service" extensions to Visual Studio Code.

1. Open Visual Studio Code on your development PC/Mac.
2. Click the Extensions button on the left-hand side of the screen.
   
3. In the search box that appears, type in eslint. You should see a list of extensions appear. Choose ESLint by Microsoft and click the green Install button.
   
4. Open a new command line window and type in the following line to install eslint:

   npm install -g eslint

   You can close the command line when installation completes.
5. In the Visual Studio code extensions screen, search for "angular language service" by Angular and click the green "install" button.
   

Change Your Visual Studio Code Default Terminal

Visual Studio Code will default to PowerShell on Windows for your command terminal. While this is a great option, many of you may not have the security setup to run scripts from PowerShell. You can stick with PowerShell or change your default terminal to a simple command prompt.

1. From the “File” menu, choose “Preferences” followed by “Settings”. You will see a new window appear.
2. In the search box, type in “default profile windows” and switch the value of Terminal > Integrated > Default Profile: Windows value to “Command Prompt”
   
3. Any new terminal sessions you open in Visual Studio Code will now use the MS-DOS command prompt.

Sign up for GitHub and npmjs

Your Clinical Office package is a private package hosted through GitHub and provided with the Node Package Manager. Rather than using private packages hosted through npmjs.com which would cost you $7/month per user, the GitHub method in use is completely free. You do however need a npmjs.com free account to download Clinical Office.

For this reason you will need to have a free GitHub account as well as a npmjs account. Along with your Clinical Office license, using GitHub for your MPage projects is a fantastic way to back up and share code between your development team.

1. If you do not already have a GitHub account, navigate to https://github.com and set up a new account for yourself using the “Sign up” button in the top right corner.
2. Next, navigate your web browser to https://www.npmjs.com and sign up for a new account.
3. Open a new command line window and type in:

   npm login

4. Enter in your username, password and email address when prompted.
   
   Once completed, you see a message indicating that you are logged in to https://registry.npmjs.org/
5. The previous command created a file in your users folder called .npmrc. You need to modify that file to include your Clinical Office:MPage Developer License token.
6. Open your Users folder and navigate to your name/username. In this folder, you will see a new file called “.npmrc”. This file was created when you logged into your npm account from the command line.
   
7. Open the .npmrc file in any text editor. You will see a line showing your login token as follows:

   //registry.npmjs.org/:_authToken=npm_{{your npm private token value}}

   Below this line, add the following two lines making sure to replace the text "your_clinical_office_license_token_number" with the actual token number provided to you when you purchased your Clinical Office:MPage Developer license.
   

   @clinicaloffice:registry=https://npm.pkg.github.com/
   //npm.pkg.github.com/:_authToken=your_clinical_office_license_token_number
   

8. Save your .npmrc file and your system configuration is now complete.