asp-net-core-with-npm-webpack-typescript (2 Part Series)
This post first appeared on my personal blog.
Example code on Github.
The case in mind is a small intranet website that will allow the users to do some quick actuarial calculations.
Let's start by creating a Visual Studio ASP.NET Core project.Â Start Visual Studio 2017 and create a new project from the "ASP.NET Core Web Application (.NET Framework)" template.Â We will choose this template to make the code compatible with non-Core assemblies (the actuarial assemblies are compiled for .NET 4.5.2).
At the top of the dialog, choose which .NET framework you wish to be compatible with.
In the next dialog choose "Web Application", and Visual Studio will set up a basic structure for your project.Â Among other things, Visual Studio creates a folder named "wwwroot".Â This is where the files that will be published to the actual web server should be placed.Â Don't put anything else such as your code in that folder.
Setting up npm
You can install npm (Node.js) through the Visual Studio installer but you should always make sure that you are running the latest version. You can also download and install from the node.js web site.
Now we need to initialize node for our VS project directory. Open a command prompt and cd to the VS project folder (the folder where the .csproj file is located).
Run the command:
npm init -y
This will initialize npm for your project with default settings. The initialization creates a file named package.json. Notice how VS automatically recognizes the file and adds it to the web project.
You might want to open the package.json file and change the name attribute to all lower case since upper case letters are not supported (I have no idea why npm init does not change it to lower case while it is at it).
Run the following command to update npm at a later time.
npm install npm@latest
We will be using webpack for compiling TypeScript and for bundling script files.
Install webpack with npm by running the command
npm install webpack --save-dev
This will save webpack as a development (not production) dependency in package.json. We will be using webpack as part of the build process, hence the development dependency. The npm install command also creates a folder named "node_modules" in your project folder with dependencies. Do not include this folder in your project.
In the next part of this series we will get up and running with TypeScript.