web.config to run dist folder deployed on azure app service via FTP - 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.