Create versatile Vue+Electron applications suitable for desktop and web deployment

Question

I have used this template to develop my application which is a Vue application with Electron builder. Now I have a question: I need to build for production and deploy my project once as an electron package and another time as a web application hosted on a web server. I also don't want to split it into two repositories. Does anyone have any suggestions?

I tried using the dist folder as the root folder of the website and added a web.config file as shown below but I got an error.

web.config file content:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Vue" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_URI}" pattern="^/api/.*" negate="true" />
                        <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>

Error on IIS:

Answer 1

Yes, you need to install the url rewrite module on IIS. Otherwise, IIS will not understand the meaning of <rewrite> <rules> <rule name="Vue" stopProcessing="true"> in web.config.

Download from here