web.config to run dist folder deployed on azure app service via FTP

Question

I am using Vue CLI project and wants to deploy the dist folder to Azure App Service via FTP but I am missing with web.config file to run my deployed app service.

I am trying to do this answer but can't find a web.config file for my reference.

Thanks in advance for your answers.

Answer 1

FTP deployment doesn't support build automation like:

• generation of web.config
• dependency restores (such as NuGet, NPM, PIP, and Composer automations)
• compilation of .NET binaries

Generate these necessary files manually on your local machine, and then deploy them together with your app.

• Add web.config file with a URL Rewrite rule

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

• Vue CLI generated projects are configured to copy anything in the public folder directly into the build output directory (dist by default).
• Put it in /public It will then be copied over to /dist during build.
• I have created the config file in public folder, After running npm run build , web.config file is copied to dist folder.

• To create web.config,Right click on the public folder-->Add new file, name it as web. Config and add the above mentioned code snippet and save.
• Go to Azure portal, your Web App =>Advanced Tools=>KUDU - Debug Console =>CMD => site=>wwwroot, check if web.config file exists or not.