Publish Vue.js + ASP.NET Core on Azure

108 Views Asked by At

I want to deploy my ASP.NET Core + Vue.js application in Azure App Service with a configured CI/CD GitHub account. I followed Microsoft's guide: https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-vue?view=vs-2022#publish-the-project

I did everything as they said, but I encountered an error during the publish stage when pushing the repository to GitHub:

 > [email protected] build
vue-cli-service build

  'vue-cli-service' is not recognized as an internal or external command,
  operable program or batch file.
C:\Users\runneradmin.nuget\packages\microsoft.visualstudio.javascript.sdk\0.5.74-alpha\Sdk\Sdk.targets(171,9): error MSB3073: The command "npm run build" exited with code 1. [D:\a\ThatsTime\ThatsTime\vueapp\vueapp.esproj]
Error: Process completed with exit code 1.

error screenshot

here is vueapp.esproj content:

<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/0.5.74-alpha">
  <PropertyGroup>
    <StartupCommand>npm run serve</StartupCommand>
    <JavaScriptTestRoot>.\</JavaScriptTestRoot>
    <JavaScriptTestFramework>Jest</JavaScriptTestFramework>
    <!-- Command to run on project build -->
    <BuildCommand></BuildCommand>
    <!-- Command to create an optimized build of the project that's ready for publishing -->
    <ProductionBuildCommand>npm run build</ProductionBuildCommand>
    <!-- Folder where production build objects will be placed -->
    <BuildOutputFolder>$(MSBuildProjectDirectory)\..\webapi\wwwroot</BuildOutputFolder>
  </PropertyGroup>
</Project>

here is webapi.csproj content:

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net7.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <EnableSdkContainerSupport>true</EnableSdkContainerSupport>
  </PropertyGroup>
  <ItemGroup>
    <Folder Include="Models\" />
  </ItemGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="7.0.17" />
    <PackageReference Include="Microsoft.IdentityModel.Tokens" Version="7.5.0" />
  </ItemGroup>
  <ItemGroup>
      <ProjectReference Include="..\vueapp\vueapp.esproj">
          <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
      </ProjectReference>
  </ItemGroup>
</Project>

package.json:

  "name": "vueapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "node aspnetcore-https.js && vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@vueuse/components": "^10.9.0",
    "@vueuse/core": "^10.9.0",
    "core-js": "^3.8.3",
    "jest": "^29.7.0",
    "jest-editor-support": "^31.1.2",
    "vue": "^3.2.13",
    "vue-router": "^4.3.0"
  }

I also tried to deploy using Web App + Azure Blob Storage, but nothing worked out. Can you help me fix the problem or maybe give some recommendations on how to deploy this in another way?

0

There are 0 best solutions below