Skip to content

Instantly share code, notes, and snippets.

@liborpansky

liborpansky/blog.md Secret

Created August 25, 2018 06:45
Show Gist options
  • Save liborpansky/6e7c9de03480108b776ff7c85779a0a7 to your computer and use it in GitHub Desktop.
Save liborpansky/6e7c9de03480108b776ff7c85779a0a7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
blog.md
title date tags
ASP.NET Core Vue template with custom configuration using CLI 3.0
2018-08-16 11:30:47 -0700

Do you know everything about .NET and Vue CLI 3.0 ?

Just jump to template creation process or clone starter repository to get started.

Preface

Lately I become a big fan of Vue.js and, coming from a ASP.NET background, I have to complain about poor quality of templates available for .NET Core. I'm sorry that Microsoft discontinued support for official Vue template and the only ones available for a new dotnet projects are React and Angular. There are some good open source templates out of there, but either outdated version of Webpack and plugins or combination of libraries I don't use make a new project creation time consuming. Fortunately, Vue team was working hard over the past few months and now a stable release of its CLI 3.0 has been released!

Vue CLI 3.0?? What does it mean for us, developers?

New CLI aims to minimize the amount of configuration we have to go through to set-up a new project. Even if I find myself very important to understand Webpack configuration and all the magic going behind the scenes, I understand for beginners can be quite complicated and hard to set up.

Vue CLI 3.0 is based on Webpack 4 and offers out-of-the-box support for:

  • Hot module replacement
  • Code-splitting
  • Tree-shaking
  • ES2017 transpilation
  • Long term caching and so on

You can choose optional integrations to fit your needs such as:

  • TypeScript
  • Progressive Web App
  • Vue Router & Vuex
  • Linting, unit testing, E2E testing
  • 3rd party component frameworks (Vuetify, Vue Bootstrap etc.)
  • publish your personal/enterprise plugin and so on

For a full feature list, I suggest you to read the official CLI release statement by Evan You.

Prerequisites

.NET Core SDK dotnet --version 2.1.400 Node.js >= 8.9 node --version v8.11.4 Vue CLI >= 3.0 npm install -g @vue/cli vue --version 3.0.1 Your favourite editor (I prefer VS Code)

Template

I will describe two ways of template creation: one for developers who want to start with no configuration and the other for people who want to setup their own template and choose custom integrations. I will describe the process using CLI as well as GUI, so everyone can choose their preferred method.

I. CLI Configuration

  • A CLI Template creation: choose custom features and setup a new project under 3 minutes [RECOMMENDED]
  • B Clone Template: clone git repository and run project with simple commands

II. GUI Configuration

CLI Template creation

Create .NET Project

There's no ASP.NET Core Vue template, so we will create a project from React template and modify it to play well with Vue. To create a new .NET Core app just run the following command: dotnet new react -o aspnet-core-vue-app

Open folder in your favourite editor, for VS Code owners: code aspnet-core-vue-app/.

Modify Template

Change Startup.cs:

Change Vue production build output directory on line 28:

https://gist.github.com/cacfac3f1f8a681ffe44b263d77bbd54

Remove HTTPS redirect middleware for development on line 45 (otherwise it's necessary to configure ASP.NET Core SSL certificate for a Vue app, it's better to disable it).

https://gist.github.com/d1157da3cb71906049c484e0a4599815

Replace React middleware with generic SPA proxy on line 62: https://gist.github.com/cc4d20277c794a18efabbafc2a24c14c

Scaffold Vue application

Remove all the contents of the folder /ClientApp and create a new Vue project by using Vue CLI:

vue create client-app

Unfortunately Vue CLI does not allow us to set a project name by C# standards using Upper Camel Case (Pascal Case) naming convention, so let's initiate app inside of client-app folder and then move the content to ClientApp.

Move all the contents from the new folder /client-app to /ClientApp.

Now application is ready to run.

Start the application

Normally we would run dotnet run command to run ASP.NET application and Microsoft ASP.NET Core JavaScriptServices middleware would start a new process for client-side application, but middleware does not support Vue CLI 3 out-of-the-box right now, there's a pull request waiting to be merged.

For now, we can open two command lines and start the app firstly by running Vue app in /aspnet-core-vue-app/ClientApp folder with npm run serve command and secondly by running a .NET project in /aspnet-core-vue-app folder with dotnet run.

Clone template using CLI

  • Clone starter repository git clone https://github.com/SoftwareAteliers/asp-net-core-vue-starter
  • Restore client-side dependencies by running npm install in /ClientApp folder
  • Run the Vue app in /ClientApp folder with npm run serve command
  • Run the .NET application using dotnet run

GUI Template creation

  • Use Visual Studio 2017 and create a new ASP.NET Core Web Application using React.js template (or run dotnet new react if you don't have VS installed).

  • To modify template follow the same procedure as before.

  • Remove all the contents of the folder /ClientApp and create a new Vue project by using Vue CLI 3.0 GUI running vue ui command.

  • Follow the wizard that guides you through the project creation process. Do not forget to create the app inside of the ClientApp folder.

  • Select Tasks Tab and run a serve task. This task starts a vue-cli-service in background and you can open your app by pressing the Open app button or browse http://localhost:8080.

  • Run the ASP.NET Core application in Visual Studio Code or Visual Studio 2017 by hitting F5 and browse http://localhost:5000.

Clone template using GUI

Use ready to start template available at Software Ateliers GitHub repository.

  • Download starter as a ZIP file or git clone https://github.com/SoftwareAteliers/asp-net-core-vue-starter

  • Run Vue CLI 3.0 GUI running vue ui command in /ClientApp folder

  • Select Tasks Tab and run a serve task. This task starts a vue-cli-service in background and you can open your app by pressing the Open app button or browse http://localhost:8080.

  • Run the ASP.NET Core application in Visual Studio Code or Visual Studio 2017 by hitting F5 and browse http://localhost:5000.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment