[{"data":1,"prerenderedAt":813},["ShallowReactive",2],{"article-getting-started-angular-wvisual-studio-aspnet-core":3},{"article":4,"tags":295,"previous":310,"next":739},{"id":5,"title":6,"author":7,"body":8,"createdAt":284,"description":285,"extension":286,"img":28,"meta":287,"navigation":288,"path":289,"seo":290,"stem":291,"tags":292,"updatedAt":284,"__hash__":294},"articles\u002Farticles\u002Fgetting-started-angular-wvisual-studio-aspnet-core.md","Getting Started Angular w\u002FVisual Studio ASP.NET Core",null,{"type":9,"value":10,"toc":280},"minimark",[11,15,31,34,44,47,67,70,80,83,86,96,99,106,113,123,126,137,160,171,186,199,202,222,235,246,257,267,270],[12,13,14],"p",{},"Starting a new project using the VS.NET 2017 latest release installed templates.",[12,16,17],{},[18,19,22],"a",{"href":20,"target":21},"\u002Farticles\u002Fimages\u002Fimage_636774731987290862.png","_blank",[23,24],"img",{"title":25,"style":26,"border":27,"alt":25,"src":28,"width":29,"height":30},"image","border: 0px currentcolor; border-image: none; display: inline; background-image: none;",0,"\u002Farticles\u002Fimages\u002Fimage_thumb_636774731988097429.png",244,172,[12,32,33],{},"I end up with the following directory structure for hosting both my asp.net project and my angular client app.",[12,35,36],{},[18,37,39],{"href":38,"target":21},"\u002Farticles\u002Fimages\u002Fimage_636774731988761038.png",[23,40],{"title":25,"style":26,"border":27,"alt":25,"src":41,"width":42,"height":43},"\u002Farticles\u002Fimages\u002Fimage_thumb_636774731989514209.png",174,341,[12,45,46],{},"The template is equivalent to creating an ASP.NET Core projects to act as an API backend, and an Angular CLI project to act as a UI. The template offers the convenience of hosting both project types in a single app project.",[12,48,49,50,54,55,58,59,61,62,66],{},"Consequently, the app project can be built and published as a single unit. The project template creates an ASP.NET Core app ",[51,52,53],"strong",{},"and"," an Angular app. The ASP.NET Core app is intended to be used for data access, authorization, and other server-side concerns. The Angular app, residing in the ",[51,56,57],{},"ClientApp"," subdirectory, is intended to be used for all UI concerns.  The ",[51,60,57],{}," directory contains a standard Angular CLI app. See the official ",[18,63,65],{"href":64},"https:\u002F\u002Fgithub.com\u002Fangular\u002Fangular-cli\u002Fwiki","Angular documentation"," for more information.  Running ng commands – open command prompt, cd to the ClientApp directory.",[12,68,69],{},"If you have Angular CLI installed globally you can any of its commands i.e. ng lint, ng test etc. (if you do not have Angular CLI installed you can run via npm run ng (or npm run ng lint or npm run ng test). These npm commands reference the scripts setup in the package.json file",[12,71,72],{},[18,73,75],{"href":74},"\u002Farticles\u002Fimages\u002Fimage_636774731990182177.png",[23,76],{"title":25,"style":26,"border":27,"alt":25,"src":77,"width":78,"height":79},"\u002Farticles\u002Fimages\u002Fimage_thumb_636774731990903482.png",357,144,[12,81,82],{},"As we started this from an ASP.NET Core ‘Angular’ template – there is no need to run ng serve. Yes, read that again. The ASP.NET Core application has already been setup to serve both the c# ASP.NET Core parts as well as your client-side parts of the app.",[12,84,85],{},"How? Take a look at the Startup.cs file around app.UseSpa which starts both the Angular and ASP.NET sides of this application when you hit F5 (debug-run). The project is configured to start its own instance of the Angular CLI server in the background when the ASP.NET Core app starts in development mode. This makes it convenient as you don’t have to run a separate server manually (one for client app and one for the ASP.NET side)",[12,87,88],{},[18,89,91],{"href":90},"\u002Farticles\u002Fimages\u002Fimage_636774731991518749.png",[23,92],{"title":25,"style":26,"border":27,"alt":25,"src":93,"width":94,"height":95},"\u002Farticles\u002Fimages\u002Fimage_thumb_636774731992151351.png",361,97,[12,97,98],{},"The downside of letting VS.NET\u002FASP.NET Core run both sides, is that anytime c# is modified you will have to startup both the web and backend. This can be time consuming, as it does take some time to restart the web server. “The project is configured to start its own instance of the Angular CLI server in the background when the ASP.NET Core app starts in development mode”  To run Angular CLI server externally, independently of the ASP.NET Core process you can open a command prompt, navigate to the Clientapp directory and type npm start which as mentioned above can be found as a script within the package.json.\nRuns the following: “start” : “ng-serve --extract-css\"",[12,100,101,102],{},"As a side note: ",[103,104,105],"u",{},"Installing the Angular CLI Globally",[12,107,108,109,112],{},"npm --g @angluar\u002Fcli",[110,111],"br",{},"\nng --version",[12,114,115],{},[18,116,118],{"href":117},"\u002Farticles\u002Fimages\u002Fimage_636774731992924046.png",[23,119],{"title":25,"style":26,"border":27,"alt":25,"src":120,"width":121,"height":122},"\u002Farticles\u002Fimages\u002Fimage_thumb_636774731993996308.png",624,389,[12,124,125],{},"ng new –help",[12,127,128],{},[18,129,131],{"href":130},"\u002Farticles\u002Fimages\u002Fimage_636774731995308632.png",[23,132],{"title":25,"style":133,"border":27,"alt":25,"src":134,"width":135,"height":136},"border-image: none; display: inline; background-image: none;","\u002Farticles\u002Fimages\u002Fimage_thumb_636774731996251347.png",500,461,[12,138,139,140,143,144,148,149,152,153],{},"Now if you try to start the Angular CLI web server from the command prompt referencing the global CLI you will see typical error\u002Fwarning   C:\\Temp\\Angular\\Wildermuth\\ClientApp>",[51,141,142],{},"ng serve ","    ",[145,146,147],"em",{}," Your global Angular CLI version (7.0.5) is greater than your local       version (1.7.0). The local Angular CLI version is used.","  Okay, so what is going on here. Yes my global version is 7.0.5 while my version in this solution can be found by looking at the package.json where you can see my local version within this project is \"@angular\u002Fcli\": \"~1.7.0\".\nBack to using ",[51,150,151],{},"npm start"," to launch the Angular CLI development server which will use the cli installed within the project i.e. version 1.7.0 (the configuration in package.json is respected)\n",[18,154,156],{"href":155},"\u002Farticles\u002Fimages\u002Fimage_636774731997045623.png",[23,157],{"title":25,"style":26,"border":27,"alt":25,"src":158,"width":29,"height":159},"\u002Farticles\u002Fimages\u002Fimage_thumb_636774731997855348.png",130,[12,161,162,163,166,170],{},"Now I can open a browser and navigate to ",[18,164],{"title":165,"href":165},"http:\u002F\u002Flocalhost:4200\u002F",[18,167,165],{"href":165,"rel":168},[169],"nofollow"," and my Hello World application\u002Fpage if visible.",[12,172,173,174,178,179,182,185],{},"Okay, one more option (these different approach are getting confusing). You can modify your ASP.NET Core app to use the external Angular CLI running instance instead of launching a new one on every F5 (debug-run). In your Startup.cs class, replace spa.UseAngularCliServer with the following: spa.UseProxyToSpaDevelopmentServer(“",[18,175,177],{"rel":176},[169],"https:\u002F\u002Flocalhost:4200”","); After making this change, and pressing F5 it opens a browser to this address ",[18,180],{"title":181,"href":181},"https:\u002F\u002Flocalhost:44399\u002F",[18,183,181],{"href":181,"rel":184},[169]," (I thought it would have been localhost:4200). Don’t fret, it is using the externally started server.",[12,187,188,189,192,195,196],{},"You can validate this by closing the previously opened command prompt (that was started from npm start), then refresh the ",[18,190],{"href":191},"https:\u002F\u002Flocahost:44399",[18,193,191],{"href":191,"rel":194},[169]," and you will see exceptions like …",[145,197,198],{},"SocketException: No connection could be made because the target machine actively refused it…",[12,200,201],{},"So, the pattern at this moment is   1. Modify Startup.cs (comment out the\nUseAngluarCliServer and add the UseProxyToSpaDevelopmentServer methods below)   \u002F\u002Fspa.UseAngularCliServer(npmScript: \"start\");",[12,203,204,205,208,211,212,215,216,218,221],{},"spa.UseProxyToSpaDevelopmentServer(",[18,206],{"href":207},"http:\u002F\u002Flocalhost:4200",[18,209,207],{"href":207,"rel":210},[169],");      2. Open command prompt, cd to ClientApp and type ",[51,213,214],{},"npm start ","(starts the web server, which will remain open while I code in VS.NET and pressing F5 will compile my c# and server it up in the existing web server created from npm start  Interestingly, you do not have to hit F5 all the time. So in this case, you started the Angular server with npm start, you did not start debugging with F5 however you can just open a browser and use the ",[18,217],{"title":181,"href":181},[18,219,181],{"href":181,"rel":220},[169]," address to view your page.",[12,223,224,225,227],{},"At this moment my code is not in debug mode. How can I attach a debugger, so I can once again step into the code (without hitting F5)? Yes you can. Open Debug – Attach To Process (and select dotnet.exe)  Refresh your page and now any breakpoints will be hit allowing you to step through your code.",[110,226],{},[18,228,230],{"href":229},"\u002Farticles\u002Fimages\u002Fimage_636774724358746757.png",[23,231],{"title":25,"style":232,"border":27,"alt":25,"src":233,"width":234,"height":29},"display: inline; background-image: none;","\u002Farticles\u002Fimages\u002Fimage_thumb_636774724359686912.png",229,[12,236,237,238],{},"With this template, navigation\u002Fpages are not served through MVC (controllers), your ASP.NET Core solution is really setup to server data through AJAX or Rest End Points only. This is a big change from ASP.NET Web Projects where navigating to a page would open a controller which would return a View (cshtml). This is a big change! This approach is very much inline with a true SPA (where one page is loaded and navigation between pages is performed locally within the html\u002Fjs via client-side routing)  One more thing for this post. With your browser open to the home of the application, open ClientApp\u002Fsrc\u002Fhome\u002Fhome.component.html in VS.NET. With both the browser and VS.NET visible modify Welcome to Welcome! and save the file. Notice that the browser was aware of the html\u002Fjs modification automatically, and refreshed the page. Now Welcome shows Welcome! all automatically.\n",[18,239,241],{"href":240},"\u002Farticles\u002Fimages\u002Fimage_636774724360363421.png",[23,242],{"title":25,"style":243,"border":27,"alt":25,"src":244,"width":29,"height":245},"margin: 0px; display: inline; background-image: none;","\u002Farticles\u002Fimages\u002Fimage_thumb_636774724361024657.png",78,[12,247,248,249,252,253,256],{},"In ",[51,250,251],{},"development",", the app runs in a mode optimized for developer convenience. For example, JavaScript bundles include source maps (so that when debugging, you can see your original TypeScript code). The app watches for TypeScript, HTML, and CSS file changes on disk and automatically recompiles and reloads when it sees those files change.  This does not occur with a deployed web application in production. In production, the apps files are optimized for performance. When you publish the build configuration emits a minified, ahead-of-time (AOT) compiled build of your client side code.  ",[51,254,255],{},"Deployment","  As a test I published my project to a local folder. Watching the Output window, I can see it creates a directory within my project …\\obj\\Release\\netcoreapp2.1\\PubTmp\\Out then runs the following:   npm install    npm run build --prod    ng build --extract-css “—prod”    Creating directory Publish\\ClientApp\\dist, copies file and finished.",[12,258,259],{},[18,260,262],{"href":261},"\u002Farticles\u002Fimages\u002Fimage_636774724361830597.png",[23,263],{"title":25,"style":232,"border":27,"alt":25,"src":264,"width":265,"height":266},"\u002Farticles\u002Fimages\u002Fimage_thumb_636774724362731671.png",355,165,[12,268,269],{},"How did it know to do all those commands? Open the .csproj, there you will find build steps integrated. This is beyond the scope of this post, however reading up on MSBuild documents may help. I do feel there is a lot to learn here however.",[12,271,272],{},[18,273,275],{"href":274},"\u002Farticles\u002Fimages\u002Fimage_636774724364079668.png",[23,276],{"title":25,"style":232,"border":27,"alt":25,"src":277,"width":278,"height":279},"\u002Farticles\u002Fimages\u002Fimage_thumb_636774724364950086.png",485,154,{"title":281,"searchDepth":282,"depth":282,"links":283},"",2,[],"2018-11-10T18:47:16.586Z","A tutorial on starting out with the Angular template within Visual Studio 2017.  Modern web development is new and different.  I liken it to when developers made the jump from classic asp to asp.net.  There is a learning curve!  Start small, challenge yourself to learn small tasks and over time a familiarity will give you more comfort.  Read more.","md",{},true,"\u002Farticles\u002Fgetting-started-angular-wvisual-studio-aspnet-core",{"title":6,"description":285},"articles\u002Fgetting-started-angular-wvisual-studio-aspnet-core",[293],"angular","EcxN8ODWjniqrt9rSc5VIej063ti2FC7LJ0qiePYUsU",[296],{"id":297,"title":298,"body":299,"description":303,"extension":286,"img":304,"meta":305,"name":293,"navigation":288,"path":306,"seo":307,"stem":308,"__hash__":309},"tags\u002Ftags\u002Fangular.md","Angular",{"type":9,"value":300,"toc":301},[],{"title":281,"searchDepth":282,"depth":282,"links":302},[],"Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1598313183973-4effcded8d5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80",{},"\u002Ftags\u002Fangular",{"description":303},"tags\u002Fangular","eoDcAD3OtoeAOkBSGo8g8j_VXyVw7KjxglMdE7-YP0Y",{"id":311,"title":312,"author":7,"body":313,"createdAt":730,"description":317,"extension":286,"img":325,"meta":731,"navigation":288,"path":732,"seo":733,"stem":734,"tags":735,"updatedAt":730,"__hash__":738},"articles\u002Farticles\u002Fgetting-started-vuejs-wvisual-studio-aspnet-core-1.md","Getting Started Vue.js w\u002FVisual Studio ASP.NET Core 1",{"type":9,"value":314,"toc":728},[315,318,336,339,350,364,373,376,385,418,420,434,446,456,478,501,530,533,539,560,589,658,664,676],[12,316,317],{},"So starting this off, looking for a Vue.js SPA template within Visual Studio…nope not available.\nUsing command line dotnet new –l you can see it is not within the template package from Microsoft.",[12,319,320,328,329],{},[18,321,323],{"href":322},"\u002Farticles\u002Fimages\u002Fimage_636783176934907896.png",[23,324],{"title":25,"style":232,"border":27,"alt":25,"src":325,"width":326,"height":327},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176935948243.png",308,246,"     ",[18,330,332],{"href":331},"\u002Farticles\u002Fimages\u002Fimage_636783176936835671.png",[23,333],{"title":25,"style":232,"border":27,"alt":25,"src":334,"width":29,"height":335},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176937616708.png",195,[12,337,338],{},"Second attempt, is to get the latest template solutions from Microsoft using the following command from a dos prompt.",[12,340,341,342,346,349],{},"dotnet new --install ",[18,343,345],{"href":344},"https:\u002F\u002Fwww.nuget.org\u002Fpackages\u002FMicrosoft.AspNetCore.SpaTemplates\u002F","microsoft.aspnetcore.spatemplates",[51,347,348],{},"Unfortunately",", the Vue templates are not available within this package (unlike React and Angular templates).",[12,351,352,355,356,360,361,363],{},[103,353,354],{},"Building our own Vue Template","  I am going to build one up using existing templates from Microsoft and Visual Studio with the new\n",[18,357,359],{"href":358},"https:\u002F\u002Fcli.vuejs.org\u002F","Vue CLI 3"," templating system. Starting off install the vue cli globally on your pc.",[110,362],{},"\nnpm list –g --depth 0 (to list all globally install packages, depth argument says to list only the top packages not the dependencies)",[12,365,366],{},[18,367,369],{"href":368},"\u002Farticles\u002Fimages\u002Fimage_636783176938295748.png",[23,370],{"title":25,"style":243,"border":27,"alt":25,"src":371,"width":29,"height":372},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176939127447.png",106,[12,374,375],{},"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\u002Fcli",[12,377,378],{},[18,379,381],{"href":380},"\u002Farticles\u002Fimages\u002Fimage_636783176939865053.png",[23,382],{"title":25,"style":243,"border":27,"alt":25,"src":383,"width":29,"height":384},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176940599977.png",125,[12,386,387,388,396,397,405,406,413,415],{},"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)  ",[18,389,391],{"href":390},"\u002Farticles\u002Fimages\u002Fimage_636783176941282020.png",[23,392],{"title":25,"style":232,"border":27,"alt":25,"src":393,"width":394,"height":395},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176942157272.png",288,81,"  Opening the csproj with vs.net (Open Project), and building the project to restore nuget packages, and restoring npm packages (taking several minutes)    ",[18,398,400],{"href":399},"\u002Farticles\u002Fimages\u002Fimage_636783176942942110.png",[23,401],{"title":25,"style":232,"border":27,"alt":25,"src":402,"width":403,"height":404},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176943756200.png",197,187,"  Make the following changes within Startup.cs    configuration.RootPath = 'ClientApp\u002Fbuild'; => configuration.RootPath = 'ClientApp\u002Fdist';     app.UseHttpsRedirection(); => \u002F\u002F app.UseHttpsRedirection(); comment out (we do not want to deal with https certificates at this moment)  Add nuget package VueClieMiddleware  ",[18,407,409],{"href":408},"\u002Farticles\u002Fimages\u002Fimage_636783176944675747.png",[23,410],{"title":25,"style":243,"border":27,"alt":25,"src":411,"width":29,"height":412},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176945464707.png",41,[110,414],{},[18,416],{"href":417},"\u002Farticles\u002Fimages\u002Fimage_636783176946236903.png",[18,419],{"href":417},[12,421,422,428,430,431,433],{},[18,423,424],{"href":417},[23,425],{"title":25,"style":243,"border":27,"alt":25,"src":426,"width":427,"height":29},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176947064497.png",241,[110,429],{},"\n\u002F\u002F spa.UseReactDevelopmentServer(npmScript: 'start'); comment out react development server and reference vue",[110,432],{},"\nspa.UseVueCli(npmScript: 'serve', port: 8080);",[12,435,436,437,439,440,442,443,445],{},"Remove all the contents of the \u002FClientApp foler and create a new project using Vue CLI and returning to command prompt in a new directory",[110,438],{},"\nmd vue",[110,441],{},"\ncd vue",[110,444],{},"\nvue create client-app",[12,447,448],{},[18,449,451],{"href":450},"\u002Farticles\u002Fimages\u002Fimage_636783176947910505.png",[23,452],{"title":25,"style":232,"border":27,"alt":25,"src":453,"width":454,"height":455},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176948670926.png",388,116,[12,457,458,459,461,469,471],{},"selecting with mouse default (babel, eslint)",[110,460],{},[18,462,464],{"href":463},"\u002Farticles\u002Fimages\u002Fimage_636783176949582507.png",[23,465],{"title":25,"style":232,"border":27,"alt":25,"src":466,"width":467,"height":468},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176950311914.png",390,92,[110,470],{},[18,472,474],{"href":473},"\u002Farticles\u002Fimages\u002Fimage_636783176951069191.png",[23,475],{"title":25,"style":232,"border":27,"alt":25,"src":476,"width":477,"height":29},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176951855897.png",397,[12,479,480,481,488,496,497,500],{},"Moving all the Vue CLI code now to the VS.NET folder ClientApp. I am using Visual Studio in this tutorial (not vscode).  ",[18,482,484],{"href":483},"\u002Farticles\u002Fimages\u002Fimage_636783176952644959.png",[23,485],{"title":25,"style":243,"border":27,"alt":25,"src":486,"width":29,"height":487},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176953456238.png",104,[18,489,491],{"href":490},"\u002Farticles\u002Fimages\u002Fimage_636783176954088989.png",[23,492],{"title":25,"style":232,"border":27,"alt":25,"src":493,"width":494,"height":495},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176954863643.png",110,72,"  ",[103,498,499],{},"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.",[12,502,503,504,506,507,509,510,512,513,516,519,520,522,523,525,526],{},"2 If however I try to run the project via dotnet run I am getting the following error:",[110,505],{},"\nSystem.InvalidOperationException\nHResult=0x80131509",[110,508],{},"\nMessage=Unable to configure HTTPS endpoint. No server certificate was specified, and the default developer certificate could not be found.",[110,511],{},"\nTo 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 ",[18,514],{"href":515},"https:\u002F\u002Fgo.microsoft.com\u002Ffwlink\u002F?linkid=848054",[18,517,515],{"href":515,"rel":518},[169],".",[110,521],{},"\nSource=Microsoft.AspNetCore.Server.Kestrel.Core",[110,524],{},"\nStackTrace:………….info: Microsoft.AspNetCore.SpaServices",[527,528,529],"span",{},"0",[12,531,532],{},"client-app@0.1.0 serve C:\\Temp\\vue\\aspnet-core-vue-app\\aspnet-core-vue-app\\ClientApp",[12,534,535,536,538],{},"vue-cli-service serve '--port' '8080'  INFO Starting development server...    The error message told me to run dotnet dev-certs https --clean",[110,537],{},"\nI tried but ended up with this error message",[12,540,541,542,544,545,547,548,550,557,559],{},"Cleaning HTTPS development certificates from the machine. A prompt might get displayed to confirm the removal of some of the certificates.",[110,543],{},"\nThere was an error trying to clean HTTPS development certificates on this machine.",[110,546],{},"\nSequence contains no matching element",[110,549],{},[18,551,553],{"href":552},"\u002Farticles\u002Fimages\u002Fimage_636783176955551263.png",[23,554],{"title":25,"style":243,"border":27,"alt":25,"src":555,"width":29,"height":556},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176956233921.png",27,[110,558],{},"\nI 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.",[12,561,562,569,570,572,579,581,582,585,588],{},[18,563,565],{"href":564},"\u002Farticles\u002Fimages\u002Fimage_636783176956890292.png",[23,566],{"title":25,"style":232,"border":27,"alt":25,"src":567,"width":568,"height":29},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176957562139.png",243,"  I did this under Certificates Current User – Personal > Certificates (sort by friendly name, select all and remove)  Trusted Root",[110,571],{},[18,573,575],{"href":574},"\u002Farticles\u002Fimages\u002Fimage_636783176958629353.png",[23,576],{"title":25,"style":243,"border":27,"alt":25,"src":577,"width":29,"height":578},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176959335403.png",37,[110,580],{},"\nOnce 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: ",[18,583],{"title":584,"href":584},"https:\u002F\u002Fgithub.com\u002Faspnet\u002FAspNetCore\u002Fissues\u002F3421",[18,586,584],{"href":584,"rel":587},[169],")",[12,590,591,592,595,598,599,602,603,610,611,496,617,496,624,328,631,638,639,641,642,644,645,648,651,652,654,655,657],{},"3 With a command prompt, cd to the ClientApp directory and npm run serve (after you can browse to the site via ",[18,593],{"href":594},"http:\u002F\u002Flocalhost:8080",[18,596,594],{"href":594,"rel":597},[169]," as the on screen instructions provide)  ",[51,600,601],{},"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.  ",[18,604,606],{"href":605},"\u002Farticles\u002Fimages\u002Fimage_636783176960052361.png",[23,607],{"title":25,"style":243,"border":27,"alt":25,"src":608,"width":29,"height":609},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176960663681.png",29,"  A browser opens with the Vue GUI options  ",[18,612,614],{"href":613},"\u002Farticles\u002Fimages\u002Fimage_636783176961647957.png",[23,615],{"title":25,"style":243,"border":27,"alt":25,"src":616,"width":29,"height":95},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176962446700.png",[18,618,620],{"href":619},"\u002Farticles\u002Fimages\u002Fimage_636783176963253878.png",[23,621],{"title":25,"style":243,"border":27,"alt":25,"src":622,"width":29,"height":623},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176963995444.png",36,[18,625,627],{"href":626},"\u002Farticles\u002Fimages\u002Fimage_636783176964694200.png",[23,628],{"title":25,"style":243,"border":27,"alt":25,"src":629,"width":29,"height":630},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176965536783.png",94,[18,632,634],{"href":633},"\u002Farticles\u002Fimages\u002Fimage_636783176966230883.png",[23,635],{"title":25,"style":243,"border":27,"alt":25,"src":636,"width":29,"height":637},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176966867718.png",111,"  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.",[110,640],{},"\nMicrosoft.AspNetCore.SpaServices:Information: Starting server on port 8080...",[110,643],{},"\nMicrosoft.AspNetCore.Hosting.Internal.WebHost:Information: Request starting HTTP\u002F1.1 DEBUG ",[18,646],{"href":647},"http:\u002F\u002Flocalhost:50557\u002F",[18,649,647],{"href":647,"rel":650},[169]," 0",[110,653],{},"\nMicrosoft.AspNetCore.Hosting.Internal.WebHost:Information: Request finished in 32.0777ms 200",[110,656],{},"\nMicrosoft.AspNetCore.SpaServices:Information: > ClientApp@0.1.0 serve C:\\Temp\\vue\\aspnetcorevueappGui\\aspnetcorevueappGui\\aspnetcorevueappGui\\ClientApp",[659,660,661],"blockquote",{},[12,662,663],{},"vue-cli-service serve '--port' '8080'",[12,665,666,667,669,670,672,673,675],{},"INFO Starting development server...",[110,668],{},"\nMicrosoft.AspNetCore.SpaServices:Information: DONE Compiled successfully in 19505ms15:42:01",[110,671],{},"\nMicrosoft.AspNetCore.SpaServices:Information:",[110,674],{},"\nApp running at:",[677,678,679,689],"ul",{},[680,681,682,683,686],"li",{},"Local: ",[18,684],{"href":685},"http:\u002F\u002Flocalhost:8080\u002F",[18,687,685],{"href":685,"rel":688},[169],[680,690,691,692,695,698,699,701,702,709,710,714,715,719,720,724,727],{},"Network: ",[18,693],{"href":694},"http:\u002F\u002F192.168.1.101:8080\u002F",[18,696,694],{"href":694,"rel":697},[169],"    Note that the development build is not optimized.",[110,700],{},"\nMicrosoft.AspNetCore.SpaServices:Information: To create a production build, run npm run build.  ",[18,703,705],{"href":704},"\u002Farticles\u002Fimages\u002Fimage_636783176967988657.png",[23,706],{"title":25,"style":232,"border":27,"alt":25,"src":707,"width":29,"height":708},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176968671677.png",42,"  The browser did open navigated to ",[18,711,712],{"href":712,"rel":713},"https:\u002F\u002Flocalhost:50557\u002F",[169]," changing this to ",[18,716,717],{"href":717,"rel":718},"http:\u002F\u002Flocalhost:50557",[169]," my new project opened up.  Also ",[18,721,723],{"title":722,"href":722}," http:\u002F\u002Flocalhost:8080\u002F "," ",[18,725,685],{"href":685,"rel":726},[169],"  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).",{"title":281,"searchDepth":282,"depth":282,"links":729},[],"2018-11-20T13:34:57.003Z",{},"\u002Farticles\u002Fgetting-started-vuejs-wvisual-studio-aspnet-core-1",{"title":312,"description":317},"articles\u002Fgetting-started-vuejs-wvisual-studio-aspnet-core-1",[736,737],"netcore","vuejs","gH7c2V4YNLNu8_InM5kss4Ft-n7nbDlOeseetV4SuU4",{"id":740,"title":741,"author":7,"body":742,"createdAt":804,"description":805,"extension":286,"img":754,"meta":806,"navigation":288,"path":807,"seo":808,"stem":809,"tags":810,"updatedAt":804,"__hash__":812},"articles\u002Farticles\u002Fvisual-studio-i-need-a-command-prompt-quick-tip.md","Visual Studio I need a Command Prompt Quick Tip",{"type":9,"value":743,"toc":802},[744,747,756,768,777,780,791],[12,745,746],{},"Ok, with today's’ development efforts I am in need of a quick way to open a command prompt to the location of the solution. Here is a quick tip on how to enable a keystroke to immediately open one for you (while working within vs.net).  Tools > External Tools “Add”",[12,748,749],{},[18,750,752],{"href":751},"\u002Farticles\u002Fimages\u002Fimage_636774678565575322.png",[23,753],{"title":25,"style":232,"border":27,"alt":25,"src":754,"width":29,"height":755},"\u002Farticles\u002Fimages\u002Fimage_thumb_636774678566514389.png",242,[12,757,758,759,761,762,764,765,767],{},"Use the following values  Title: VS Command Prompt",[110,760],{},"\nCommand: C:\\Windows\\System32\\cmd.exe",[110,763],{},"\nArguments: \u002Fk “C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\Tools\\VsDevCmd.bat”",[110,766],{},"\nInitial Directory: $(SolutionDir) (You can also use $(ProjectDir) to open command prompt in the location of the current project … i like this better)  After you hit OK VS Command Prompt command is available under Tools",[12,769,770],{},[18,771,773],{"href":772},"\u002Farticles\u002Fimages\u002Fimage_636774678569077476.png",[23,774],{"title":25,"style":232,"border":27,"alt":25,"src":775,"width":776,"height":29},"\u002Farticles\u002Fimages\u002Fimage_thumb_636774678569735435.png",140,[12,778,779],{},"Now you can add a Key Stroke command for this…  Tools > Options > Keyboard (here i have added Alt-C). Shown below the only thing to remember is this was my 2nd external tool so I had to look for Tools.ExternalCommand2 to attach my keystroke command.",[12,781,782],{},[18,783,785],{"href":784},"\u002Farticles\u002Fimages\u002FSNAGHTML58a67cb2_636774678570976068.png",[23,786],{"title":787,"style":232,"border":27,"alt":787,"src":788,"width":789,"height":790},"SNAGHTML58a67cb2","\u002Farticles\u002Fimages\u002FSNAGHTML58a67cb2_thumb_636774678571975067.png",400,210,[12,792,793,794,801],{},"Now ",[23,795],{"className":796,"alt":799,"src":800},[797,798],"wlEmoticon","wlEmoticon-smile","Smile","\u002Farticles\u002Fimages\u002FwlEmoticon-smile_636774678572557490.png"," I can click Alt-C and immediately a command prompt window opens to the my solution directory.",{"title":281,"searchDepth":282,"depth":282,"links":803},[],"2018-11-10T17:30:57.333Z","Need a command prompt fast while working in Visual Studio? Yes is the answer, especially with modern web development efforts.  Often this is to start a command line interface tool, install an npm package, start a web server etc.  This is an old tip but is more relevant today than ever.  Alt-C is the answer...read how.",{},"\u002Farticles\u002Fvisual-studio-i-need-a-command-prompt-quick-tip",{"title":741,"description":805},"articles\u002Fvisual-studio-i-need-a-command-prompt-quick-tip",[811],"visualstudio","ghOLgPX7maoaDNaCXGN9EJJOfhVA9pCxBkqaMJ6_RJA",1781574761168]