[{"data":1,"prerenderedAt":602},["ShallowReactive",2],{"article-vue-app-and-mvc-routing-wvisual-studio-aspnet-core":3},{"article":4,"tags":182,"previous":210,"next":308},{"id":5,"title":6,"author":7,"body":8,"createdAt":170,"description":171,"extension":172,"img":137,"meta":173,"navigation":174,"path":175,"seo":176,"stem":177,"tags":178,"updatedAt":170,"__hash__":181},"articles\u002Farticles\u002Fvue-app-and-mvc-routing-wvisual-studio-aspnet-core.md","Vue App and MVC Routing w\u002FVisual Studio ASP.NET Core",null,{"type":9,"value":10,"toc":166},"minimark",[11,15,18,25,31,46,66,98,111,160,163],[12,13,14],"p",{},"###What page is loaded on starting the application.",[12,16,17],{},"The default route for this VS.NET ASP.NET Core application is the public\u002Findex.html with the following setup in the Startup.cs",[12,19,20,21,24],{},"app.UseSpa(spa => { ",[22,23],"br",{}," spa.Options.SourcePath = \"ClientApp\";",[12,26,27,28,30],{}," if (env.IsDevelopment()) ",[22,29],{}," {",[12,32,33,34,36,37,39,40,42,43,45],{}," \u002F\u002F run npm process with client app ",[22,35],{}," spa.UseVueCli(npmScript: \"serve\", port: 8080); ",[22,38],{}," ",[22,41],{}," } ",[22,44],{}," }); ",[12,47,48,52,53,56,57,61,62,65],{},[49,50,51],"strong",{},"If you have"," a HomeController and a Views\u002FHome\u002FIndex.cshtml view, \nwhen the application starts via F5 it will route by default to http:\u002F\u002Flocalhost:50557 ",[49,54,55],{},"or"," \n",[58,59,60],"a",{"href":60},"http:\u002F\u002Flocalhost:50557\u002Findex.html"," and if you want to navigate to your controller\u002Fview you can navigate to \n",[58,63,64],{"href":64},"http:\u002F\u002Flocalhost:50557\u002FHome\u002FIndex"," Essentially it will default to the vue index.html page in this scenario.",[67,68,69,83,86],"blockquote",{},[12,70,71],{},[58,72,74],{"href":73},"\u002Farticles\u002Fimages\u002Fimage_thumb[1]_636791382475500953.png",[75,76],"img",{"style":77,"title":78,"src":79,"alt":78,"width":80,"height":81,"border":82},"margin: 0px; border: 0px currentcolor; display: inline; background-image: none;","image_thumb[1]","\u002Farticles\u002Fimages\u002Fimage_thumb[1]_thumb_636791382476448208.png",244,141,0,[12,84,85],{},"Navigating to http:\u002F\u002Flocalhost:50557\u002Fhome\u002Findex will navigate to the MVC view, however if you want this route to navigate the vue app you can add, \nwhich would redirect the user from the MVC view to the vue app again.",[12,87,88,89,91,92,94,95,97],{},"public IActionResult Index() ",[22,90],{}," { ",[22,93],{}," return Redirect(\"~\u002Findex.html\"); ",[22,96],{}," }",[12,99,100,102,103,106,107,110],{},[49,101,51],{}," a HomeController ",[49,104,105],{},"AND ","and you add ",[49,108,109],{},"MapSpaFallbackRoute"," reference within the Startup.cs similar to the following, starting via F5 the site will navigate to http:\u002F\u002Flocalhost:50557\u002F and land on the Views\u002FHome\u002FIndex.cshtml This really is the reverse of the above scenario. In this case it will default to the MVC view and you have to explicitly navigate to the \u002Findex.html for the vue app.",[67,112,113,125,133,143,150],{},[12,114,115,116,118,119,121,122,124],{},"app.UseMvc(routes => { ",[22,117],{}," routes.MapRoute( ",[22,120],{}," name: \"default\", ",[22,123],{}," template: \"{controller}\u002F{action=Index}\u002F{id?}\");",[12,126,39,127,39,130,132],{},[49,128,129],{},"routes.MapSpaFallbackRoute(\"spa-fallback\", new { controller = \"Home\", action = \"Index\" });",[22,131],{},"});",[12,134,135],{},[58,136,138],{"href":137},"\u002Farticles\u002Fimages\u002Fimage_thumb[2]_636791382477200018.png",[75,139],{"style":77,"title":140,"src":141,"alt":140,"width":80,"height":142,"border":82},"image_thumb[2]","\u002Farticles\u002Fimages\u002Fimage_thumb[2]_thumb_636791382477864407.png",74,[12,144,145,146,149],{},"If you want to navigate to your vue app, you must ",[49,147,148],{},"explicitly"," reference http:\u002F\u002Flocalhost:50557\u002FIndex.html Any invalid routes will default to the Home\u002FIndex view.",[12,151,152],{},[58,153,155],{"href":154},"https:\u002F\u002Fwww.davidyardy.com\u002FPosts\u002Ffiles\u002Fimage_thumb[3]_636791382478902143.png",[75,156],{"style":77,"title":157,"src":158,"alt":157,"width":80,"height":159,"border":82},"image_thumb[3]","\u002Farticles\u002Fimages\u002Fimage_thumb[3]_thumb_636791382479671548.png",126,[12,161,162],{},"There are a number of combinations and can be confusing. \n",[12,164,165],{},"Primarily, both the vue app and MVC navigation work fine. It really just depends on if you want the MVC to be the default route, or the vue app index.html page.",{"title":167,"searchDepth":168,"depth":168,"links":169},"",2,[],"2018-11-30T01:30:48.068Z","Vue.js SPA routing conflicts with MVC routing.  Short article reviewing the options, and an approach on how to get both working nicely together.","md",{},true,"\u002Farticles\u002Fvue-app-and-mvc-routing-wvisual-studio-aspnet-core",{"title":6,"description":171},"articles\u002Fvue-app-and-mvc-routing-wvisual-studio-aspnet-core",[179,180],"vuejs","netcore","up2a1CH7j5uH_V7CzCVaVuAZueA1QSdo_Obd_kNIwWU",[183,197],{"id":184,"title":185,"body":186,"description":190,"extension":172,"img":191,"meta":192,"name":180,"navigation":174,"path":193,"seo":194,"stem":195,"__hash__":196},"tags\u002Ftags\u002Fnetcore.md","Netcore",{"type":9,"value":187,"toc":188},[],{"title":167,"searchDepth":168,"depth":168,"links":189},[],".NET Core is a new version of .NET Framework, which is a free, open-source, general-purpose development platform maintained by Microsoft. It is a cross-platform framework that runs on Windows, macOS, and Linux operating systems.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1598313183973-4effcded8d5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80",{},"\u002Ftags\u002Fnetcore",{"description":190},"tags\u002Fnetcore","D5BWCPpKVXJTUKU0TRuD3sWQ9rXtqETGkxzHAK__g5w",{"id":198,"title":199,"body":200,"description":204,"extension":172,"img":191,"meta":205,"name":179,"navigation":174,"path":206,"seo":207,"stem":208,"__hash__":209},"tags\u002Ftags\u002Fvuejs.md","Vuejs",{"type":9,"value":201,"toc":202},[],{"title":167,"searchDepth":168,"depth":168,"links":203},[],"Vue (pronounced \u002Fvjuː\u002F, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable",{},"\u002Ftags\u002Fvuejs",{"description":204},"tags\u002Fvuejs","FLzo8HD9QLE9FzBr4K8hRvB7QUPBQ4Ku-dpXQK90QZM",{"id":211,"title":212,"author":7,"body":213,"createdAt":298,"description":299,"extension":172,"img":227,"meta":300,"navigation":174,"path":301,"seo":302,"stem":303,"tags":304,"updatedAt":298,"__hash__":307},"articles\u002Farticles\u002Fattaching-to-net-debugger-wvisual-studio-aspnet-core.md","Attaching to .NET Debugger w\u002FVisual Studio ASP.NET Core",{"type":9,"value":214,"toc":296},[215,218,238,241,245,248,251,262,265,274,277,286],[12,216,217],{},"Attaching from within Visual Studio to the dotnet.exe process Debug – Attach to Process",[67,219,220,221,220,229,220],{},"  \n",[58,222,224],{"href":223},"\u002Farticles\u002Fimages\u002Fimage_thumb3_636794037223872773.png",[75,225],{"style":77,"title":226,"src":227,"alt":226,"width":228,"height":80,"border":82},"image_thumb3","\u002Farticles\u002Fimages\u002Fimage_thumb3_thumb_636794037227151161.png",166,[58,230,232],{"href":231},"\u002Farticles\u002Fimages\u002Fimage_thumb4_636794037229825895.png",[75,233],{"style":234,"title":235,"src":236,"alt":235,"width":80,"height":237,"border":82},"border: 0px currentcolor; display: inline; background-image: none;","image_thumb4","\u002Farticles\u002Fimages\u002Fimage_thumb4_thumb_636794037232542538.png",174,[67,239,240],{},"  \nThis works fine, however to me seems too many clicks\u002Fsteps to do efficiently.  \n",[58,242,244],{"href":243},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=arcticdev.AnotherAttachToAny","AnotherAttachToAny",[12,246,247],{},"Once installed, I then set keystroke shortcut keys to execute the above steps.  This is how it is currently configured to me.  You can see I have Alt-A setup to immediately attach to the w3process (IIS), and Alt-D attaches to dotnet.exe. ",[12,249,250],{},"This is one keystroke to attach to the running process and any breakpoints within my .net code are hit and I can then step through.",[12,252,253],{},[58,254,256],{"href":255},"\u002Farticles\u002Fimages\u002Fimage_636794037234623240.png",[75,257],{"style":258,"title":259,"src":260,"alt":259,"width":80,"height":261,"border":82},"margin: 0px; display: inline; background-image: none;","image","\u002Farticles\u002Fimages\u002Fimage_thumb_636794037237173898.png",62,[12,263,264],{},"Configuration of this extension is done through Tools – Options – Another Attach To Any",[12,266,267],{},[58,268,270],{"href":269},"\u002Farticles\u002Fimages\u002Fimage_636794037240524929.png",[75,271],{"style":258,"title":259,"src":272,"alt":259,"width":80,"height":273,"border":82},"\u002Farticles\u002Fimages\u002Fimage_thumb_636794037243711700.png",193,[12,275,276],{},"Setting up a keystroke to one of the above commands is done through Tools – Options – Keyboard",[12,278,279],{},[58,280,282],{"href":281},"\u002Farticles\u002Fimages\u002Fimage_636794037246961946.png",[75,283],{"style":258,"title":259,"src":284,"alt":259,"width":80,"height":285,"border":82},"\u002Farticles\u002Fimages\u002Fimage_thumb_636794037249700449.png",191,[12,287,288,289],{},"This single extension has saved me hundreds of hours ",[75,290],{"className":291,"src":294,"alt":295},[292,293],"wlEmoticon","wlEmoticon-smile","\u002Farticles\u002Fimages\u002FwlEmoticon-smile_636794037251738341.png","Smile",{"title":167,"searchDepth":168,"depth":168,"links":297},[],"2018-12-03T03:15:25.405Z","You have a website up and running, and now you want to connect the Visual Studio Debugger.  This is often the case if you do not start with F5 - Debug to start the browser and automatically attach to the .net debugger.  In reality, I almost never push F5.  Instead, I attach to the debugger on the fly with the approach below.  Take a moment to check it out.",{},"\u002Farticles\u002Fattaching-to-net-debugger-wvisual-studio-aspnet-core",{"title":212,"description":299},"articles\u002Fattaching-to-net-debugger-wvisual-studio-aspnet-core",[180,305,306],"aspnet","visualstudio","Nscy8wnaq8s7ro0UwOm6dGcZvHofFD7TMOQpO4pRHZs",{"id":309,"title":310,"author":7,"body":311,"createdAt":595,"description":315,"extension":172,"img":528,"meta":596,"navigation":174,"path":597,"seo":598,"stem":599,"tags":600,"updatedAt":595,"__hash__":601},"articles\u002Farticles\u002Fstarting-a-vue-app-wvisual-studio-aspnet-core-2.md","Starting a Vue App w\u002FVisual Studio ASP.NET Core 2",{"type":9,"value":312,"toc":593},[313,316,319,404,418,421,466,479,510,520,530,533,536,556,559,574,577,586,589],[12,314,315],{},"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.",[12,317,318],{},"Significant to how the project starts\u002Fruns is the setup within Startup.cs",[320,321,325],"pre",{"className":322,"code":323,"language":324,"meta":167,"style":167},"language-cs shiki shiki-themes github-light github-dark","app.UseSpa(spa => {    \n    spa.Options.SourcePath =  \"ClientApp \";      \n    if (env.IsDevelopment())          \n    {              \n    \u002F\u002Fspa.UseReactDevelopmentServer(npmScript:  \"start \");          \n    \u002F\u002F run npm process with client app             \n    \u003Cstrong>spa.UseVueCli(npmScript:  \"serve \", port: 8080);\u003C\u002Fstrong>          \n    \u002F\u002F if you just prefer to proxy requests from client app, use proxy to SPA dev server instead, \u002F\u002F app should be already running before starting a .NET client:              \n    \u002F\u002F spa.UseProxyToSpaDevelopmentServer( \"\u003Ca href=\"http:\u002F\u002Flocalhost:8080 \");\">http:\u002F\u002Flocalhost:8080 \");\u003C\u002Fa> \n    \u002F\u002F your Vue app port\n    }\n});\n","cs",[326,327,328,336,341,347,353,359,365,371,380,386,392,398],"code",{"__ignoreMap":167},[329,330,333],"span",{"class":331,"line":332},"line",1,[329,334,335],{},"app.UseSpa(spa => {    \n",[329,337,338],{"class":331,"line":168},[329,339,340],{},"    spa.Options.SourcePath =  \"ClientApp \";      \n",[329,342,344],{"class":331,"line":343},3,[329,345,346],{},"    if (env.IsDevelopment())          \n",[329,348,350],{"class":331,"line":349},4,[329,351,352],{},"    {              \n",[329,354,356],{"class":331,"line":355},5,[329,357,358],{},"    \u002F\u002Fspa.UseReactDevelopmentServer(npmScript:  \"start \");          \n",[329,360,362],{"class":331,"line":361},6,[329,363,364],{},"    \u002F\u002F run npm process with client app             \n",[329,366,368],{"class":331,"line":367},7,[329,369,370],{},"    \u003Cstrong>spa.UseVueCli(npmScript:  \"serve \", port: 8080);\u003C\u002Fstrong>          \n",[329,372,374,377],{"class":331,"line":373},8,[329,375,376],{},"    \u002F\u002F if you just prefer to proxy requests from client app, use proxy to SPA dev server instead,",[329,378,379],{}," \u002F\u002F app should be already running before starting a .NET client:              \n",[329,381,383],{"class":331,"line":382},9,[329,384,385],{},"    \u002F\u002F spa.UseProxyToSpaDevelopmentServer( \"\u003Ca href=\"http:\u002F\u002Flocalhost:8080 \");\">http:\u002F\u002Flocalhost:8080 \");\u003C\u002Fa> \n",[329,387,389],{"class":331,"line":388},10,[329,390,391],{},"    \u002F\u002F your Vue app port\n",[329,393,395],{"class":331,"line":394},11,[329,396,397],{},"    }\n",[329,399,401],{"class":331,"line":400},12,[329,402,403],{},"});\n",[12,405,406,407,410,411,414],{},"Now, I can start my project with the following approaches (referencing Properties\u002FlaunchSettings.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) (",[49,408,409],{},"selecting"," the application name) ",[58,412],{"href":413},"http:\u002F\u002Flocalhost:8081",[58,415,413],{"href":413,"rel":416},[417],"nofollow",[12,419,420],{},"This approach starts the project with the c# debugger attached.",[320,422,424],{"className":322,"code":423,"language":324,"meta":167,"style":167},"\"aspnetcorevueappGui \": {               \n        \"commandName \":  \"Project \",               \n        \"launchBrowser \": true,               \n        \"environmentVariables \": {                 \n            \"ASPNETCORE_ENVIRONMENT \":  \"Development \"              \n        },               \n        \"applicationUrl \":  \"\u003Ca href=\"https:\u002F\u002Flocalhost:5001;http:\u002F\u002Flocalhost:5000 \"\">https:\u002F\u002Flocalhost:5001;http:\u002F\u002Flocalhost:5000 \"\u003C\u002Fa>          \n}\n",[326,425,426,431,436,441,446,451,456,461],{"__ignoreMap":167},[329,427,428],{"class":331,"line":332},[329,429,430],{},"\"aspnetcorevueappGui \": {               \n",[329,432,433],{"class":331,"line":168},[329,434,435],{},"        \"commandName \":  \"Project \",               \n",[329,437,438],{"class":331,"line":343},[329,439,440],{},"        \"launchBrowser \": true,               \n",[329,442,443],{"class":331,"line":349},[329,444,445],{},"        \"environmentVariables \": {                 \n",[329,447,448],{"class":331,"line":355},[329,449,450],{},"            \"ASPNETCORE_ENVIRONMENT \":  \"Development \"              \n",[329,452,453],{"class":331,"line":361},[329,454,455],{},"        },               \n",[329,457,458],{"class":331,"line":367},[329,459,460],{},"        \"applicationUrl \":  \"\u003Ca href=\"https:\u002F\u002Flocalhost:5001;http:\u002F\u002Flocalhost:5000 \"\">https:\u002F\u002Flocalhost:5001;http:\u002F\u002Flocalhost:5000 \"\u003C\u002Fa>          \n",[329,462,463],{"class":331,"line":373},[329,464,465],{},"}\n",[12,467,468,469,473,476,478],{},"*Visual Studio F5 (debug-run) (selecting IIS Express, browser by default navigates to ",[58,470],{"title":471,"href":472},"http:\u002F\u002Flocalhost:50557\u002F","http:\u002F\u002Flocalhost:50557",[58,474,472],{"href":472,"rel":475},[417],[22,477],{},"\nThis approach starts the project with the c# debugger attached.   ",[67,480,481],{},[12,482,483,484,486,487,489,490,492,493,495,496,500,501,503,504,506,507,509],{},"\"iisSettings\": {",[22,485],{},"\n\"windowsAuthentication\": false,",[22,488],{},"\n\"anonymousAuthentication\": true,",[22,491],{},"\n\"iisExpress\": {",[22,494],{},"\n\"applicationUrl\":  \"\u003Ca href=\"",[58,497,499],{"rel":498},[417],"http:\u002F\u002Flocalhost:50557\"\">http:\u002F\u002Flocalhost:50557"," \",",[22,502],{},"\n\"sslPort \": 0",[22,505],{},"\n}",[22,508],{},"\n} ",[12,511,512,513,516,519],{},"*npm run serve from a command prompt\u002Fterminal window and opening browser to ",[58,514],{"href":515},"http:\u002F\u002Flocalhost:8080",[58,517,515],{"href":515,"rel":518},[417],"  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);   ",[67,521,522,523,39],{},"   ",[58,524,526],{"href":525},"\u002Farticles\u002Fimages\u002Fimage_636789550424336824.png",[75,527],{"title":259,"style":258,"border":82,"alt":259,"src":528,"width":80,"height":529},"\u002Farticles\u002Fimages\u002Fimage_thumb_636789550425217823.png",98,[58,531],{"href":532},"http:\u002F\u002Flocalhost:8080\u002F",[58,534,532],{"href":532,"rel":535},[417],[12,537,538,539,541,548,549],{},"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);",[22,540],{},[58,542,544],{"href":543},"\u002Farticles\u002Fimages\u002Fimage_636789550425931758.png",[75,545],{"title":259,"style":258,"border":82,"alt":259,"src":546,"width":80,"height":547},"\u002Farticles\u002Fimages\u002Fimage_thumb_636789550426691621.png",45,"        ",[58,550,552],{"href":551},"\u002Farticles\u002Fimages\u002Fimage_636789550427600206.png",[75,553],{"title":259,"style":258,"border":82,"alt":259,"src":554,"width":80,"height":555},"\u002Farticles\u002Fimages\u002Fimage_thumb_636789550428370970.png",168,[12,557,558],{},"Attaching from within Visual Studio to the dotnet.exe process Debug – Attach to Process  ",[67,560,522,561,567,568,39],{},[58,562,564],{"href":563},"\u002Farticles\u002Fimages\u002Fimage_636789550429079347.png",[75,565],{"title":259,"style":258,"border":82,"alt":259,"src":566,"width":228,"height":80},"\u002Farticles\u002Fimages\u002Fimage_thumb_636789550430063451.png","    ",[58,569,571],{"href":570},"\u002Farticles\u002Fimages\u002Fimage_636789550431090218.png",[75,572],{"title":259,"style":258,"border":82,"alt":259,"src":573,"width":80,"height":237},"\u002Farticles\u002Fimages\u002Fimage_thumb_636789550431817517.png",[12,575,576],{},"So there are a few ways of starting your web application and debugging.",[12,578,579,580,582,583,585],{},"If you use one of the F5 approaches (above) the debugger is automatically attached, and you can step through your code as you browse\nthrough the application.  If you use F5 you can stop debugging easily by just stopping within Visual Studio the debugger.",[22,581],{},"\nIf you start the application from a terminal\u002Fcommand 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.",[22,584],{},"\nPersonally, I never use F5 and rely on attaching the process when I want to narrow my debugging experience manually.",[12,587,588],{},"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\u002Findex.html.",[590,591,592],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":167,"searchDepth":168,"depth":168,"links":594},[],"2018-11-27T22:37:23.276Z",{},"\u002Farticles\u002Fstarting-a-vue-app-wvisual-studio-aspnet-core-2",{"title":310,"description":315},"articles\u002Fstarting-a-vue-app-wvisual-studio-aspnet-core-2",[179,180],"vqGHUOh8tLLRV4bB39lZjIFEZF5X69F042wi9PFYnnI",1781574765367]