How to setup ASP.NET Core + Vue.Js?

I was totally lost when I asked the above question. I’ve spent a few days and I still don’t have a complete picture. What I am pretty sure is that 2016 is a hard year to learn JavaScript

I wanted to use Vue.JS because it’s simpler than the alternatives. Less ceremony, less boilerplates, less code. It's branded as the Progressive Framework... Right! but only to a point. Vue.Js does not solve the Javascript ecosystem fragmentation problem with build systems.

So, you will have to pick a side: Do you need a javascript Modules and a build system?

Option 1: Keep it simple: Avoid Js modules and build systems.

Reasons to follow this path:

• You don’t have many days to learn A LOT of stuff. (configuring bundler, npm+package dependencies hell, ES6 stuff
• You do not want to make a leading-edge Single-Page-Application. Embedding Vue.js inside a few html pages seems enough.
• HTTP/2 is becoming mainstream, so bundlers like Webpack or Browserify will provide less benefits, at least on perfomance.
• Eventually ES6 Modules will be supported directly in the browser, so we won’t need to build whatever latest-javascript into browser-compatible-javascript.

You will save many days by not spending time learning stuff that will probably be obsolete in a few years.

If you follow this path, a few recommendations:

• Just add js libraries using the <script> tag.
• Only use browser-ready Javascript libraries. Whatever code that uses require() or the UMD prefix (function (root, factory) { requires you setup modules (therefore they are not browser ready unless you setup CommonJS). Js files with import/export statements are written in ES6 so avoid them too.
• Use Bower to download browser-ready libs. Avoid NPM (which implies having a module system in place).

Caveat: You will not be able to use advanced Vue.js features like Single File Components or vue-router, but that is ok. You will have to do a few things manually.

Option 2: Learn Javascript Modules + build systems.

Prepare a few days to learn and not code. I will only explain briefly how Webpack worked for me. Browserify also works, but I haven't tried it.

I recoomend you spend some time learning what JavaScript Modules are. Then learn to build them and pack them: I used WebPack. Its documentation is not great, so what worked for me was to follow its tutorial step by step.

At this point you may have heard that webpack ALSO has a builtin web-server with Hot-Module-Reloading. This is a web server for static files to be used only for development. It's benefit is that whenever you edit a JS module, the browser will auto-magically apply the change without refreshing. This is a very nice, but optional, feature. The problem: this builtin web-server competes with our web server (Kestrel). So, if you want to try this feature during development use the Webpack Asp.Net core Middleware provided at Microsoft’s JavaScriptServices repo . There you will find the WebApplicationBasic template that I am currently using. I dissected it, removed most of its parts and by trying to use it I slowly understood what each part was originally for.

When using webpack you will mostly use 3 workflows:

• Build in development mode: Creates huge files, easy for debugging. Use it together with ‘watch-mode’ so whenever you modify a file, a new Webpack build is triggered.
• Build in production mode: Creates small minified files. Usefull for ‘dotnet publish’.
• Using Webpack-web-server+Hot-Module-Reload with Webpack Asp.Net core Middleware then your app will run Webpack in the background, build, and watch the source files for changes. The compilation output is not written to disk and only kept in memory and served via http. The JavaScriptServices middleware forwards requests from Kestrel to Webpack-web-server to make this work.

Whatever webpack config you go with, you have to include ‘vue-loader’ into your webpack config. You may inspire in Vue’s webpack-simple template.

I haven’t covered everything that I wanted to, but this topic is too extense and I need to go back to code. Please leave some feedback.