%3CLINGO-SUB%20id%3D%22lingo-sub-698648%22%20slang%3D%22en-US%22%3EHow%20to%20integrate%20Vue.js%20and%20ASP.NET%20Core%20using%20SPA%20Extension%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-698648%22%20slang%3D%22en-US%22%3E%3CDIV%20class%3D%22lia-spoiler-container%22%3E%3CA%20class%3D%22lia-spoiler-link%22%20href%3D%22%23%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%20target%3D%22_blank%22%3ESpoiler%3C%2FA%3E%3CNOSCRIPT%3E(Highlight%20to%20read)%3C%2FNOSCRIPT%3E%3CDIV%20class%3D%22lia-spoiler-border%22%3E%3CDIV%20class%3D%22lia-spoiler-content%22%3EI'm%20using%20.NET%20Core%203.0%20preview%206%20and%20Visual%20Studio%202019%2016.2.0%20Preview%202.0.%3CBR%20%2F%3EHowever%2C%20I%20think%20almost%20all%20things%20are%20available%20in%20.NET%20Core%202.x.%3C%2FDIV%3E%3CNOSCRIPT%3E%3CDIV%20class%3D%22lia-spoiler-noscript-container%22%3E%3CDIV%20class%3D%22lia-spoiler-noscript-content%22%3EI'm%20using%20.NET%20Core%203.0%20preview%206%20and%20Visual%20Studio%202019%2016.2.0%20Preview%202.0.However%2C%20I%20think%20almost%20all%20things%20are%20available%20in%20.NET%20Core%202.x.%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FNOSCRIPT%3E%3C%2FDIV%3E%3C%2FDIV%3E%0A%3CP%3ESingle%20Page%20Application(SPA)%20is%20really%20important%20technology%20for%20web%20apps%20developers.%3C%2FP%3E%0A%3CP%3EIn%20ASP.NET%20Core%2C%20there%20is%20SPA%20integration%20feature.%3C%2FP%3E%0A%3CP%3EYou%20can%20see%20it%20on%20create%20a%20new%20project%20wizard%20of%20ASP.NET%20Core%20Web%20application.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F119202i5F65A6375F26D93D%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-18%20095839.jpg%22%20title%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-18%20095839.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EThree%20items%20at%20bottom%20are%20%22Angular%22%2C%20%22React.js%22%20and%20%22React.js%20and%20Redux.%22%3C%2FP%3E%0A%3CP%3EThose%20are%20project%20template%20that%20can%20develop%20WebAPIs(using%20ASP.NET%20Core)%20and%20SPA(using%20selected%20framework)%20in%20one%20project%2C%20like%20below%3A%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20556px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F119203iEBD457F7195E0E6C%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-18%20100051.jpg%22%20title%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-18%20100051.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EYou%20can%20find%20a%20%22ClientApp%22%20folder%20in%20the%20Solution%20Explorer.%3C%2FP%3E%0A%3CP%3EIt%20is%20for%20SPA%20app.%20You%20can%20develop%20using%20Visual%20Studio%2C%20of%20cause%20also%20use%20your%20favorite%20editors%20like%20Visual%20Studio%20Code.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIf%20you%20want%20debug%20the%20app%2C%20you%20can%20just%20do%20%22Start%20Debugging.%22%3C%2FP%3E%0A%3CP%3EVisual%20Studio%20will%20launch%20development%20server%20for%20SPA%20and%20development%20server%20for%20ASP.NET%20Core%2C%20and%20then%20add%20forwarding%20request%20settings%20from%20ASP.NET%20Core%20development%20server%20to%20SPA%20development%20server.%3C%2FP%3E%0A%3CP%3EAnd%20also%2C%20%22npm%20install%22%20and%20other%20commands%20are%20executed%20automatically.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIt%20looks%20perfect!%20But%2C%20I%20thought%20where%20is%20Vue.js%3F%20I%20like%20it.%3C%2FP%3E%0A%3CP%3ESo%2C%20I%20try%20to%20use%20the%20feature%20for%20Vue.js.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CFONT%20size%3D%225%22%3ECreate%20a%20ASP.NET%20Core%20Web%20Application%20project%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%3ELet's%20create%20a%20ASP.NET%20Core%20Web%20Application%20project%20using%20API%20template.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F119205i46BF80F68E423F97%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-18%20101241.jpg%22%20title%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-18%20101241.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EAnd%20go%20to%20the%20project%20folder%2C%20and%20then%20type%20following%20command%20to%20create%20Vue.js%20project%20using%20vue-cli.%3C%2FP%3E%0A%3CPRE%3Evue%20create%20client-app%3C%2FPRE%3E%0A%3CP%3EI%20selected%20TypeScript%20for%20development%20language.%20Because%20I%20like%20it.%20%3B)%3C%2Fimg%3E%3C%2FP%3E%0A%3CP%3EIf%20you%20didn't%20install%20vue-cli%2C%20please%20check%20following%20document%3A%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fcli.vuejs.org%2Fguide%2Finstallation.html%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcli.vuejs.org%2Fguide%2Finstallation.html%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CFONT%20size%3D%225%22%3EEdit%20the%20project%20file%20to%20build%20integration%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%3ELet's%20edit%20the%20project%20file%20like%20below%3A%3C%2FP%3E%0A%3CPRE%3E%26lt%3BProject%20Sdk%3D%22Microsoft.NET.Sdk.Web%22%26gt%3B%0A%0A%20%20%26lt%3BPropertyGroup%26gt%3B%0A%20%20%20%20%26lt%3BTargetFramework%26gt%3Bnetcoreapp3.0%26lt%3B%2FTargetFramework%26gt%3B%0A%20%20%20%20%26lt%3BTypeScriptCompileBlocked%26gt%3Btrue%26lt%3B%2FTypeScriptCompileBlocked%26gt%3B%0A%20%20%20%20%26lt%3BTypeScriptToolsVersion%26gt%3BLatest%26lt%3B%2FTypeScriptToolsVersion%26gt%3B%0A%20%20%20%20%26lt%3BIsPackable%26gt%3Bfalse%26lt%3B%2FIsPackable%26gt%3B%0A%20%20%20%20%26lt%3BSpaRoot%26gt%3Bclient-app%5C%26lt%3B%2FSpaRoot%26gt%3B%0A%20%20%20%20%26lt%3BDefaultItemExcludes%26gt%3B%24(DefaultItemExcludes)%3B%24(SpaRoot)node_modules%5C**%26lt%3B%2FDefaultItemExcludes%26gt%3B%0A%20%20%26lt%3B%2FPropertyGroup%26gt%3B%0A%0A%20%20%26lt%3BItemGroup%26gt%3B%0A%20%20%20%20%26lt%3BPackageReference%20Include%3D%22Microsoft.AspNetCore.SpaServices.Extensions%22%20Version%3D%223.0.0-preview6.19307.2%22%20%2F%26gt%3B%0A%20%20%26lt%3B%2FItemGroup%26gt%3B%0A%0A%20%20%26lt%3BItemGroup%26gt%3B%0A%20%20%20%20%26lt%3B!--%20Don't%20publish%20the%20SPA%20source%20files%2C%20but%20do%20show%20them%20in%20the%20project%20files%20list%20--%26gt%3B%0A%20%20%20%20%26lt%3BContent%20Remove%3D%22%24(SpaRoot)**%22%20%2F%26gt%3B%0A%20%20%20%20%26lt%3BNone%20Remove%3D%22%24(SpaRoot)**%22%20%2F%26gt%3B%0A%20%20%20%20%26lt%3BNone%20Include%3D%22%24(SpaRoot)**%22%20Exclude%3D%22%24(SpaRoot)node_modules%5C**%22%20%2F%26gt%3B%0A%20%20%26lt%3B%2FItemGroup%26gt%3B%0A%0A%20%20%26lt%3BTarget%20Name%3D%22DebugEnsureNodeEnv%22%20BeforeTargets%3D%22Build%22%20Condition%3D%22%20'%24(Configuration)'%20%3D%3D%20'Debug'%20And%20!Exists('%24(SpaRoot)node_modules')%20%22%26gt%3B%0A%20%20%20%20%26lt%3B!--%20Ensure%20Node.js%20is%20installed%20--%26gt%3B%0A%20%20%20%20%26lt%3BExec%20Command%3D%22node%20--version%22%20ContinueOnError%3D%22true%22%26gt%3B%0A%20%20%20%20%20%20%26lt%3BOutput%20TaskParameter%3D%22ExitCode%22%20PropertyName%3D%22ErrorCode%22%20%2F%26gt%3B%0A%20%20%20%20%26lt%3B%2FExec%26gt%3B%0A%20%20%20%20%26lt%3BError%20Condition%3D%22'%24(ErrorCode)'%20!%3D%20'0'%22%20Text%3D%22Node.js%20is%20required%20to%20build%20and%20run%20this%20project.%20To%20continue%2C%20please%20install%20Node.js%20from%20https%3A%2F%2Fnodejs.org%2F%2C%20and%20then%20restart%20your%20command%20prompt%20or%20IDE.%22%20%2F%26gt%3B%0A%20%20%20%20%26lt%3BMessage%20Importance%3D%22high%22%20Text%3D%22Restoring%20dependencies%20using%20'npm'.%20This%20may%20take%20several%20minutes...%22%20%2F%26gt%3B%0A%20%20%20%20%26lt%3BExec%20WorkingDirectory%3D%22%24(SpaRoot)%22%20Command%3D%22npm%20install%22%20%2F%26gt%3B%0A%20%20%26lt%3B%2FTarget%26gt%3B%0A%0A%20%20%26lt%3BTarget%20Name%3D%22PublishRunWebpack%22%20AfterTargets%3D%22ComputeFilesToPublish%22%26gt%3B%0A%20%20%20%20%26lt%3B!--%20As%20part%20of%20publishing%2C%20ensure%20the%20JS%20resources%20are%20freshly%20built%20in%20production%20mode%20--%26gt%3B%0A%20%20%20%20%26lt%3BExec%20WorkingDirectory%3D%22%24(SpaRoot)%22%20Command%3D%22npm%20install%22%20%2F%26gt%3B%0A%20%20%20%20%26lt%3BExec%20WorkingDirectory%3D%22%24(SpaRoot)%22%20Command%3D%22npm%20run%20build%22%20%2F%26gt%3B%0A%0A%20%20%20%20%26lt%3B!--%20Include%20the%20newly-built%20files%20in%20the%20publish%20output%20--%26gt%3B%0A%20%20%20%20%26lt%3BItemGroup%26gt%3B%0A%20%20%20%20%20%20%26lt%3BDistFiles%20Include%3D%22%24(SpaRoot)dist%5C**%22%20%2F%26gt%3B%0A%20%20%20%20%20%20%26lt%3BResolvedFileToPublish%20Include%3D%22%40(DistFiles-%26gt%3B'%25(FullPath)')%22%20Exclude%3D%22%40(ResolvedFileToPublish)%22%26gt%3B%0A%20%20%20%20%20%20%20%20%26lt%3BRelativePath%26gt%3B%25(DistFiles.Identity)%26lt%3B%2FRelativePath%26gt%3B%0A%20%20%20%20%20%20%20%20%26lt%3BCopyToPublishDirectory%26gt%3BPreserveNewest%26lt%3B%2FCopyToPublishDirectory%26gt%3B%0A%20%20%20%20%20%20%26lt%3B%2FResolvedFileToPublish%26gt%3B%0A%20%20%20%20%26lt%3B%2FItemGroup%26gt%3B%0A%20%20%26lt%3B%2FTarget%26gt%3B%0A%0A%26lt%3B%2FProject%26gt%3B%0A%3C%2FPRE%3E%0A%3CP%3EAfter%20editing%20the%20file%2C%20the%20vue.js%20project%20will%20be%20built%20with%20the%20ASP.NET%20Core%20project.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CFONT%20size%3D%225%22%3EAdd%20port%20forwarding%20settings%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%3EFinal%20step!!%20Adding%20to%20launch%20development%20server%20and%20adding%20a%20setting%20port%20forwarding%2C%20when%20start%20debugging.%3C%2FP%3E%0A%3CP%3EI%20create%20a%20class%20for%20that.%3C%2FP%3E%0A%3CPRE%3Eusing%20Microsoft.AspNetCore.Builder%3B%0Ausing%20Microsoft.AspNetCore.SpaServices%3B%0Ausing%20Microsoft.Extensions.DependencyInjection%3B%0Ausing%20Microsoft.Extensions.Logging%3B%0Ausing%20System%3B%0Ausing%20System.Diagnostics%3B%0Ausing%20System.IO%3B%0Ausing%20System.Linq%3B%0Ausing%20System.Net.NetworkInformation%3B%0Ausing%20System.Runtime.InteropServices%3B%0Ausing%20System.Threading.Tasks%3B%0A%0Anamespace%20VueAndAspNetCoreSample%0A%7B%0A%20%20%20%20public%20static%20class%20VueHelper%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20default%20port%20number%20of%20'npm%20run%20serve'%0A%20%20%20%20%20%20%20%20private%20static%20int%20Port%20%7B%20get%3B%20%7D%20%3D%208080%3B%0A%20%20%20%20%20%20%20%20private%20static%20Uri%20DevelopmentServerEndpoint%20%7B%20get%3B%20%7D%20%3D%20new%20Uri(%24%22http%3A%2F%2Flocalhost%3A%7BPort%7D%22)%3B%0A%20%20%20%20%20%20%20%20private%20static%20TimeSpan%20Timeout%20%7B%20get%3B%20%7D%20%3D%20TimeSpan.FromSeconds(30)%3B%0A%20%20%20%20%20%20%20%20%2F%2F%20done%20message%20of%20'npm%20run%20serve'%20command.%0A%20%20%20%20%20%20%20%20private%20static%20string%20DoneMessage%20%7B%20get%3B%20%7D%20%3D%20%22DONE%20%20Compiled%20successfully%20in%22%3B%0A%0A%20%20%20%20%20%20%20%20public%20static%20void%20UseVueDevelopmentServer(this%20ISpaBuilder%20spa)%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20spa.UseProxyToSpaDevelopmentServer(async%20()%20%3D%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20loggerFactory%20%3D%20spa.ApplicationBuilder.ApplicationServices.GetService%26lt%3BILoggerFactory%26gt%3B()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20logger%20%3D%20loggerFactory.CreateLogger(%22Vue%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20if%20'npm%20run%20serve'%20command%20was%20executed%20yourself%2C%20then%20just%20return%20the%20endpoint.%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(IsRunning())%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20DevelopmentServerEndpoint%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20launch%20vue.js%20development%20server%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20isWindows%20%3D%20RuntimeInformation.IsOSPlatform(OSPlatform.Windows)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20processInfo%20%3D%20new%20ProcessStartInfo%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20FileName%20%3D%20isWindows%20%3F%20%22cmd%22%20%3A%20%22npm%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Arguments%20%3D%20%24%22%7B(isWindows%20%3F%20%22%2Fc%20npm%20%22%20%3A%20%22%22)%7Drun%20serve%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20WorkingDirectory%20%3D%20%22client-app%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20RedirectStandardError%20%3D%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20RedirectStandardInput%20%3D%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20RedirectStandardOutput%20%3D%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20UseShellExecute%20%3D%20false%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20process%20%3D%20Process.Start(processInfo)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20tcs%20%3D%20new%20TaskCompletionSource%26lt%3Bint%26gt%3B()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20_%20%3D%20Task.Run(()%20%3D%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20try%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20string%20line%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20while%20((line%20%3D%20process.StandardOutput.ReadLine())%20!%3D%20null)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20logger.LogInformation(line)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(!tcs.Task.IsCompleted%20%26amp%3B%26amp%3B%20line.Contains(DoneMessage))%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tcs.SetResult(1)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20catch%20(EndOfStreamException%20ex)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20logger.LogError(ex.ToString())%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tcs.SetException(new%20InvalidOperationException(%22'npm%20run%20serve'%20failed.%22%2C%20ex))%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20_%20%3D%20Task.Run(()%20%3D%26gt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20try%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20string%20line%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20while%20((line%20%3D%20process.StandardError.ReadLine())%20!%3D%20null)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20logger.LogError(line)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20catch%20(EndOfStreamException%20ex)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20logger.LogError(ex.ToString())%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tcs.SetException(new%20InvalidOperationException(%22'npm%20run%20serve'%20failed.%22%2C%20ex))%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20timeout%20%3D%20Task.Delay(Timeout)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(await%20Task.WhenAny(timeout%2C%20tcs.Task)%20%3D%3D%20timeout)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20throw%20new%20TimeoutException()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20DevelopmentServerEndpoint%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20private%20static%20bool%20IsRunning()%20%3D%26gt%3B%20IPGlobalProperties.GetIPGlobalProperties()%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.GetActiveTcpListeners()%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.Select(x%20%3D%26gt%3B%20x.Port)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.Contains(Port)%3B%0A%20%20%20%20%7D%0A%7D%0A%3C%2FPRE%3E%0A%3CP%3EAdd%20a%20few%20statements%20to%20Startup.cs%20to%20support%20SPA.%26nbsp%3B%3C%2FP%3E%0A%3CP%3EAdd%20calling%20'AddSpaStaticFiles'%20method%20at%20ConfigureServices%20method.%3C%2FP%3E%0A%3CPRE%3Epublic%20void%20ConfigureServices(IServiceCollection%20services)%0A%7B%0A%20%20%20%20services.AddControllers()%3B%0A%20%20%20%20services.AddSpaStaticFiles(options%20%3D%26gt%3B%20options.RootPath%20%3D%20%22client-app%2Fdist%22)%3B%0A%7D%0A%3C%2FPRE%3E%0A%3CP%3EAnd%20add%20calling%20UseSpaStaticFiles%20and%20UseSpa%20methods%20at%20Configure%20method.%3C%2FP%3E%0A%3CPRE%3E%2F%2F%20This%20method%20gets%20called%20by%20the%20runtime.%20Use%20this%20method%20to%20configure%20the%20HTTP%20request%20pipeline.%0Apublic%20void%20Configure(IApplicationBuilder%20app%2C%20IWebHostEnvironment%20env)%0A%7B%0A%20%20%20%20%2F%2F%20...snip...%0A%20%20%20%20app.UseEndpoints(endpoints%20%3D%26gt%3B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20endpoints.MapControllers()%3B%0A%20%20%20%20%7D)%3B%0A%0A%20%20%20%20%2F%2F%20add%20following%20statements%0A%20%20%20%20app.UseSpaStaticFiles()%3B%0A%20%20%20%20app.UseSpa(spa%20%3D%26gt%3B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20spa.Options.SourcePath%20%3D%20%22client-app%22%3B%0A%20%20%20%20%20%20%20%20if%20(env.IsDevelopment())%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Launch%20development%20server%20for%20Vue.js%0A%20%20%20%20%20%20%20%20%20%20%20%20spa.UseVueDevelopmentServer()%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%7D%0A%3C%2FPRE%3E%0A%3CP%3E%3CFONT%20size%3D%225%22%3ELet's%20launch%20the%20app%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%3EOpen%20Debug%20section%20of%20the%20project's%20property%20page%2C%20and%20edit%20%22Launch%20browser%22%20item%20to%20empty.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F119211i78F49927559AC826%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-18%20113849.jpg%22%20title%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-18%20113849.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EPress%20the%20'F5'%20key.%20You%20will%20look%20a%20default%20page%20of%20vue.js%20page.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20676px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F119212iE673A86F868B8848%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-18%20114130.jpg%22%20title%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-18%20114130.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EI%20edited%20HelloWorld.vue%20file%20to%20call%20a%20REST%20API%20that%20was%20created%20from%20the%20project%20template%2C%20like%20below%3A%3C%2FP%3E%0A%3CPRE%3E%26lt%3Btemplate%26gt%3B%0A%20%20%26lt%3Bdiv%26gt%3B%0A%20%20%20%20%26lt%3Bdiv%20v-bind%3Akey%3D%22r%22%20v-for%3D%22r%20in%20this.results%22%26gt%3B%7B%7B%20r%20%7D%7D%26lt%3B%2Fdiv%26gt%3B%0A%20%20%26lt%3B%2Fdiv%26gt%3B%0A%26lt%3B%2Ftemplate%26gt%3B%0A%0A%26lt%3Bscript%20lang%3D%22ts%22%26gt%3B%0Aimport%20%7B%20Component%2C%20Prop%2C%20Vue%20%7D%20from%20'vue-property-decorator'%3B%0A%0A%40Component%0Aexport%20default%20class%20HelloWorld%20extends%20Vue%20%7B%0A%20%20public%20results%3F%3A%20string%5B%5D%3B%0A%0A%20%20public%20async%20created()%20%7B%0A%20%20%20%20const%20r%20%3D%20await%20fetch('%2Fapi%2Fvalues')%3B%0A%20%20%20%20this.results%20%3D%20await%20r.json()%20as%20string%5B%5D%3B%0A%20%20%7D%0A%7D%0A%26lt%3B%2Fscript%26gt%3B%0A%3C%2FPRE%3E%0A%3CP%3EIt%20works%20fine.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20549px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F119216i44CA95697C924AE6%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-18%20122237.jpg%22%20title%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-18%20122237.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CFONT%20size%3D%225%22%3EWrapping%20up%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%3EI%20integrated%20a%20ASP.NET%20Core%20WEB%20project%20and%20a%20Vue.js%20project%20using%20SPA%20Extensions%20of%20ASP.NET%20Core.%3C%2FP%3E%0A%3CP%3EIt%20becomes%20to%20easy%20to%20develop%20SPA%20using%20Vue.js%20with%20ASP.NET%20Core.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThe%20code%20for%20this%20article%20is%20on%20GitHub%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Frunceel%2FVueJsAndAspNetCore%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Frunceel%2FVueJsAndAspNetCore%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-803789%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20integrate%20Vue.js%20and%20ASP.NET%20Core%20using%20SPA%20Extension%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-803789%22%20slang%3D%22en-US%22%3E%3CP%3EI%20thought%20this%20was%20great%20and%20was%20exactly%20what%20I%20was%20looking%20for%20(only%20I%20applied%20it%20to%20Preact).%20Thanks%20a%20lot!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-804438%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20integrate%20Vue.js%20and%20ASP.NET%20Core%20using%20SPA%20Extension%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-804438%22%20slang%3D%22en-US%22%3E%3CP%3EYou%20are%20welcome!!%3C%2FP%3E%3CP%3EI'm%20glad%20to%20help%20you.%20%3A)%3C%2Fimg%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-839504%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20integrate%20Vue.js%20and%20ASP.NET%20Core%20using%20SPA%20Extension%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-839504%22%20slang%3D%22en-US%22%3EHi%2C%20awesome%20post.%20This%20was%20the%20push%20in%20the%20right%20direction%20what%20I%20needed.%20Do%20you%20have%20any%20plans%20to%20publish%20this%20as%20a%20nuget%20package%3F%20I%20have%20some%20ideas%20for%20things%20to%20add.%20If%20it%20is%20OK%20I%20will%20start%20working%20on%20it.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-839954%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20integrate%20Vue.js%20and%20ASP.NET%20Core%20using%20SPA%20Extension%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-839954%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F404217%22%20target%3D%22_blank%22%3E%40kirkone%3C%2FA%3E%26nbsp%3B%2C%3C%2FP%3E%0A%3CP%3EThank%20you%20for%20your%20comment.%3C%2FP%3E%0A%3CP%3EI%20don't%20have%20any%20plans.%20Please%20feel%20free%20start%20your%20work!%3C%2FP%3E%0A%3CP%3EI'm%20looking%20forward%20to%20see%20the%20your%20product!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1081095%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20integrate%20Vue.js%20and%20ASP.NET%20Core%20using%20SPA%20Extension%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1081095%22%20slang%3D%22en-US%22%3E%3CP%3EHello%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F256479%22%20target%3D%22_blank%22%3E%40KazukiOta%3C%2FA%3E%2C%20when%20I%20publish%20through%20VS%20I%20get%20this%20error%20on%20npm%20build%3A%3C%2FP%3E%3CP%3EError%3A%20No%20module%20factory%20available%20for%20dependency%20type%3A%20CssDependency%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBut%20it%20works%20fine%20when%20running%20separately%20from%20the%20command%20line.%3C%2FP%3E%3CP%3EI%20looked%20into%20it%20and%20it%20seems%20to%20be%20an%20issue%20with%20webpack.%20Do%20you%20have%20any%20idea%20why%20it%20fails%20with%20publish%20command%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1211552%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20integrate%20Vue.js%20and%20ASP.NET%20Core%20using%20SPA%20Extension%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1211552%22%20slang%3D%22en-US%22%3E%3CP%3EWhy%20is%20Chrome%20giving%20me%20a%20431%20error%20message%3F%26nbsp%3B%20It%20runs%20in%20IE%2C%20Edge%2C%20Firefox%20fine.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1269666%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20integrate%20Vue.js%20and%20ASP.NET%20Core%20using%20SPA%20Extension%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1269666%22%20slang%3D%22en-US%22%3E%3CP%3EHi.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHow%20should%20I%20deploy%20the%20application%20to%20IIS%3F%26nbsp%3B%20If%20I%20publish%20the%20application%20from%20Visual%20Studio%2C%20and%20then%20run%20the%20app%20via%26nbsp%3B%3CA%20href%3D%22http%3A%2F%2Flocalhost%2FVueNETCore%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttp%3A%2F%2Flocalhost%2FVueNETCore%3C%2FA%3E%2C%20I%20get%20this%20exception%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22vuenetcore.JPG%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F181106i2CA524E0C8570878%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22vuenetcore.JPG%22%20alt%3D%22vuenetcore.JPG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CH5%20id%3D%22toc-hId-1178114023%22%20id%3D%22toc-hId-1178114023%22%20id%3D%22toc-hId-1178114023%22%20id%3D%22toc-hId-1178114023%22%20id%3D%22toc-hId-1178114023%22%20id%3D%22toc-hId-1178114023%22%20id%3D%22toc-hId-1178114023%22%20id%3D%22toc-hId-1178114023%22%20id%3D%22toc-hId-1178114023%22%20id%3D%22toc-hId-1178114023%22%20id%3D%22toc-hId-1178114023%22%20id%3D%22toc-hId-1178114023%22%20id%3D%22toc-hId-1178114023%22%20id%3D%22toc-hId-1178114023%22%20id%3D%22toc-hId-1178114023%22%20id%3D%22toc-hId-1178114023%22%20id%3D%22toc-hId-1178114023%22%20id%3D%22toc-hId-1178114023%22%20id%3D%22toc-hId-1178114023%22%20id%3D%22toc-hId-1178114023%22%20id%3D%22toc-hId-1178114023%22%3E%26nbsp%3B%3C%2FH5%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1269705%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20integrate%20Vue.js%20and%20ASP.NET%20Core%20using%20SPA%20Extension%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1269705%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F603575%22%20target%3D%22_blank%22%3E%40ccalvarez%3C%2FA%3E%26nbsp%3BYou%20probably%20don't%20want%20to%20run%20that%20middleware%20once%20you've%20deployed%20to%20IIS.%20It's%20more%20of%20a%20development%20tool.%20For%20non-development%20environments%2C%20you'll%20want%20to%20publish%20the%20app%20and%20service%20it%20statically.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1271860%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20integrate%20Vue.js%20and%20ASP.NET%20Core%20using%20SPA%20Extension%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1271860%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F391950%22%20target%3D%22_blank%22%3E%40crodeheaver%3C%2FA%3E%26nbsp%3BThank%20you%2C%20I%20understand.%26nbsp%3B%20I%20liked%20the%20idea%20of%20having%20the%20REST%20API%20and%20the%20Vue%20frontend%20served%20from%20the%20same%20virtual%20directory%2C%20which%20this%20configuration%20allowed%20in%20this%20Vue%20development%20server%2C%20because%20this%20allows%20my%20frontend%20to%20send%20requests%20to%20the%20API%20in%20this%20form%3A%26nbsp%3B%3C%2FP%3E%3CPRE%3Efetch('%2Fapi%2Fvalues')%3C%2FPRE%3E%3CP%3E(Usually%20I%20have%20been%20publishing%20the%20REST%20API%20in%20one%20IIS%20virtual%20directory%2C%20and%20the%20Vue%20frontend%20in%20another%20IIS%20virtual%20directory).%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%20I%20will%20try%20to%20publish%20the%20REST%20API%20and%20the%20Vue%20static%20files%20in%20the%20same%20IIS%20virtual%20directory%20and%20see%20if%20it%20works.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThank%20you!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1272197%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20integrate%20Vue.js%20and%20ASP.NET%20Core%20using%20SPA%20Extension%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1272197%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F603575%22%20target%3D%22_blank%22%3E%40ccalvarez%3C%2FA%3E%26nbsp%3BSo%20you%20can%20definitely%20still%20accomplish%20this.%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CPRE%3Eservices.AddSpaStaticFiles(options%20%3D%26gt%3B%20options.RootPath%20%3D%20%22client-app%2Fdist%22)%3B%3C%2FPRE%3E%3CP%3EThis%20tells%20the%20service%20to%20serve%20the%20compiled%20application%20from%20the%20client-app%2Fdist%20folder.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhen%20you%20run%20locally%20in%20dev%2C%20you%20have%20a%20reverse%20proxy%20from%20your%20service%20to%20the%20hot-reloaded%20server%20that%20npm%20spins%20up%20(which%20is%20great%20for%20development%2C%20but%20inefficient%20for%20a%20deployed%20service).%3CBR%20%2F%3E%3CBR%20%2F%3EYou'll%20want%20to%20publish%20your%20Vue%20project%20to%20the%20client-app%2Fdist%20(or%20whatever%20folder%20you%20prefer).%20That%20will%20compile%20your%20project%2C%20do%20minification%20and%20all%20that%20good%20stuff%2C%20and%20then%20your%20server%20will%20serve%20those%20files%20directly%20instead%20of%20through%20the%20reverse%20proxy.%20If%20you%20look%20at%20the%20csproj%20file%20above%2C%20it%20should%20already%20be%20doing%20that%20step%20for%20you.%20Just%20make%20sure%20that%20you%20do%20an%20actual%20publish%20and%20then%20wrap%20your%20middleware%20in%20a%20environment%20check%20like%20he%20has%20above%3A%3C%2FP%3E%3CPRE%3Eif%20(env.IsDevelopment())%0A%7B%0A%20%20%20%20%20%2F%2F%20Launch%20development%20server%20for%20Vue.js%0A%20%20%20%20%20spa.UseVueDevelopmentServer()%3B%0A%7D%3C%2FPRE%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1272569%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20integrate%20Vue.js%20and%20ASP.NET%20Core%20using%20SPA%20Extension%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1272569%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F391950%22%20target%3D%22_blank%22%3E%40crodeheaver%3C%2FA%3E%26nbsp%3Bthanks!%26nbsp%3B%20I've%20published%20the%20app%20on%20IIS%2C%20now%20I%20have%20this%20little%20problem%2C%20maybe%20you%20could%20give%20me%20a%20clue%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3E%3CEM%3Eindex.html%3C%2FEM%3E%3C%2FSTRONG%3E%20can't%20find%20the%20resources%20(.js%2C%20.css)%20because%20the%20routes%20are%20resolved%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3Ehttp%3A%2F%2Flocalhost%2Fjs%2F*.js%3C%2FPRE%3E%3CP%3Einstead%20of%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3Ehttp%3A%2F%2Flocalhost%2F%3CSTRONG%3EVueNETCore%3C%2FSTRONG%3E%2Fjs%2F*.js%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22iis%20404.png%22%20style%3D%22width%3A%20583px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F181337i5D042EEEFEF69E27%2Fimage-dimensions%2F583x431%3Fv%3D1.0%22%20width%3D%22583%22%20height%3D%22431%22%20title%3D%22iis%20404.png%22%20alt%3D%22iis%20404.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3EIn%20%3CSTRONG%3E%3CEM%3Eindex.html%3C%2FEM%3E%3C%2FSTRONG%3E%20the%20routes%20to%20the%20assets%20are%20in%20this%20format%3A%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22sin%20chanchito.png%22%20style%3D%22width%3A%20479px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F181354iB1E62154E5043242%2Fimage-dimensions%2F479x82%3Fv%3D1.0%22%20width%3D%22479%22%20height%3D%2282%22%20title%3D%22sin%20chanchito.png%22%20alt%3D%22sin%20chanchito.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3EI've%20tried%20adding%20in%20%3CEM%3E%3CSTRONG%3Eindex.html%3C%2FSTRONG%3E%3C%2FEM%3E%20the%20relative%20path%20to%20the%20route%20with%20%22~%22%20%3A%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22con%20chanchito1.png%22%20style%3D%22width%3A%20502px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F181353iCB69C5539A55D252%2Fimage-dimensions%2F502x84%3Fv%3D1.0%22%20width%3D%22502%22%20height%3D%2284%22%20title%3D%22con%20chanchito1.png%22%20alt%3D%22con%20chanchito1.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3EBut%20it%20is%20resolved%20like%20this%3A%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22con%20chanchito.png%22%20style%3D%22width%3A%20445px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F181352iC543F528E1DA0E4B%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22con%20chanchito.png%22%20alt%3D%22con%20chanchito.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3EThank%20you!%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3EUpdate%3A%26nbsp%3B%20I've%20cloned%20this%20repo%26nbsp%3B%3CA%20title%3D%22https%3A%2F%2Fgithub.com%2FSoftwareAteliers%2Fasp-net-core-vue-starter%22%20href%3D%22https%3A%2F%2Fgithub.com%2FSoftwareAteliers%2Fasp-net-core-vue-starter%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSoftwareAteliers%2Fasp-net-core-vue-starter%3C%2FA%3E%26nbsp%3B%2C%20published%20to%20localhost%20IIS%2C%20and%20I%20get%20the%20same%20error%3A%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22starter_localhost.png%22%20style%3D%22width%3A%20687px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F181376iC16208DAF19B7951%2Fimage-dimensions%2F687x330%3Fv%3D1.0%22%20width%3D%22687%22%20height%3D%22330%22%20title%3D%22starter_localhost.png%22%20alt%3D%22starter_localhost.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3ECuriously%2C%20deploying%20to%20Azure%20works%20fine%3A%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22starter_azure.png%22%20style%3D%22width%3A%20697px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F181378i4F785D7DE3610DDE%2Fimage-dimensions%2F697x300%3Fv%3D1.0%22%20width%3D%22697%22%20height%3D%22300%22%20title%3D%22starter_azure.png%22%20alt%3D%22starter_azure.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3Eor%26nbsp%3B%3CA%20title%3D%22https%3A%2F%2Fvuenetcore20200401152551.azurewebsites.net%22%20href%3D%22https%3A%2F%2Fvuenetcore20200401152551.azurewebsites.net%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fvuenetcore20200401152551.azurewebsites.net%3C%2FA%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1387395%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20integrate%20Vue.js%20and%20ASP.NET%20Core%20using%20SPA%20Extension%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1387395%22%20slang%3D%22en-US%22%3E%3CP%3EHey%20there!%3C%2FP%3E%3CP%3EAfter%20some%20step-backs%20I%20could%20manage%20to%20make%20this%20work%2C%20but%20not%20untill%20I%20found%20your%20solution%20and%20it%20was%20awesome!%3C%2FP%3E%3CP%3EBut%20now%2C%20i'm%20doing%20the%20%22next%20step%22%20and%20trying%20to%20deploy%20to%20an%20azure%20app%20service%20to%20see%20how%20is%20it%20going%20(and%20also%20planing%20in%20doing%20the%20ssl%20cert%20and%20all...)%3C%2FP%3E%3CP%3Ebut%2C%20even%20though%20it%20runs%20as%20a%20charm%20in%20dev%20(localhost)%20when%20I%20publish%20and%20try%20to%20see%20it%20running%20%22live%22%20it%20just%20throws%20me%20back%20a%20500%20error%2C%20which%20doesn't%20make%20any%20sense%20(I'm%20using%20same%20connectionString%20for%20both%20dev%20and%20prod%20(right%20now%20is%20the%20same%20db))%2C%20so%20I%20would%20say%20that%20that%20is%20off%20the%20grid...%3C%2FP%3E%3CP%3ESo%20I%20came%20here%20once%20again%2C%20wondering%20if%20you%20have%20face%20something%20similar%20to%20this%20issue%3F%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1401587%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20integrate%20Vue.js%20and%20ASP.NET%20Core%20using%20SPA%20Extension%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1401587%22%20slang%3D%22en-US%22%3E%3CP%3EI%20have%20tried%20the%20steps%20that%20are%20explained%20in%20this%20article%20on%20.NET%20Core%203.1%20with%20vue%2Fcli%204.3.1.%3C%2FP%3E%0A%3CP%3EIt%20worked%20fine.%20And%20I%20was%20able%20to%20deploy%20the%20app%20to%20Azure%20Web%20Apps.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22KazukiOta_0-1589876966291.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F192952iBE5CEAB302073C02%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22KazukiOta_0-1589876966291.png%22%20alt%3D%22KazukiOta_0-1589876966291.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EYou%20can%20see%20complete%20code%20on%20the%20following%20github%20repository%3A%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Frunceel%2FVueJsAndAspNetCore%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Frunceel%2FVueJsAndAspNetCore%3C%2FA%3E%3C%2FP%3E%0A%3CP%3EThere%20is%20a%20web%20API%2C%20and%20it%20is%20calling%20the%20API%20from%20vue.js%20app.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ETo%20deploy%20it%20to%20Azure%20Web%20App%2C%20and%20do%20the%20following%20steps%3A%3C%2FP%3E%0A%3CP%3E-%20dotnet%20publish%20-c%20Release%3C%2FP%3E%0A%3CP%3E-%20deploy%20bin%2FRelease%2Fnetcoreapp3.1%2Fpublish%20folder%20to%20Azure%20Web%20app.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1428154%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20integrate%20Vue.js%20and%20ASP.NET%20Core%20using%20SPA%20Extension%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1428154%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%20for%20writing%20this%20article!%26nbsp%3B%20When%20I%20run%20the%20app%20the%20first%20time%20it%20works%20great!%26nbsp%3B%20I'm%20noticing%20an%20issue%20after%20you%20change%20a%20vue%20file%20and%20restart%20the%20app%20via.%26nbsp%3B%20I'm%20getting%20this%20screen...%26nbsp%3B%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Scooby0344_0-1590805816380.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F195484i590DEF0AE20860D0%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22Scooby0344_0-1590805816380.png%22%20alt%3D%22Scooby0344_0-1590805816380.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20I%20close%20the%20window%20(stopping%20iisexpress).%26nbsp%3B%20Then%20start%20the%20app%20again%20via%20the%20%22IIS%20Express%22%20button%2C%20the%20app%20loads%20fine%20and%20I%20DON'T%20get%20the%20error.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20also%20noticed%20that%20my%20PID%20was%20different%20every%20time%20I%20change%20the%20vue%20file.%26nbsp%3B%20When%20I%20don't%20change%20the%20vue%20app%20and%20run%20multiple%20times%20I%20don't%20get%20a%20new%20PID%20and%20the%20app%20works%20fine.%26nbsp%3B%20Could%20that%20be%20an%20issue%3F%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Scooby0344_1-1590806037712.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F195485iC54D664D55182153%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22Scooby0344_1-1590806037712.png%22%20alt%3D%22Scooby0344_1-1590806037712.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESTEPS%20TO%20REPRODUCE%3C%2FP%3E%3COL%3E%3CLI%3EKill%20all%20PIDS%20associated%20with%20port%208080%20so%20your%20at%20a%20fresh%20start.%3C%2FLI%3E%3CLI%3ERun%20the%20app%20via%20%22IIS%20Express%22%20play%20button.%26nbsp%3B%20Note%3A%20looks%20good!%3C%2FLI%3E%3CLI%3EStop%20the%20app.%3C%2FLI%3E%3CLI%3EChange%20some%20text%20or%20something%20in%20a%20vue%20file.%3C%2FLI%3E%3CLI%3ERun%20the%20app%20via%20%22IIS%20Express%22%20play%20button.%26nbsp%3B%20Note%20the%20error.%3C%2FLI%3E%3CLI%3EStop%20the%20app.%3C%2FLI%3E%3CLI%3EStart%20the%20app.%20Note%3A%26nbsp%3B%20It%20looks%20good%20and%20reflects%20the%20change%20made%20in%20step%204.%26nbsp%3B%26nbsp%3B%3C%2FLI%3E%3C%2FOL%3E%3CP%3EOne%20thing%20to%20note%20is%20i'm%20using%20.net%20core%203.1%20instead%20of%203.0%20but%20that%20shouldn't%20be%20a%20problem%20I%20wouldn't%20think.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1432718%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20integrate%20Vue.js%20and%20ASP.NET%20Core%20using%20SPA%20Extension%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1432718%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F684044%22%20target%3D%22_blank%22%3E%40Scooby0344%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThank%20you%20for%20the%20reporting.%3C%2FP%3E%0A%3CP%3EI%20have%20tried%20your%20steps%2C%20however%20I%20was%20not%20able%20to%20reproduce%20it.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ECould%20you%20try%20the%20steps%20using%20the%20following%20code%3F%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Frunceel%2FVueJsAndAspNetCore%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Frunceel%2FVueJsAndAspNetCore%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1506214%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20integrate%20Vue.js%20and%20ASP.NET%20Core%20using%20SPA%20Extension%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1506214%22%20slang%3D%22en-US%22%3E%3CP%3EI%20don't%20manage%20to%20get%20the%20hot-reloading%20to%20work.%20it%20works%20if%20I%20access%20the%20server%20via%20port%208080%20but%20not%20through%20my%20.NET%20server.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAny%20Ideas%3F%20Because%20I%20guess%20if%20I%20were%20to%20use%20the%20server%20on%208080%20all%20my%20api%20calls%20wouldn't%20get%20through.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Microsoft
Spoiler
I'm using .NET Core 3.0 preview 6 and Visual Studio 2019 16.2.0 Preview 2.0.
However, I think almost all things are available in .NET Core 2.x.

Single Page Application(SPA) is really important technology for web apps developers.

In ASP.NET Core, there is SPA integration feature.

You can see it on create a new project wizard of ASP.NET Core Web application.

コメント 2019-06-18 095839.jpg

Three items at bottom are "Angular", "React.js" and "React.js and Redux."

Those are project template that can develop WebAPIs(using ASP.NET Core) and SPA(using selected framework) in one project, like below:

コメント 2019-06-18 100051.jpg

You can find a "ClientApp" folder in the Solution Explorer.

It is for SPA app. You can develop using Visual Studio, of cause also use your favorite editors like Visual Studio Code.

 

If you want debug the app, you can just do "Start Debugging."

Visual Studio will launch development server for SPA and development server for ASP.NET Core, and then add forwarding request settings from ASP.NET Core development server to SPA development server.

And also, "npm install" and other commands are executed automatically.

 

It looks perfect! But, I thought where is Vue.js? I like it.

So, I try to use the feature for Vue.js.

 

Create a ASP.NET Core Web Application project

Let's create a ASP.NET Core Web Application project using API template.

コメント 2019-06-18 101241.jpg

And go to the project folder, and then type following command to create Vue.js project using vue-cli.

vue create client-app

I selected TypeScript for development language. Because I like it. ;)

If you didn't install vue-cli, please check following document:

https://cli.vuejs.org/guide/installation.html

 

Edit the project file to build integration

Let's edit the project file like below:

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp3.0</TargetFramework>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
    <IsPackable>false</IsPackable>
    <SpaRoot>client-app\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="3.0.0-preview6.19307.2" />
  </ItemGroup>

  <ItemGroup>
    <!-- Don't publish the SPA source files, but do show them in the project files list -->
    <Content Remove="$(SpaRoot)**" />
    <None Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
  </ItemGroup>

  <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
    <!-- Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  </Target>

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

</Project>

After editing the file, the vue.js project will be built with the ASP.NET Core project.

 

Add port forwarding settings

Final step!! Adding to launch development server and adding a setting port forwarding, when start debugging.

I create a class for that.

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.SpaServices;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using System;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Net.NetworkInformation;
using System.Runtime.InteropServices;
using System.Threading.Tasks;

namespace VueAndAspNetCoreSample
{
    public static class VueHelper
    {
        // default port number of 'npm run serve'
        private static int Port { get; } = 8080;
        private static Uri DevelopmentServerEndpoint { get; } = new Uri($"http://localhost:{Port}");
        private static TimeSpan Timeout { get; } = TimeSpan.FromSeconds(30);
        // done message of 'npm run serve' command.
        private static string DoneMessage { get; } = "DONE  Compiled successfully in";

        public static void UseVueDevelopmentServer(this ISpaBuilder spa)
        {
            spa.UseProxyToSpaDevelopmentServer(async () =>
            {
                var loggerFactory = spa.ApplicationBuilder.ApplicationServices.GetService<ILoggerFactory>();
                var logger = loggerFactory.CreateLogger("Vue");
                // if 'npm run serve' command was executed yourself, then just return the endpoint.
                if (IsRunning())
                {
                    return DevelopmentServerEndpoint;
                }

                // launch vue.js development server
                var isWindows = RuntimeInformation.IsOSPlatform(OSPlatform.Windows);
                var processInfo = new ProcessStartInfo
                {
                    FileName = isWindows ? "cmd" : "npm",
                    Arguments = $"{(isWindows ? "/c npm " : "")}run serve",
                    WorkingDirectory = "client-app",
                    RedirectStandardError = true,
                    RedirectStandardInput = true,
                    RedirectStandardOutput = true,
                    UseShellExecute = false,
                };
                var process = Process.Start(processInfo);
                var tcs = new TaskCompletionSource<int>();
                _ = Task.Run(() =>
                {
                    try
                    {
                        string line;
                        while ((line = process.StandardOutput.ReadLine()) != null)
                        {
                            logger.LogInformation(line);
                            if (!tcs.Task.IsCompleted && line.Contains(DoneMessage))
                            {
                                tcs.SetResult(1);
                            }
                        }
                    }
                    catch (EndOfStreamException ex)
                    {
                        logger.LogError(ex.ToString());
                        tcs.SetException(new InvalidOperationException("'npm run serve' failed.", ex));
                    }
                });
                _ = Task.Run(() =>
                {
                    try
                    {
                        string line;
                        while ((line = process.StandardError.ReadLine()) != null)
                        {
                            logger.LogError(line);
                        }
                    }
                    catch (EndOfStreamException ex)
                    {
                        logger.LogError(ex.ToString());
                        tcs.SetException(new InvalidOperationException("'npm run serve' failed.", ex));
                    }
                });

                var timeout = Task.Delay(Timeout);
                if (await Task.WhenAny(timeout, tcs.Task) == timeout)
                {
                    throw new TimeoutException();
                }

                return DevelopmentServerEndpoint;
            });

        }

        private static bool IsRunning() => IPGlobalProperties.GetIPGlobalProperties()
                .GetActiveTcpListeners()
                .Select(x => x.Port)
                .Contains(Port);
    }
}

Add a few statements to Startup.cs to support SPA. 

Add calling 'AddSpaStaticFiles' method at ConfigureServices method.

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers();
    services.AddSpaStaticFiles(options => options.RootPath = "client-app/dist");
}

And add calling UseSpaStaticFiles and UseSpa methods at Configure method.

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ...snip...
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });

    // add following statements
    app.UseSpaStaticFiles();
    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "client-app";
        if (env.IsDevelopment())
        {
            // Launch development server for Vue.js
            spa.UseVueDevelopmentServer();
        }
    });
}

Let's launch the app

Open Debug section of the project's property page, and edit "Launch browser" item to empty.

コメント 2019-06-18 113849.jpg

Press the 'F5' key. You will look a default page of vue.js page.

コメント 2019-06-18 114130.jpg

I edited HelloWorld.vue file to call a REST API that was created from the project template, like below:

<template>
  <div>
    <div v-bind:key="r" v-for="r in this.results">{{ r }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  public results?: string[];

  public async created() {
    const r = await fetch('/api/values');
    this.results = await r.json() as string[];
  }
}
</script>

It works fine.

コメント 2019-06-18 122237.jpg

Wrapping up

I integrated a ASP.NET Core WEB project and a Vue.js project using SPA Extensions of ASP.NET Core.

It becomes to easy to develop SPA using Vue.js with ASP.NET Core.

 

The code for this article is on GitHub: https://github.com/runceel/VueJsAndAspNetCore

17 Comments
Occasional Visitor

I thought this was great and was exactly what I was looking for (only I applied it to Preact). Thanks a lot!

Regular Visitor

You are welcome!!

I'm glad to help you. :)

Occasional Visitor
Hi, awesome post. This was the push in the right direction what I needed. Do you have any plans to publish this as a nuget package? I have some ideas for things to add. If it is OK I will start working on it.
Microsoft

Hi @kirkone ,

Thank you for your comment.

I don't have any plans. Please feel free start your work!

I'm looking forward to see the your product!

Occasional Visitor

Hello @KazukiOta, when I publish through VS I get this error on npm build:

Error: No module factory available for dependency type: CssDependency

 

But it works fine when running separately from the command line.

I looked into it and it seems to be an issue with webpack. Do you have any idea why it fails with publish command?

Occasional Visitor

Why is Chrome giving me a 431 error message?  It runs in IE, Edge, Firefox fine.

Visitor

Hi.

 

How should I deploy the application to IIS?  If I publish the application from Visual Studio, and then run the app via http://localhost/VueNETCore, I get this exception:

 

vuenetcore.JPG

 
Occasional Visitor

@ccalvarez You probably don't want to run that middleware once you've deployed to IIS. It's more of a development tool. For non-development environments, you'll want to publish the app and service it statically.

Visitor

@crodeheaver Thank you, I understand.  I liked the idea of having the REST API and the Vue frontend served from the same virtual directory, which this configuration allowed in this Vue development server, because this allows my frontend to send requests to the API in this form: 

fetch('/api/values')

(Usually I have been publishing the REST API in one IIS virtual directory, and the Vue frontend in another IIS virtual directory).

 

  I will try to publish the REST API and the Vue static files in the same IIS virtual directory and see if it works.

 

Thank you!

 

 

Occasional Visitor

@ccalvarez So you can definitely still accomplish this.

services.AddSpaStaticFiles(options => options.RootPath = "client-app/dist");

This tells the service to serve the compiled application from the client-app/dist folder.

 

When you run locally in dev, you have a reverse proxy from your service to the hot-reloaded server that npm spins up (which is great for development, but inefficient for a deployed service).

You'll want to publish your Vue project to the client-app/dist (or whatever folder you prefer). That will compile your project, do minification and all that good stuff, and then your server will serve those files directly instead of through the reverse proxy. If you look at the csproj file above, it should already be doing that step for you. Just make sure that you do an actual publish and then wrap your middleware in a environment check like he has above:

if (env.IsDevelopment())
{
     // Launch development server for Vue.js
     spa.UseVueDevelopmentServer();
}
Visitor

@crodeheaver thanks!  I've published the app on IIS, now I have this little problem, maybe you could give me a clue:

 

index.html can't find the resources (.js, .css) because the routes are resolved:

 

http://localhost/js/*.js

instead of

 

http://localhost/VueNETCore/js/*.js

 

iis 404.png

 
 
In index.html the routes to the assets are in this format:
 
sin chanchito.png
 
 
I've tried adding in index.html the relative path to the route with "~" :
 
con chanchito1.png
 
But it is resolved like this:
 
con chanchito.png
 
Thank you!
 
Update:  I've cloned this repo https://github.com/SoftwareAteliers/asp-net-core-vue-starter , published to localhost IIS, and I get the same error:
 
starter_localhost.png
 
Curiously, deploying to Azure works fine:
 
starter_azure.png
 
 
Occasional Visitor

Hey there!

After some step-backs I could manage to make this work, but not untill I found your solution and it was awesome!

But now, i'm doing the "next step" and trying to deploy to an azure app service to see how is it going (and also planing in doing the ssl cert and all...)

but, even though it runs as a charm in dev (localhost) when I publish and try to see it running "live" it just throws me back a 500 error, which doesn't make any sense (I'm using same connectionString for both dev and prod (right now is the same db)), so I would say that that is off the grid...

So I came here once again, wondering if you have face something similar to this issue? 

Microsoft

I have tried the steps that are explained in this article on .NET Core 3.1 with vue/cli 4.3.1.

It worked fine. And I was able to deploy the app to Azure Web Apps.

KazukiOta_0-1589876966291.png

 

You can see complete code on the following github repository:

https://github.com/runceel/VueJsAndAspNetCore

There is a web API, and it is calling the API from vue.js app.

 

To deploy it to Azure Web App, and do the following steps:

- dotnet publish -c Release

- deploy bin/Release/netcoreapp3.1/publish folder to Azure Web app.

Occasional Visitor

Thanks for writing this article!  When I run the app the first time it works great!  I'm noticing an issue after you change a vue file and restart the app via.  I'm getting this screen...  

Scooby0344_0-1590805816380.png

 

If I close the window (stopping iisexpress).  Then start the app again via the "IIS Express" button, the app loads fine and I DON'T get the error.

 

I also noticed that my PID was different every time I change the vue file.  When I don't change the vue app and run multiple times I don't get a new PID and the app works fine.  Could that be an issue?

Scooby0344_1-1590806037712.png

 

 

STEPS TO REPRODUCE

  1. Kill all PIDS associated with port 8080 so your at a fresh start.
  2. Run the app via "IIS Express" play button.  Note: looks good!
  3. Stop the app.
  4. Change some text or something in a vue file.
  5. Run the app via "IIS Express" play button.  Note the error.
  6. Stop the app.
  7. Start the app. Note:  It looks good and reflects the change made in step 4.  

One thing to note is i'm using .net core 3.1 instead of 3.0 but that shouldn't be a problem I wouldn't think.

Microsoft

@Scooby0344 

Thank you for the reporting.

I have tried your steps, however I was not able to reproduce it.

 

Could you try the steps using the following code?

https://github.com/runceel/VueJsAndAspNetCore

Occasional Visitor

I don't manage to get the hot-reloading to work. it works if I access the server via port 8080 but not through my .NET server.

 

Any Ideas? Because I guess if I were to use the server on 8080 all my api calls wouldn't get through.

Microsoft

@jacasch 
If you would like to use the hot-reloading feature, then devServer.proxy settings might work.

https://cli.vuejs.org/config/#devserver-proxy

1. Add a devServer.proxy setting for ASP.NET Core dev server to vue.config.js.
2. Launch ASP.NET Core WebAPI app
3. Launch Vue.js dev server(8080 port)
4. Access to localhost:8080.(Hot-reloading might work.)

When deploy app to production env, you can use dotnet publish command(or Visual Studio publish wizard) as writing in this article.