Visual Code setup and configuration

Revision History

Version Date Author Comments

v1.0 02-Jan-2018 Harshad Teli Initial Draft

Visual Code Setup and configuration

Step 1:

Install VSCode (VSCodeSetup-x64-1.18.1.exe)

Step 2:

Install Node (node-v8.1.3-x64.msi)

Step 3:

After installing Node.js as mentioned in Step 2, click on Windows Startup icon and open
Node.js command prompt in administrator mode (Refer Image1)

Image1

Visual Code Setup and configuration

Step 4:

In Node.js command prompt navigate to code folder path (cd\”code folder path”) and run
below command (Refer Image2)

npm install

Image2

Step 5:

After successfully executing command mentioned in Step 4. Run below command to install python and
other tools required for compiling. (Refer Image3)

npm install --global windows-build-tools

Image3

Visual Code Setup and configuration

Step 6:

After executing command mentioned in Step 5 execute below command (Command

prompt should display 0 Errors(s) after executing this command Refer Image4)

npm install node-sass

Image4

Step 7:

After getting 0 errors in Step 6 execute below command (Refer Image5)

npm rebuild node-sass

Image5

Visual Code Setup and configuration

Step 8:
Open VS code select File  Open Folder and select folder path (e.g.
“E:\SVN\UI\Nov_Release\TravelStudioDotNet\DevelopmentWorkspace\Client\Components\odlItiner
aryBuilder\UI”)

Open Terminal by using Ctrl+` and execute command mentioned below. (Refer Image6)

npm install gulp –g

Image6

Step 9:
After finishing all steps (from Step 1 to Step 8)) execute below command in terminal
window of VS code.

gulp serve

In case of any errors revert all your changes and update codebase and run above (Step 9)
command. “Compiled Successfully” message will be displayed after compiling the solution as
shown in Image7 below.

Image7

Visual Code Setup and configuration

Step 10:

After finishing above steps (from Step 1 to Step 9) we need to change below files on local
codebase to browse particular screen (In this example we are browsing new Enquiry Header
screen)

Open VS code go to File Open Folder  select folder

e.g. (…\...\TravelStudioDotNet\DevelopmentWorkspace\Client\Components\odlItineraryBuilder\UI)

1. Webpack.config.js renamed to Webpack.config_p.js (refer Image8)

2. Webpack.config1.js renamed to Webpack.config.js (refer Image8)

Image8

Verify in Webpack.config_p.js file if “entry” field under module.exports is not blank as shown in
Image8.1

Image8.1

Visual Code Setup and configuration

Verify in Webpack.config.js file if “entry” field under module.exports is blank as shown in Image8.2

Image8.2

3. Changes in Index.html

Update href property and point it to local directory. (Refer Image9)

Image9

Visual Code Setup and configuration

4. Changes in app.js

Update below fields (Refer Image10)

1. var domainServer = 'http://localhost';

2. var appRoot = '/UI_NovRelease'; (local directory)

3. connectionId: '142251af-5f32-4b3b-9e4e-5fcf1af1d8f6'

Note: To get connectionId, Refer (Image10.1)

1. Login to existing TSV2 from Login screen

2. After Login, In TSV2Home press F12 (to open developer mode)

3. Navigate to Elements tab in Developer window

4. Find (Ctrl+F) connectionId and copy its value

Image10.1

4. tsApiUrl: "http://localhost/API_NovRelease/B2CXMLAPIWebService.asmx",

Visual Code Setup and configuration

 Image10

5. Changes in Web.config (TSV2 UI solution)

1. Add below lines in web.config file with proper database connection string details (Refer
Image11)

<connectionStrings>
<add name="TSV2DBContext" connectionString="Data Source=dev111;Initial
Catalog=ODLDemo_Dev_Latest;Integrated Security=SSPI;Connect Timeout=80000"
providerName="System.Data.SqlClient"/>
</connectionStrings>

Image11

Visual Code Setup and configuration

2. Add below keys in web.config (Refer Image12)

<add name="Access-Control-Allow-Origin" value="*" />

<add name="Access-Control-Allow-Headers" value="Content-Type,Accept" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS"
/>
<add name="Access-Control-Max-Age" value="1728000" />
<add name="X-Frame-Options" value="SAMEORIGIN" />

Image12

6. Changes in TSV2DBContext.cs

Update above file with proper connection key mentioned in Image11

Image13

Visual Code Setup and configuration

After all above steps go back to VS code terminal window execute gulp serve in terminal window
and browse http://localhost:3000/ to open new Enquiry Header screen.

Note: Use Ctrl+C to stop batch compilation and rewrite new command in Terminal window.

Visual Code Setup and configuration