aspnetcore-vue

A sample aspnet project template with these features:

asp.net core 2.1 for server-side code
vue.js for client-side code (created with cli v3)
both live in one project and debugging is done on the aspnet project
working HMR in vue app when debugging the aspnet site

Below are the steps used to create this.

Aspnet Core Project

Create a new dotnet core project with aspnet core template.

Then In Startup.cs, add services.AddSpaStaticFiles() in ConfigureServices() method, and app.UseSpaStaticFiles() and app.UseSpa() in Configure() method.

public void ConfigureServices(IServiceCollection services)
{
  services.AddMvc();

  // new addition here
  services.AddSpaStaticFiles(spa =>
  {
    spa.RootPath = @"ClientApp\dist";
  });
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
  // ... other aspnet configuration skipped here

  app.UseStaticFiles();
  app.UseSpaStaticFiles(); // new addition
  app.UseMvc();

  // new addition
  app.UseSpa(spa =>
  {
    if (env.IsDevelopment())
    {
      // change this to whatever webpack dev server says it's running on
      spa.UseProxyToSpaDevelopmentServer("http://localhost:8080");
    }
  });
}

Vue Project

Create a client-side project using vue cli 3 into a folder called ClientApp in the aspnet project folder.

Csproj File

Some edits to the .csproj file are also needed for proper release/publish using dotnet.

The PropertyGroup defines a new variable SpaRoot for use later.

The ItemGroup makes vue's project folder visible in VS but not include in build.

DebugEnsureNodeEnv target installs npm packages if necessary on project builds.

PublishRunWebpack target builds the vue app and include the dist folder in the published files.

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

  <!-- ...default stuff skipped here... -->

  <PropertyGroup>
    <SpaRoot>ClientApp\</SpaRoot>
  </PropertyGroup>

  <ItemGroup>
    <Content Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)dist\**" />
  </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>

soukoku / aspnetcore-vue Goto Github PK

aspnetcore-vue's Introduction

aspnetcore-vue

Aspnet Core Project

Vue Project

Csproj File

aspnetcore-vue's People

Contributors

Stargazers

Watchers

Forkers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent