How to integrate Vue.js and ASP.NET Core using SPA Extension

Published Jun 17 2019 08:30 PM 51.9K Views
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

27 Comments
%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%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%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%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%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%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%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%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%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%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%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%3CLINGO-SUB%20id%3D%22lingo-sub-1507496%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-1507496%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F721102%22%20target%3D%22_blank%22%3E%40jacasch%3C%2FA%3E%26nbsp%3B%3CBR%20%2F%3EIf%20you%20would%20like%20to%20use%20the%20hot-reloading%20feature%2C%20then%20devServer.proxy%20settings%20might%20work.%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fcli.vuejs.org%2Fconfig%2F%23devserver-proxy%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcli.vuejs.org%2Fconfig%2F%23devserver-proxy%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E1.%20Add%20a%20devServer.proxy%20setting%20for%20ASP.NET%20Core%20dev%20server%20to%20vue.config.js.%3CBR%20%2F%3E2.%20Launch%20ASP.NET%20Core%20WebAPI%20app%3CBR%20%2F%3E3.%20Launch%20Vue.js%20dev%20server(8080%20port)%3CBR%20%2F%3E4.%20Access%20to%20localhost%3A8080.(Hot-reloading%20might%20work.)%3C%2FP%3E%0A%3CP%3EWhen%20deploy%20app%20to%20production%20env%2C%20you%20can%20use%20dotnet%20publish%20command(or%20Visual%20Studio%20publish%20wizard)%20as%20writing%20in%20this%20article.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1654167%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-1654167%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%20for%20posting%20this%20article!%20Is%20it%20possible%20to%20host%20multiple%20Vue%20apps%20on%20a%20single%20core%20project%3F%26nbsp%3B%20The%20closest%20solution%20I've%20found%20is%20here%20(%3CA%20href%3D%22https%3A%2F%2Fstackoverflow.com%2Fquestions%2F62723319%2Fhow-to-handle-multiple-vuejs-spas-application-in-asp-net-core-3)%2C%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehttps%3A%2F%2Fstackoverflow.com%2Fquestions%2F62723319%2Fhow-to-handle-multiple-vuejs-spas-application-in-asp-net-core-3)%2C%3C%2FA%3E%26nbsp%3Bbut%20I'm%20running%20into%20a%20similar%20issue%20the%20OP%20is%20having.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20a%20project%20folder%20structure%20like%20this%3A%3C%2FP%3E%3CUL%3E%3CLI%3EASP.NET%20Core%20Project%3CUL%3E%3CLI%3EProperties%3C%2FLI%3E%3CLI%3EContollers%26nbsp%3B%3C%2FLI%3E%3CLI%3EVue%3CUL%3E%3CLI%3E%3CSTRONG%3Epublic-app%3C%2FSTRONG%3E%3CUL%3E%3CLI%3Enode_modules%3C%2FLI%3E%3CLI%3Epublic%3C%2FLI%3E%3CLI%3Eetc...%3C%2FLI%3E%3C%2FUL%3E%3C%2FLI%3E%3CLI%3E%3CSTRONG%3Eprivate-app%3C%2FSTRONG%3E%3CUL%3E%3CLI%3Enode_modules%3C%2FLI%3E%3CLI%3Epublic%3C%2FLI%3E%3CLI%3Eetc...%3C%2FLI%3E%3C%2FUL%3E%3C%2FLI%3E%3C%2FUL%3E%3C%2FLI%3E%3CLI%3EStartup.cs%3C%2FLI%3E%3CLI%3EVueHelper.cs%3C%2FLI%3E%3CLI%3EEtc...%3C%2FLI%3E%3C%2FUL%3E%3C%2FLI%3E%3C%2FUL%3E%3CP%3EVueHelper.cs%20has%20been%20modified%20to%20send%20different%20working%20folder%20and%20port.%3C%2FP%3E%3CPRE%3Epublic%20static%20void%20UseVueDevelopmentServer(this%20ISpaBuilder%20spa%2C%20string%20sourcePath%2C%20int%20port)%0A%7B%0A%20%20%20%20spa.UseProxyToSpaDevelopmentServer(async%20()%20%3D%26gt%3B%0A%20%20%20%20%7B%0A%20%20%20%20%20...%0A%20%20%20%20%20%20%20%20Port%20%3D%20port%3B%0A%20%20%20%20%20%20%20%20DevelopmentServerEndpoint%20%3D%20%20new%20Uri(%24%22http%3A%2F%2Flocalhost%3A%7BPort%7D%22)%3B%0A%0A%20%20%20%20%20%20%20%20var%20isWindows%20%3D%20RuntimeInformation.IsOSPlatform(OSPlatform.Windows)%3B%0A%20%20%20%20%20%20%20%20var%20processInfo%20%3D%20new%20ProcessStartInfo%0A%20%20%20%20%20%20%20%20%7B%0A%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%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%20WorkingDirectory%20%3D%20sourcePath%2C%0A%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%20RedirectStandardInput%20%3D%20true%2C%0A%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%20UseShellExecute%20%3D%20false%2C%0A%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%20%20%20...%0A%20%20%20%20%7D%3B%0A%7D%3C%2FPRE%3E%3CP%3EStartup.cs%20has%20the%20map%20functions%20added%3C%2FP%3E%3CPRE%3Epublic%20void%20ConfigureServices(IServiceCollection%20services)%0A%7B%0A%20%20%20%20services.AddControllers()%3B%0A%20%20%20%20%2F%2F%20connect%20vue%20app%20-%20middleware%0A%20%20%20%20services.AddSpaStaticFiles(options%20%3D%26gt%3B%20options.RootPath%20%3D%20%22vue%2Fpublic%2Fdist%22)%3B%0A%20%20%20%20services.AddSpaStaticFiles(options%20%3D%26gt%3B%20options.RootPath%20%3D%20%22vue%2Fprivate%2Fdist%22)%3B%0A%7D%0A%0A%0Apublic%20void%20Configure(IApplicationBuilder%20app%2C%20IWebHostEnvironment%20env)%0A%7B%0A%20%20%20...%0A%20%20%20%20app.Map(%22%2Fpublic%22%2C%20app1%20%3D%26gt%3B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20app1.UseSpa(spa%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20spa.Options.SourcePath%20%3D%20%22vue%2Fpublic%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(env.IsDevelopment())%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%20spa.UseVueDevelopmentServer(%22vue%2Fpublic%22%2C%208080)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D)%3B%0A%0A%20%20%20%20app.Map(%22%2Fprivate%22%2C%20app2%20%3D%26gt%3B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20app2.UseSpa(spa%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20spa.Options.SourcePath%20%3D%20%22vue%2Fprivate%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(env.IsDevelopment())%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%20spa.UseVueDevelopmentServer(%22vue%2Fprivate%22%2C%208081)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D)%3B%0A%7D%3C%2FPRE%3E%3CP%3EAlso%20tried%20to%20modify%20the%20project%20file.%3C%2FP%3E%3CPRE%3E%20%26lt%3BPropertyGroup%26gt%3B%0A%20%20%26lt%3BTargetFramework%26gt%3Bnetcoreapp3.1%26lt%3B%2FTargetFramework%26gt%3B%0A%20%20%26lt%3BSpaRoot1%26gt%3Bvue%5Cpublic%5C%26lt%3B%2FSpaRoot1%26gt%3B%0A%20%20%26lt%3BSpaRoot2%26gt%3Bvue%5Cprivate%5C%26lt%3B%2FSpaRoot2%26gt%3B%0A%20%20%26lt%3BDefaultItemExcludes%26gt%3B%24(DefaultItemExcludes)%3B%24(SpaRoot1)node_modules%5C**%3B%24(SpaRoot2)node_modules%5C**%26lt%3B%2FDefaultItemExcludes%26gt%3B%0A%20%20%26lt%3BTypeScriptCompileBlocked%26gt%3Btrue%26lt%3B%2FTypeScriptCompileBlocked%26gt%3B%0A%20%20%26lt%3BTypeScriptToolsVersion%26gt%3BLatest%26lt%3B%2FTypeScriptToolsVersion%26gt%3B%0A%20%20%26lt%3BIsPackable%26gt%3Bfalse%26lt%3B%2FIsPackable%26gt%3B%0A%20%26lt%3B%2FPropertyGroup%26gt%3B%0A%0A%0A%20%26lt%3BTarget%20Name%3D%22PublishRunWebpack%22%20AfterTargets%3D%22ComputeFilesToPublish%22%26gt%3B%0A%0A%20%20%26lt%3BExec%20WorkingDirectory%3D%22%24(SpaRoot1)%22%20Command%3D%22npm%20install%22%20%2F%26gt%3B%0A%20%20%26lt%3BExec%20WorkingDirectory%3D%22%24(SpaRoot1)%22%20Command%3D%22npm%20run%20build%22%20%2F%26gt%3B%0A%0A%20%20%26lt%3BExec%20WorkingDirectory%3D%22%24(SpaRoot2)%22%20Command%3D%22npm%20install%22%20%2F%26gt%3B%0A%20%20%26lt%3BExec%20WorkingDirectory%3D%22%24(SpaRoot2)%22%20Command%3D%22npm%20run%20build%22%20%2F%26gt%3B%0A%0A%20%20%26lt%3BItemGroup%26gt%3B%0A%20%20%20%26lt%3BDistFiles%20Include%3D%22%24(SpaRoot1)dist%5C**%22%20%2F%26gt%3B%0A%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%26lt%3BRelativePath%26gt%3B%25(DistFiles.Identity)%26lt%3B%2FRelativePath%26gt%3B%0A%20%20%20%20%26lt%3BCopyToPublishDirectory%26gt%3BPreserveNewest%26lt%3B%2FCopyToPublishDirectory%26gt%3B%0A%20%20%20%26lt%3B%2FResolvedFileToPublish%26gt%3B%0A%20%20%26lt%3B%2FItemGroup%26gt%3B%0A%0A%20%20%26lt%3BItemGroup%26gt%3B%0A%20%20%20%26lt%3BDistFiles%20Include%3D%22%24(SpaRoot2)dist%5C**%22%20%2F%26gt%3B%0A%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%26lt%3BRelativePath%26gt%3B%25(DistFiles.Identity)%26lt%3B%2FRelativePath%26gt%3B%0A%20%20%20%20%26lt%3BCopyToPublishDirectory%26gt%3BPreserveNewest%26lt%3B%2FCopyToPublishDirectory%26gt%3B%0A%20%20%20%26lt%3B%2FResolvedFileToPublish%26gt%3B%0A%20%20%26lt%3B%2FItemGroup%26gt%3B%0A%0A%20%26lt%3B%2FTarget%26gt%3B%3C%2FPRE%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1659260%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-1659260%22%20slang%3D%22en-US%22%3E%3CP%3EHello%20Kazuki%2C%20great%20article.%20I%20was%20able%20to%20follow%20all%20the%20steps%20and%20everything%20works%20perfect%20...%20until%20publishing%20to%20IIS.%3C%2FP%3E%3CP%3EWhen%20I%20try%20to%20browse%20the%20site%20i%20get%26nbsp%3B%3CSTRONG%3EHTTP%20Error%20500.19%20-%20Internal%20Server%20Error.%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3EI%20tried%20it%20with%20your%20code%20as%20is%20and%20my%20modified%20code%20both%20with%20same%20result.%20Any%20Ideas%3F%3C%2FP%3E%3CP%3EThese%20are%20contents%20of%20published%20website.%20client-app%20contains%20dist%20folder%20created%20by%20build%3CBR%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22published.png%22%20style%3D%22width%3A%20499px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F217841i31F32AAD59DF00DB%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22published.png%22%20alt%3D%22published.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1663047%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-1663047%22%20slang%3D%22en-US%22%3E%3CP%3EDid%20you%20install%20ASP.NET%20Core%20Hosting%20Bundle%3F%3C%2FP%3E%0A%3CP%3EIf%20no%2C%20please%20check%20the%20following%20document%3A%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Faspnet%2Fcore%2Ftutorials%2Fpublish-to-iis%3Fview%3Daspnetcore-3.1%26amp%3Btabs%3Dvisual-studio%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Faspnet%2Fcore%2Ftutorials%2Fpublish-to-iis%3Fview%3Daspnetcore-3.1%26amp%3Btabs%3Dvisual-studio%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1665025%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-1665025%22%20slang%3D%22en-US%22%3E%3CP%3EHello%20%2C%20Thank%20you%20for%20the%20reply.%20You%20were%20right%20%2C%20I%20did%20not%20have%20it.%3CBR%20%2F%3EI've%20installed%20the%20bundle%20and%20the%20500%20error%20is%20gone%20but%20now%20I%20get%20blank%20page%20(%20I%20guess%20this%20is%20progress%20%3A)%3C%2Fimg%3E%20)%3C%2FP%3E%3CP%3EThe%20API%20works%20though%2C%20even%20with%20blank%20page%20typing%20%22api%2FValues%2F%22%20in%20the%20url%20shows%20values.%3C%2FP%3E%3CP%3ESo%20it's%20just%20the%20html%20content%20that%20wasn't%20compiled%20properly.%3CBR%20%2F%3EI%20think%20paths%20are%20the%20problem%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%22Screenshot_4.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F218167i6CEF42CC82579BD6%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22Screenshot_4.png%22%20alt%3D%22Screenshot_4.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EBy%20the%20way%20%2C%20I'm%20working%20with%20your%20unchanged%20solution%20downloaded%20from%20git.%3C%2FP%3E%3CP%3ETo%20fix%20the%20paths%20I%20tried%26nbsp%3Badding%20vue.config.js%20file%20to%20client-app%20folder%20(%20same%20level%20as%20package.json)%20with%20following%20content%3A%3C%2FP%3E%3CPRE%3Emodule.exports%20%3D%20%7B%0A%20%20%20%20publicPath%3A%20process.env.NODE_ENV%20%3D%3D%3D%20'production'%20%3F%20'.%2F'%20%3A%20'%2F'%2C%0A%7D%3C%2FPRE%3E%3CP%3Ebut%20it%20didn't%20do%20anything.%20I%20still%20get%20same%20thing%20in%20the%20dist%20folder.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'm%20sorry%20%2C%20I'm%20new%20to%20Vue%20or%20node.%20I'm%20trying%20to%20switch%20from%20angularJS.%20Never%20had%20such%20problems%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1666819%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-1666819%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F790849%22%20target%3D%22_blank%22%3E%40sbzdyl%3C%2FA%3E%26nbsp%3B%3CBR%20%2F%3EI%20think%20you%20also%20have%20to%20change%20API%20path%20to%20production%20on%20HelloWorld.vue.%3C%2FP%3E%0A%3CP%3EThere%20is%20a%20code%20to%20call%20%2Fapi%2Fvalue%20API.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%3Econst%20r%20%3D%20await%20fetch('%2Fapi%2Fvalues')%3B%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EAfter%20rewriting%20the%20path%20to%20'%2Fyour%20app%20name%2Fapi%2Fvalues'%2C%20I%20guess%20you%20can%20see%20a%20correct%20page%20on%20IIS.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EBut%20it%20is%20not%20good%20approach%2C%20I%20have%20updated%20the%20github%20repo(%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Frunceel%2FVueJsAndAspNetCore%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Frunceel%2FVueJsAndAspNetCore%3C%2FA%3E)%20to%20use%20.NET%20Core%203.1%2C%20latest%20Vue%20CLI%2C%20and%20adding%20a%20few%20changes%20easy%20to%20deploy%20to%20IIS.%3C%2FP%3E%0A%3CP%3ECould%20you%20try%20following%20steps%3F%3C%2FP%3E%0A%3COL%3E%0A%3CLI%3EClone%20the%20repo%3C%2FLI%3E%0A%3CLI%3EChange%20publicPath%20on%20vue.config.js%20like%20following%3A%3CBR%20%2F%3E%0A%3CPRE%3Emodule.exports%20%3D%20%7B%0A%20%20%20%20publicPath%3A%20process.env.NODE_ENV%20%3D%3D%3D%20'production'%0A%20%20%20%20%20%20%20%20%3F%20'%2Fyour%20app%20name%2F'%0A%20%20%20%20%20%20%20%20%3A%20'%2F'%0A%7D%3C%2FPRE%3E%0A%3C%2FLI%3E%0A%3CLI%3EChange%20an%20API%20endpoint%20path%20on%20.env.production%20like%20following%3CBR%20%2F%3E%0A%3CPRE%3EVUE_APP_APIPATH%3D%2Fyour%20app%20name%2Fapi%2Fvalues%3C%2FPRE%3E%0A%3C%2FLI%3E%0A%3CLI%3Edotnet%20publish%20-c%20Release%3C%2FLI%3E%0A%3CLI%3ECopy%20all%20files%20that%20are%20at%20publish%20folder%20to%20your%20IIS%20app%20folder.%3C%2FLI%3E%0A%3CLI%3Eaccess%20to%20'http%3A%2F%2Flocalhost%2Fyour%20app%20name'%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%3EAfter%20that%20you%20can%20see%20the%20page%3A%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-09-15%20095525.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F218278i7B9DB8DD4B949483%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-09-15%20095525.png%22%20alt%3D%22%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-09-15%20095525.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI%20hope%20you%20will%20get%20to%20same%20result!%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1668390%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-1668390%22%20slang%3D%22en-US%22%3E%3CP%3EThank%20you%20Kazuki!!!%3C%2FP%3E%3CP%3EThis%20was%20actually%20the%20solution%20I%20came%20up%20with%20after%20my%20previous%20comment.%20Wasn't%20sure%20if%20it%20was%20correct%20but%20your%20answer%20confirms%20it%20%3A).%3C%2FP%3E%3CP%3Evue.config.js%20file%20is%20the%20same%20but%20my%20implementation%20of%20API%20url%20was%20a%20bit%20different%20as%20I%20used%20vue-resource%20options%20to%20change%20API%20path%3A%3C%2FP%3E%3CPRE%3EVue.http.options.root%20%3D%20process.env.NODE_ENV%20%3D%3D%3D%20'production'%20%3F%20'appName%2F'%20%3A%20''%3C%2FPRE%3E%3CP%3EThank%20you%20for%20writing%20this%20article%20and%20responding%20to%20comments.%20There%20was%20no%20solutions%20I%20could%20find%20to%20use%20VueJS%20with%20API%20controller%20in%20C%23.%3C%2FP%3E%3CP%3EHopefully%20someone%20else%20will%20see%20this%20post.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1744611%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-1744611%22%20slang%3D%22en-US%22%3E%3CP%3EMake%20sure%20to%20add%20the%20VueHelp.cs%20class%20that%20you%20create%20into%20the%20root%20folder.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1990798%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-1990798%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%20a%20lot%2C%20Kazuki%20for%20writing%20this%20article.%20I%20spent%202%20days%20trying%20to%20make%20VueJS%20work%20with%20asp.net%20core%20and%20your%20article%20was%20the%20perfect%20solution.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2254078%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-2254078%22%20slang%3D%22en-US%22%3E%3CP%3EI'm%20following%20the%20article%20very%20closely%20but%20whenever%20I%20try%20to%20post%20to%20Azure%20the%20publish%20npm%20run%20build%20line%3CBR%20%2F%3E%3CEXEC%20workingdirectory%3D%22%26quot%3B%24(SpaRoot)%26quot%3B%22%20command%3D%22%26quot%3Bnpm%22%20run%3D%22%22%20build%3D%22%22%3E%3C%2FEXEC%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ethrowing%20exception%20when%20posting%20to%20Azure.%20For%20some%20reason%20it's%20looking%20for%20package.json%20in%20root%20folder%20rather%20that%20%24(SpaRoot)%20which%20should%20be%20ClientApp.%3CBR%20%2F%3EAny%20ideas%20%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2365072%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-2365072%22%20slang%3D%22en-US%22%3E%3CP%3E%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%26nbsp%3BThank%20you%20for%20a%20great%20article!%20I've%20implemented%20it%20and%20everything%20works%20fine%20except%20calling%20the%20underlying%20API%2C%20the%20Vue-Router%20seems%20to%20be%20blocking%20calls%20to%20it%20and%20I%20can't%20for%20the%20life%20of%20me%20find%20a%20solution.%20Do%20you%20have%20any%20experience%20with%20this%20or%20am%20I%20doomed%3F%26nbsp%3B%3CIMG%20class%3D%22lia-deferred-image%20lia-image-emoji%22%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Fhtml%2F%40C7BE33135EA1742D4E0CF1FF00DD009F%2Fimages%2Femoticons%2Fcryingwhilelaughing_anim.gif%22%20alt%3D%22%3Acryingwithlaughter%3A%22%20title%3D%22%3Acryingwithlaughter%3A%22%20%2F%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBest%20regards%2C%3C%2FP%3E%3CP%3ECalle%3C%2FP%3E%3C%2FLINGO-BODY%3E
Version history
Last update:
‎Jun 17 2019 08:30 PM
Updated by: