IE Bank frontend

• IE Bank frontend
  • Overview
  • Requirements
  • Recommended tutorials
  • Configure your local environment
    • Install Prerequisites
    • Install node dependencies
  • Run and debug the backend locally
  • Configuration variables
  • Continuos Delivery
    • GitHub secrets

Overview

This is the repository for the frontend code of the IE Bank web app

Requirements

This source code works under the following technologies:

• Node v18.17.1
• npm 9.6.7 (comes with Node)

Recommended tutorials

• HTML
• CSS
• JavaScript
• Node.js
• Vue.js
• Node.js in VS Code
• Using Vue in VS Code

Configure your local environment

Install Prerequisites

• Install Node.js. Install Node.js from here. Make sure to select the option to add Node to your PATH while installing.
• Install VSCode. Install VSCode from here.
• Install Vetur VSCode extension. Install the Vetur VSCode extension from here.

Install node dependencies

Learn more: Using Vue in Visual Studio Code

1. Install node dependencies. Open a terminal and run the following command on the root folder of this project:

$ npm install

This will create a node_modules folder with all the dependencies needed to run the application configured in the package.json file.

Run and debug the backend locally

Learn more: Vue.js debugging in Chrome and VS Code

1. Configure the launch.json file. Click on the Debugging icon in the Activity Bar to bring up the Debug view. Then click on the gear icon to configure a launch.json file, selecting Chrome for the environment:

2. Configure the tasks.json file. Replace content of the generated launch.json with the following configurations:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "msedge",
            "request": "launch",
            "name": "IE Bank Frontend",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "breakOnLoad": true,
            "pathMapping": {
              "/_karma_webpack_": "${workspaceFolder}"
            },
            "sourceMapPathOverrides": {
              "webpack:/*": "${webRoot}/*",
              "/./*": "${webRoot}/*",
              "/src/*": "${webRoot}/*",
              "/*": "*",
              "/./~/*": "${webRoot}/node_modules/*"
            },
            "preLaunchTask": "vuejs: start"
        }
    ]
}

2. Add the following npm tasks to you tasks.json file:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "vuejs: build",
            "type": "npm",
            "script": "install",
            "isBackground": true
        },
        {
            "label": "vuejs: start",
            "type": "npm",
            "script": "serve",
            "isBackground": true
        }
    ]
}

3. Start debugging. Set a breakpoint anywhere in the src\components\AppAccounts.vue file. Go to the Debug view, select the 'IE Bank Frontend' configuration, then press F5 or click the green play button. Your breakpoint should now be hit as the new instance of Chrome opens

Configuration variables

Learn more: Modes and Environment Variables

Mode is an important concept in Vue CLI projects. By default, there are three modes:

• development is used by vue-cli-service serve
• test is used by vue-cli-service test:unit
• production is used by vue-cli-service build and vue-cli-service test:e2e

When running vue-cli-service, environment variables are loaded from all corresponding files. If they don't contain a NODE_ENV variable, it will be set accordingly (NODE_ENV will be set to "production" in production mode, "test" in test mode, and defaults to "development" otherwise).

You can specify env variables by placing the following files in your project root:

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

It is possible to define the mode to use at build time by using the --mode option. For example, to build for uat mode:

• vue-cli-service build --mode uat builds a production app in uat mode, using .env, .env.uat and .env.uat.local if they are present

The environment variables are specified in this project root:

• .env.development

Only NODE_ENV, BASE_URL, and variables that start with VUE_APP_ will be statically embedded into the client bundle, so do not use variables with other naming convention.

Continuos Delivery

Learn more:

• Vue Deployment on App Service Linux

The file .github/workflows/ie-bank-frontend.yml contains the configuration for the CI/CD pipeline.

GitHub secrets

The workflow uses the following GitHub secrets:

Secret name	Description	Learn more
AZURE_CREDENTIALS	Azure credentials to authenticate to Azure via Service Principal	Use the Azure login action with a service principal secret