Publish Vue.js + ASP.NET Core on Azure

Question

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?

Answer 1

'vue-cli-service' is not recognized as an internal or external command, operable program or batch file.

To resolve this error, you have to install the dependencies as @Thomas and @Jalpa Panchal mentioned in the comments.

The error message is: npm ERR! path D:\a\ThatsTime\ThatsTime/package.json npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, open 'D:\a\ThatsTime\ThatsTime\package.json'

This error is due to the workflow is not able to point the package.json in the root directory because package.json under the subfolder vueapp.

To resolve this error, add below configuration in the workflow:

- name : Install Dependencies
  run  : |
          cd vueapp
          npm install

GitHub Workflow:

name: Build and deploy ASP.Net Core app to Azure Web App - vueaspnet

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: windows-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up .NET Core
        uses: actions/setup-dotnet@v1
        with:
          dotnet-version: '7.x'
          include-prerelease: true
          
      - name: Install Dependencies
        run : | 
                cd vueapp
                npm install
               
      - name: Build with dotnet
        run: dotnet build --configuration Release

      - name: dotnet publish
        run: dotnet publish -c Release -o ${{env.DOTNET_ROOT}}/myapp

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        with:
          name: .net-app
          path: ${{env.DOTNET_ROOT}}/myapp

  deploy:
    runs-on: windows-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
    
    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v3
        with:
          name: .net-app
      
      - name: Deploy to Azure Web App
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'vueaspnet'
          slot-name: 'Production'
          package: .
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_D9811244A05F468CBA7E827C65C83215 }}