In Part 1, I introduced JavaScriptServices and explained how I set up Vue.js with ASP.NET Core’s Webpack middleware.

Now I’ll present the steps to get Vue.js integrated as a client framework in your ASP.NET Core web application. Note that we’re now targeting Microsoft.NETCore.App v1.1.0.

For this setup, simply creating a blank ASP.NET Core application will be sufficient. There’s no need to set up MVC or anything yet, though we will eventually set up MVC to set up a route  to the Vue.js single page application (SPA). You can use Visual Studio/another IDE or the Yeoman generator.

Now you’ll need a package.json and Webpack configuration files. To get set up quickly, for now we’ll just use components based the official Vue.js Webpack template. Feel free to use your own configuration files instead.

You can get the configuration files, which are based on the official template I used from my demo project, from YetAnotherShrinker:

src/YetAnotherShrinker

Add the package.json and webpack.config.js to your project directory, then copy the build/ and config/ directories. You can modify settings like output paths and more in these configuration files. Then create your output paths: in wwwroot/, create the static/ and dist/ directories, which will be the output paths from the client application.

Finally, copy the ClientApp/ directory, which holds the Vue source, to the project directory. Visual Studio will automatically run npm install, but if you’re not using VS, ensure that you have restored NPM packages.

The client app will be built and served on demand to the user, just like running npm run dev with the Vue.js Webpack template for Node.

If you want ESLint/Babel config from the Vue.js template, feel free to add those as well.

That’s all for the client app. Next, we have to set up the server to use JavaScriptServices and Webpack middleware. We’re going to use MVC for now, in accordance with the documentation for JavaScriptServices. I’m not that familiar with MVC; in my own projects, I prefer NancyFx for its simplicity and concise syntax.

You can either add your own view and controller files, or you can just use mine from the demo project. Be sure to update the namespaces. Copy the Views/ and Controllers/ directories to your project. The views contain basic markup to load the webpack hot reload client and a couple Google fonts, which are totally optional.

Lastly, we modify the Startup class to load JavaScriptServices. Here are the important parts:

In Configure, make sure you have at least the following code:

if (env.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
    app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
    {
        HotModuleReplacement = true
    });
}
else
{
    app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();

// If you want Nancy in addition to MVC
app.UseOwin(x => x.UseNancy(options => options.PassThroughWhenStatusCodesAre(
    HttpStatusCode.NotFound,
    HttpStatusCode.InternalServerError
)));

// Set up MVC
app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");

    routes.MapSpaFallbackRoute(
        name: "spa-fallback",
        defaults: new { controller = "Home", action = "Index" });
});

Refer to my startup file for a full example: src/YetAnotherShrinker/Startup.cs

Running your project now, it might take a bit of time to start up, as the server not only has to start ASP.NET Core, but also has to load JavaScriptServices and build the client app for Webpack. However, once it loads, you can edit the client application without restarting the server, and it will be automatically patched in the browser.

Though you can edit the client application right in Visual Studio, I prefer to use Visual Studio Code for editing the client Vue sources. With the Vue extension for Chrome, you can also debug your Vue client app. If you set up NancyFx in the server like mentioned in the code snippet above, you can quickly and efficiently build a web application where the server communicates with the client through a JSON API, the server using Nancy modules, and the client using an HTTP client library such as Axios. This is the application structure i used the demo project to put together a simple URL shortener app.

You can find the entire demo project on GitHub:

https://github.com/0xFireball/YetAnotherShrinker