ReactTS Template Setup

Gitlab VSTS

Install Node and NPM Using Chocolatey

Important: You must have chocolatey before continuing.

Run the following command to install NPM using chocolatey

cinst -yf nodejs npm

Install NPM Using the windows installer

If you wish to install NPM another way please see npmJS

Now that NPM is installed you can install webpack and (optionally) TypeScript.

To do so type the following into your command window.

npm install -g webpack

If you choose to install TypeScript globally use

npm install -g typescript

TypeScript is included in this template under packages.json

You still may need to link TypeScript to the project. If that is the case cd to the directory containing the solution file and run npm link typescript

---

Now that NPM is installed with webpack and (optionally) TypeScript We can move on.

Recommended Extensions for ReactTS Template

It is recommended that you have the following extensions installed for Visual Studio:

• [Webpack Task Runner] (https://visualstudiogallery.msdn.microsoft.com/5497fd10-b1ba-474c-8991-1438ae47012a) ¹
• NPM Task Runner ¹
• ASP.NET and Web Tools ¹
• Web Essentials 2015
• Web Extension Pack

Open the solution file ReactTS.sln.

Setting Up Pre-Build Tasks

1. Restore packages
   1. Right click Dependencies in the solution explorer
   2. Click restore packages ²
2. Open the Task Runner Explorer
   • Via Menus
     1. Open the view menu
     2. Then open other windows
     3. Click Task Runner Explorer
   • Via Keyboard: ctrl + alt + bkspce

Now that you have the Task Runner Explorer open find bundleconfig.json, ensure that both JavaScript and StyleSheets have a binding of Before Build

Webpack must also run during pre-build.

Locate webpack.config.js in the Task Runner Explorer, expand it, then expand development, then right click Run - Development and bind it to Before Build

Footnotes

1. Required extensions and updates. ↩ ↩² ↩³

2. Dependencies may still show as not installed. ↩