Our Blog

I created my Vue project, included it with my ASP.NET Core project.  For more information reference my prior post on Vue with ASP.NET Core.

Significant to how the project starts/runs is the setup within Startup.cs

app.UseSpa(spa => {
     spa.Options.SourcePath = "ClientApp";

    if (env.IsDevelopment())
     {
        //spa.UseReactDevelopmentServer(npmScript: "start");

        // run npm process with client app
        spa.UseVueCli(npmScript: "serve", port: 8080);

        // if you just prefer to proxy requests from client app, use proxy to SPA dev server instead,
        // app should be already running before starting a .NET client:
        // spa.UseProxyToSpaDevelopmentServer("http://localhost:8080"); // your Vue app port
    }
});

Now, I can start my project with the following approaches (referencing Properties/launchSettings.json)  Regardless of how the project is started, we are taking advantage of vue dev server and the hot module reloading feature (i.e. the ability to modify html, js, vue code and the page will auto re-load)

  • Visual Studio F5 (debug-run) (selecting the application name) http://localhost:8081 This approach starts the project with the c# debugger attached.

    "aspnetcorevueappGui": {
          "commandName": "Project",
          "launchBrowser": true,
          "environmentVariables": {
            "ASPNETCORE_ENVIRONMENT": "Development"
          },
          "applicationUrl": "https://localhost:5001;http://localhost:5000"     
        }
  • Visual Studio F5 (debug-run) (selecting IIS Express, browser by default navigates to http://localhost:50557  This approach starts the project with the c# debugger attached.

"iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:50557",
      "sslPort": 0
    }
  }

  • npm run serve from a command prompt/terminal window and opening browser to http://localhost:8080  The c# debugger is not attached, however I will show how to attach to the dotnet.exe process below.  The port used is defined within Startup.cs spa.UseVueCli(npmScript: "serve", port: 8080);

image

  • dotnet run and manually opening browser and navigating to http://localhost:8080/ The c# debugger is not attached, however I will show how to attach to the dotnet.exe process below.  The port used is defined within Startup.cs spa.UseVueCli(npmScript: "serve", port: 8080);
    image
    image

Attaching from within Visual Studio to the dotnet.exe process Debug – Attach to Process

image

image

So there are a few ways of starting your web application and debugging. 

If you use one of the F5 approaches (above) the debugger is automatically attached and you can step through your code as you browse through the application.  If you use F5 you can stop debugging easily by just stopping within Visual Studio the debugger. 

If you start the application from a terminal/command prompt window the .NET debugger is not attached however you can attach to the dotnet.exe process when you are interested in stepping into your c# .net code.  Personally, I never use F5 and rely on attaching the process when I want to narrow my debugging experience manually.  I code this way, as I can modify c#, build the project then simply just refresh my open browser to start using the updated dlls from the project.

Once the vue app is running, hot module loading is up and running.  Changes to html and js files within the ClientApp directory are automatically loaded when the Vue CLI recognizes a file change.  This is known as HMR (hot module reloading).  All new js frameworks have an implementation of this.  It is part of the new modern js framework world now.  The root file for the web application is public/index.html.

So starting this off, looking for a Vue.js SPA template within Visual Studio…nope not available.  Uising command line dotnet new –l you can see it is not within the template package from Microsoft. 

image
image

Second attempt, is to get the latest template solutions from Microsoft using the following command from a dos prompt.
dotnet new --install microsoft.aspnetcore.spatemplates

Unfortunately, the Vue templates are not available within this package (unlike React and Angular templates). 

Building our own Vue Template

I am going to build one up using existing templates from Microsoft and Visual Studio with the new Vue CLI 3 templating system.  Starting off install the vue cli globally on your pc. 

npm list –g --depth 0 (to list all globally install packages, depth argument says to list only the top packages not the dependencies)

image

I have already installed vue cli however doing it again you can see vue was updated from 3.0.1 to 3.1.1
npm install –g @vue/cli

image

Vue CLI sets up a project with features: hot module replacement, tree-shaking, code-splitting, webpack 4 etc. node –v will display the version of node installed, likewise vue --version gives us the vue.js installed.  With vue 3 cli we can use the CLI to create a project or a GUI to set it up.

Using the CLI first, we will create a asp.net core solution based on the existing react template.

dotnet new react –o aspnet-core-vue-app (this is the same as File-New Project within VS.NET and choosing the react template)

image

Opening the csproj with vs.net (Open Project), and building the project to restore nuget packages, and restoring npm packages (taking several minutes)
image

Make the following changes within Startup.cs
configuration.RootPath = "ClientApp/build"; => configuration.RootPath = "ClientApp/dist";
app.UseHttpsRedirection(); => // app.UseHttpsRedirection(); comment out (we do not want to deal with https certificates at this moment)

Add nuget package VueClieMiddleware

image
image

// spa.UseReactDevelopmentServer(npmScript: "start"); comment out react development server and reference vue
spa.UseVueCli(npmScript: "serve", port: 8080);

Remove all the contents of the /ClientApp foler and create a new project using Vue CLI and returning back to command prompt in a new directory
md vue
cd vue
vue create client-app
image
selecting with mouse default (babel, eslint)
image
image

Moving all the Vue CLI code now to the VS.NET folder ClientApp.  I am using Visual Studio in this tutorial (not vscode).

imageimage

3 ways to run this project

1. Pressing F5 the application runs and to test the hot module reload feature, modify the Welcome message within App.vue while in Debug Mode (F5).  You will notice the page reloads showing the change immediately.  This is powerful.


2. If however I try to run the project via dotnet run I am getting the following error:

System.InvalidOperationException   HResult=0x80131509
  Message=Unable to configure HTTPS endpoint. No server certificate was specified, and the default developer certificate could not be found.
To generate a developer certificate run 'dotnet dev-certs https'. To trust the certificate (Windows and macOS only) run 'dotnet dev-certs https --trust'.
For more information on configuring HTTPS see
https://go.microsoft.com/fwlink/?linkid=848054.
  Source=Microsoft.AspNetCore.Server.Kestrel.Core
  StackTrace:………….
info: Microsoft.AspNetCore.SpaServices[0]
      > client-app@0.1.0 serve C:\Temp\vue\aspnet-core-vue-app\aspnet-core-vue-app\ClientApp
> vue-cli-service serve "--port" "8080" INFO  Starting development server...

The error message told me to run dotnet dev-certs https --clean
I tried but ended up with this error message
Cleaning HTTPS development certificates from the machine. A prompt might get displayed to confirm the removal of some of the certificates.
There was an error trying to clean HTTPS development certificates on this machine.
Sequence contains no matching element
image

I was able to eventually resolve this issue (later) by opening “Manage user certificates”, removing any certificates with friendly names like “ASP.NET Core HTTPS development certificate”.  Apparently there was a corruption in my local certificates and removing all resolved it. 
image

I did this under Certificates Current User – Personal > Certificates (sort by friendly name, select all and remove)

Trusted Root

image
Once this was complete I re-ran the dotnet dev-certs https --trust per the error message, I was then prompted with ‘A confirmation prompt will be displayed if the certificate was not previously trusted.  Click yes on the prompt to trust the certification’.. (Reference: https://github.com/aspnet/AspNetCore/issues/3421)



3. With a command prompt, cd to the ClientApp directory and npm run serve  (after you can browse to the site via http://localhost:8080 as the on screen instructions provide)

Let’s do this again, but instead of creating the vue app via the vue cli this time I will use the vue ui to build the vue app.  Create another React application using the template within Visual Studio.  Make the same modifications as above to the Startup.cs.  Using vue ui command line and the browser based wizard create another vue app named ClientApp.  When complete copy it to your Visual Studio project on top of the existing ClientApp folder.

image

A browser opens with the Vue GUI options

image

image

image
image

A vue app is created on the file system, which will be copied again to our Visual Studio project (on top of the ClientApp directory) that was the original React application.  Build the project…. ========== Rebuild All: 1 succeeded, 0 failed, 0 skipped ==========

1. Pressing F5 to run the application, you can see within the Output – Debug window the operations…

Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager:Information: User profile is available. Using 'C:\Users\dyardy\AppData\Local\ASP.NET\DataProtection-Keys' as key repository and Windows DPAPI to encrypt keys at rest.
Microsoft.AspNetCore.SpaServices:Information: Starting server on port 8080...
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request starting HTTP/1.1 DEBUG
http://localhost:50557/  0
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request finished in 32.0777ms 200
Microsoft.AspNetCore.SpaServices:Information: > ClientApp@0.1.0 serve C:\Temp\vue\aspnetcorevueappGui\aspnetcorevueappGui\aspnetcorevueappGui\ClientApp
> vue-cli-service serve "--port" "8080"

INFO  Starting development server...
Microsoft.AspNetCore.SpaServices:Information:  DONE  Compiled successfully in 19505ms15:42:01
Microsoft.AspNetCore.SpaServices:Information:
  App running at:
  - Local:  
http://localhost:8080/
  - Network:
http://192.168.1.101:8080/

  Note that the development build is not optimized.
Microsoft.AspNetCore.SpaServices:Information:   To create a production build, run npm run build.

image

The browser did open navigated to https://localhost:50557/  changing this to http://localhost:50557 my new project opened up.

Also http://localhost:8080/ works well to.

Ok so that is the end of this initial getting started with Vue.js and ASP.NET Core.  Primarily this was using templates from Visual Studio, with modification then relying on Vue.js CLI (command line and gui to build a new template based on vue.js).

About Us

Web/Mobile Solutions

Our Contacts

Cincinnati, OH 45069