Our objective is to build the groundwork for a .NET web application that exposes a single page application (SPA) built using Vue.js. The backend will not be implemented but is assumed to consist of Web API controllers that expose data to the application. This will rely on IIS Express to host the application, which allows you to just hit F5 from within Visual Studio to launch the application. With some minor modifications, you can also use the configurations outlined in this article with the webpack development server, or the server that you prefer.<\/p>\n
Install Node JS<\/h2>\n
All the required JavaScript libraries are available as packages, and you will need a tool called Node Package Manager to help pull those packages down and use them. Node Package Manager is included with Node JS<\/a>, which is a JavaScript runtime engine for your computer. You can download Node JS from their website https:\/\/nodejs.org<\/a> and run the installer. After installing Node JS, you should be able to open PowerShell or a Command Prompt, type If you already have Node JS installed, then please ensure you are running version 8.11.2 or higher, and that Node Package Manager (NPM) is version 6.1.0 or higher. You can determine which versions are installed using the following commands:<\/p>\n Some earlier editions of Node JS require additional configuration to run the scripts outlined in this article, so ensuring you have the latest editions will save you some trouble.<\/p>\n Task Runner Explorer is a built-in Visual Studio tool that allows you to execute Gulp<\/a> and Grunt<\/a> tasks. It can also be extended to support NPM tasks by installing the NPM Task Runner extension, which you will want to use to run NPM tasks later in this article. To install, complete the following:<\/p>\n \n At this point, the extension is installed and should display NPM tasks once they have been defined in the project.<\/p>\n Next, you\u2019ll need to create a Visual Studio solution. I\u2019ve opted for a .NET Core Web Application because it provides a cleaner separation for the JavaScript application code and the files that are ultimately deployed to the web server. However, you can accomplish the same thing in another project type; you\u2019ll just want to make sure not to deploy your source application files to the web server.<\/p>\n To make the web application<\/p>\n Next, you need to set up the project structure. Since you are not going to be building a full-blow SPA in this article, the project structure is minimal.<\/p>\n When it is all said and done, your project should look something like this:<\/p>\n Now you need to define all of the JavaScript packages that the application is going to use and to do that you are going to create a package.json<\/em> file. This is a configuration file for Node Package Manager (NPM) that contains project information, package dependency information, and NPM script definitions. To add the file:<\/p>\n After creating the file, open it up, and delete any content in the file. Then paste the following content into the package.json<\/em> file and save it:<\/p>\n \nI will break down the contents of this JSON file. The first three lines contain project information that is optional because you are not publicly publishing this package. They were included for the sake of completeness.<\/p>\n The next section contains NPM script definitions that allow you to quickly run scripts by name. The name of the script appears on the left (as the JSON property name) and the command to execute appears as a string on the right (as the JSON property value). The names are entirely arbitrary, so you can call a script whatever you want. Obviously, it makes more sense to name it something sensible. There are three scripts defined in this file:<\/p>\n Notice that all three scripts are extremely similar. They all start by calling After the script section, you can see the You can see all the dependencies in the package.json<\/em> file, but what do they all do? Fortunately, finding out what a package does is extremely simple. Google tends to be the best option because if you type npm [package]<\/em> into the search, it normally brings up the package page from the npm website with all the details on what the package does and how to use it. If Google fails you, you can also go directly to the NPM website<\/a> and search the packages there. But here is a breakdown of the packages in this application to keep you from having to look them all up:<\/p>\n Package<\/strong><\/p>\n<\/td>\n Description<\/strong><\/p>\n<\/td>\n<\/tr>\n babel-core<\/p>\n<\/td>\n Babel is a transpiler used to convert ES2015 JavaScript syntax which has limited browser support into ES5 syntax which has more universal browser support.<\/p>\n<\/td>\n<\/tr>\n babel-loader<\/p>\n<\/td>\n Webpack loader used to run script found within the <script> section of a Vue single-file component through the Babel transpiler. This is basically a bridge between Webpack and Babel.<\/p>\n<\/td>\n<\/tr>\n babel-presets-es2015<\/p>\n<\/td>\n Babel configuration presets for es2015 (ES6) to ES5 JavaScript conversion<\/p>\n<\/td>\n<\/tr>\n css-loader<\/p>\n<\/td>\n Webpack loader for bunding CSS files together. This is a peer dependency for the vue-loader packages and is required even if you are not bundling CSS.<\/p>\n<\/td>\n<\/tr>\n cross-env<\/p>\n<\/td>\n Allows environment variables to be set in the windows command line interface. This is used by the scripts defined in the package.json scripts section.<\/p>\n<\/td>\n<\/tr>\n eslint<\/p>\n<\/td>\n Provides linting support for JavaScript. Linting is the process of checking code for errors. Without this, Webpack just packs up all your code as-is without checking to make sure there are no mistakes.<\/p>\n<\/td>\n<\/tr>\n eslint-friendly-formatter<\/p>\n<\/td>\n Formats lint errors produced by eslint in a more user-friendly manner.<\/p>\n<\/td>\n<\/tr>\n eslint-loader<\/p>\n<\/td>\n Webpack loader used to run script found within the <script> section of a Vue single-file component through eslint to check for errors. This is basically a bridge between Webpack and eslint.<\/p>\n<\/td>\n<\/tr>\n file-save<\/p>\n<\/td>\n Provides a simple way to write text to a file. Used within the webpack configuration file to write application settings to an external file.<\/p>\n<\/td>\n<\/tr>\n path<\/p>\n<\/td>\n Provides common file-path routines and methods like combining and resolving paths.<\/p>\n<\/td>\n<\/tr>\n vue-loader<\/p>\n<\/td>\n Webpack loader for managing Vue single-file components. This is what is responsible for splitting the <template> <script> and <style> sections of a Vue file.<\/p>\n<\/td>\n<\/tr>\n vue-style-loader<\/p>\n<\/td>\n Webpack loader for extracting CSS from the <style> section of a Vue single-file component. This is a peer dependency for the vue-loader package and is required even if you are not working with CSS in Vue files.<\/p>\n<\/td>\n<\/tr>\n vue-template-compiler<\/p>\n<\/td>\n Allows vue templates to be pre-compiled into render functions to avoid runtime-compilation overhead. This is used by vue-loader.<\/p>\n<\/td>\n<\/tr>\n vue<\/p>\n<\/td>\n Vue JS library.<\/p>\n<\/td>\n<\/tr>\n vue-router<\/p>\n<\/td>\n Vue Router library used for single-page-application routing.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Once the package dependencies have been defined, you need to pull them down into the development environment. You can do this manually by opening a PowerShell or command prompt, navigating to the directory containing the package.json<\/em> file, and typing npm install<\/em> on the command line. Or you can do it through the Visual Studio Task Runner Explorer. To use the Task Runner Explorer, do the following:<\/p>\n When you run npm install<\/em>, NPM reads the package.json<\/em> file and begins building a list of the packages on which your application depends. It then determines if any of those packages have dependencies, and then if any of those dependencies have their own dependencies, and so on it goes until npm<\/em> has recursively built out a dependency tree based on your initial set of required packages. Npm<\/em> then downloads all of those packages into the node_modules <\/em>folder in the same directory where your package.json<\/em> file resides. As such, the total number of packages that are actually pulled down can be far greater than the number defined in your package.json<\/em> file. For example, the 15 packages defined here result in more than 500 packages after accounting for all the dependencies. This ends up being 50 MB worth of data (unpacked) and more than 13,000 individual files. Although this may seem overwhelming, these files are not included in your project, and you really don\u2019t need to interact with them for the most part.<\/p>\n NOTE: any time you add a new package to your packages.json<\/em> file, you will need to run npm<\/em> install<\/em> (either manually or from the Task Runner Explorer<\/em>) to pull the package and any dependencies down.<\/em><\/p>\n<\/div>\n Next, you need an application to compile. As mentioned before, this is not a full-blown tutorial about how to use Vue or implement an SPA, so my discussions about the files here will be brief. The application consists of four types of files<\/p>\n In the following sections I will show you the content of these files and provide a bit of commentary briefly outlining what each one does, so go ahead and make placeholders for all these files in your project. To add a file, right click on the folder that is to contain the file, then select Add New Item …<\/em> from the context menu. This displays the New Item dialog where you can select a file type. You probably will not have a Vue file type, so you can create a JavaScript file and simply rename the file with the .vue<\/em> extension. Any default content created when the file is added should be removed and replaced by the content shown outlined in this article.<\/p>\n As mentioned before, this is the single page of the single page application. Replace any content in the index.html file with the following content.<\/p>\n There are three key takeaways from this file. First, Vue needs a target element to bind to, and in this case, that\u2019s going to be the Both these files are created during the application packaging process, so they do not exist yet. When they are created, however, they will reside in the wwwroot\/js<\/em> folder.<\/p>\n This is the entry point into the JavaScript application, so this is the file that you\u2019re going to point webpack at when it\u2019s set up to create the application bundle.<\/p>\n The first three lines import modules that are needed to set up the application. After the imports section, you can see that a new Vue instance is initialized and then tell it to bind to the This file exists to initialize the Once again, start off with imports. This time you import the This is the top-level component in the application. In the application, it is an extremely component:<\/p>\n The component displays the message Message from App.vue<\/em> when rendered on a page. It also has a The page components are also extremely simple components that are really just around to demo that the routing works correctly.<\/p>\n This content can be copied into both PageA.vue<\/em> and PageB.vue<\/em>, but you will obviously want to update any text in the PageB.vue<\/em> to say Page B<\/em>. Like the App.vue<\/em>, this component just displays a message indicating where the text is defined.<\/p>\n Webpack is a module bundler with a pipeline for applying transformations to application code. To use it, you specify one or more entry points into your application \u2013 in this case, the only entry point is the Main.js<\/em> file. Webpack then reads that file and locates any JavaScript modules that are referenced within it. Then it recursively reads those modules and locates any JavaScript modules on which they depend, and so on and so forth until it has a picture of all the code you used in the application. It then bundles all the code from all those modules into a bundle containing all the code (there are options for splitting up bundles into multiple files that I will not get into here). In this case, this looks something like this:<\/p>\n Most browsers support ES6 and the concept of JavaScript modules, so you don\u2019t necessarily need to use a bundler when building a modern JavaScript application. However, you will probably end up using a bundler for Vue applications for the following three reasons:<\/p>\nnpm<\/code>,<\/strong> and get an output with usage instructions. If that is the case, you can close out PowerShell or the Command Prompt. If not, you will need to troubleshoot the Node JS installation.<\/p>\n\n
Install NPM Task Runner<\/h2>\n
\n
![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/10\/word-image-57.png\")
<\/p>\n\n
\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/10\/word-image-58.png\")
\nAnd the following message will appear at the bottom of the dialog:<\/li>\n<\/ul>\n![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/10\/word-image-59.png\")
<\/p>\n\n
![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/10\/word-image-60.png\")
<\/p>\n\n
Create a .NET Core Web Application<\/h2>\n
\n
![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/10\/word-image-61.png\")
<\/p>\n\n
\n
![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/10\/word-image-62.png\")
<\/p>\n\n
Setup Project Structure<\/h2>\n
\n
![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/10\/word-image-63.png\")
<\/p>\nCreate the package.json File<\/h2>\n
\n
\n
{\r\n \"version\": \"1.0.0\",\r\n \"name\": \"spademo\",\r\n \"private\": true,\r\n \"scripts\": {\r\n \"dev\": \"cross-env NODE_ENV=development webpack --config App\/Build\/webpack.config.js\",\r\n \"prod\": \"cross-env NODE_ENV=production webpack --config App\/Build\/webpack.config.js\",\r\n \"watch\": \"cross-env NODE_ENV=watch webpack --config App\/Build\/webpack.config.js\"\r\n },\r\n \"devDependencies\": {\r\n \"babel-core\": \"6.26.3\",\r\n \"babel-loader\": \"7.1.5\",\r\n \"babel-preset-es2015\": \"6.24.1\",\r\n \"css-loader\": \"1.0.0\",\r\n \"cross-env\": \"5.2.0\",\r\n \"eslint\": \"5.5.0\",\r\n \"eslint-friendly-formatter\": \"4.0.1\",\r\n \"eslint-loader\": \"2.1.0\",\r\n \"file-save\": \"0.2.0\",\r\n \"html-webpack-plugin\": \"3.2.0\",\r\n \"path\": \"0.12.7\",\r\n \"vue-loader\": \"15.4.1\",\r\n \"vue-style-loader\": \"4.1.2\",\r\n \"vue-template-compiler\": \"2.5.17\",\r\n \"webpack\": \"4.17.2\",\r\n \"webpack-cli\": \"3.1.0\",\r\n },\r\n \"dependencies\": {\r\n \"vue\": \"2.5.17\",\r\n \"vue-router\": \"3.0.1\"\r\n }\r\n}<\/pre>\n\n
\n
cross-env<\/code> which is a package that allows setting up environment variables from the windows command line. Each script then sets the NODE_ENV<\/code> environment variable to a different value, which is stored in the NODE_ENV<\/code> environment variable. The scripts then call webpack (another package) and tell webpack to use the configuration file located at App\/Build\/webpack.config.js<\/em> (which will be defined later on in this article). The configuration settings for webpack use the NODE_ENV<\/code> to determine which configuration values to use (which is covered in more detail later as well).<\/p>\ndependencies<\/code> and devDependencies<\/code> sections where the packages the application depends are identified. There are two sections to differentiate between build-time dependencies (devDependencies<\/code>) and run-time dependencies (dependencies<\/code>). Package dependencies are defined the same way in both sections with the package name on the left (as the JSON property name) and the version of the package appearing on the right (as the JSON property value). All the packages in this file use explicit versions, but you can also prefix a version with ^<\/code> to automatically use the most recent major version (middle number), or ~<\/code> to use the most recent minor version release (third number).<\/p>\nPackage Dependency Information<\/h2>\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Pulling Down the Packages<\/h2>\n
\n
Creating the Vue Application<\/h2>\n
![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/10\/word-image-64.png\")
<\/p>\n\n
Index.html<\/h3>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <meta charset=\"utf-8\" \/>\r\n <title>SPA Demo<\/title>\r\n<\/head>\r\n<body>\r\n <div id=\"app\">\r\n <\/div>\r\n <script src=\"\/js\/app-settings.js\"><\/script>\r\n <script type=\"text\/javascript\" src=\"\/js\/bundle.js\"><\/script><\/body>\r\n<\/html><\/pre>\n
<div id=\"app\"><\/code>. Below that you\u2019ll then reference two files that are not yet in the project:<\/p>\n\n
Main.js<\/h3>\n
import Vue from 'vue';\r\nimport App from '.\/App.vue';\r\nimport Router from '.\/router';\r\nnew Vue({\r\n el: '#app',\r\n template: '<App\/>',\r\n components: { App },\r\n router: Router\r\n});<\/pre>\nVue<\/code> is the Vue.js<\/em> library which is one of the devDependencies<\/code> the is set up in the packages.json<\/em> file and pulled down into the development environment by running npm install<\/em>. <\/strong>Next is the App<\/code> component which is defined in App.vue<\/em>. And finally, Router<\/code> imports routing information defined in the router.js file that lets Vue know what to display when navigating to different URLs.<\/p>\n#app<\/code> element which is defined in the index.html<\/em> page. The template and component properties of the Vue<\/code> constructor object tell Vue<\/code> that you want to fill the #app<\/code> element in index.html<\/em> with the App<\/code> component defined in App.vue<\/em>. Last, the router<\/code> property allows passing the routing information defined in router.js to the Vue instance.<\/p>\nRouter.js<\/h3>\n
Vue<\/code> router and define which components to display at what URLs.<\/p>\nimport Vue from 'vue';\r\nimport VueRouter from 'vue-router';\r\nimport PageA from '.\/Pages\/PageA.vue';\r\nimport PageB from '.\/Pages\/PageB.vue';\r\nconst routes = [\r\n { path: '\/', component: PageA },\r\n { path: '\/pagea', component: PageA },\r\n { path: '\/pageb', component: PageB },\r\n]\r\nVue.use(VueRouter);\r\nconst router = new VueRouter({ mode: 'history', routes: routes });\r\nexport default router;<\/pre>\nVue<\/code> library, the Vue Router<\/code> library that manages routing for Vue <\/code>(and which is also a devDependency<\/code> in packages.json<\/em>), and two Vue<\/code> components with the creative names PageA <\/em>and PageB<\/em> (which are imported from PageA.vue<\/em> and PageB.vue<\/em> respectively). Next is an array of routes which defines URLs and which component to display, followed by a call to Vue.use(VueRouter)<\/code> which initializes routing within Vue<\/code>. After that, you create a new VueRouter<\/code> instance and pass in the routes defined as well as tell the router how to manage page state information (in this case I\u2019m using \u2018history\u2019 mode). And then return that initialized VueRouter<\/code> instance as the default export of the module.<\/p>\nApp.vue<\/h3>\n
<template>\r\n <div>\r\n Hello from App Vue: {{<\/strong> message }}<\/strong>\r\n <router-link to=\"\/pagea\">Go to A<\/router-link>\r\n <router-link to=\"\/pageb\">Go to B<\/router-link>\r\n <router-view><\/router-view>\r\n <\/div>\r\n<\/template>\r\n<script>\r\n export default {\r\n data() {\r\n return {\r\n message: 'Message from App.vue',\r\n };\r\n }\r\n };\r\n<\/script><\/pre>\n<router-view><\/code> component where the component associated with a URL in the router will be displayed. To demo that functionality, there are two <router-link><\/code> components that allow users to switch back and forth from PageA <\/em>to PageB<\/em>. You can find out more details about routing in Vue from the Vue Router<\/a> page.<\/p>\nPageA.vue \/ PageB.vue<\/h3>\n
<template>\r\n <div>\r\n Page A - {{<\/strong> message }}<\/strong>\r\n <\/div>\r\n<\/template>\r\n<script>\r\n export default {\r\n name: 'PageA',\r\n data() {\r\n return {\r\n message: 'Data from Page A'\r\n };\r\n } \r\n };\r\n<\/script><\/pre>\nWhat is Webpack?<\/h2>\n
![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2018\/10\/word-image-65.png\")
<\/p>\n\n