Host Vue.JS App on IIS

In hosting your vue.js app, you have many options to choose from. You can host on different platforms & services like Github Pages, Gitlab Pages, Netlify etc. or even you can create a Docker container that has deployed Vue.JS inside and run it on different virtual machines (this is another topic). These platforms & services provide easy-to-deploy solution but, what if you are in an environment where all of the web apps should be hosted on IIS? Fortunately, IIS supports an easy solution in running vue.js on it. So, let’s get started.

FTF (First Things First)

If you are using Windows Server, make sure to check you include the “IIS” in the Server Roles. Let’s get started.

1.0 Deploy your Vue.JS App

1.1 Open the terminal and execute the command

npm run build

If building is successfully, you can find the folder with a name “dist”.

1.2 Copy the dist folder content and move it in a folder in Drive C:

In my example, I created a folder with a name “myvueapp” in the path of C:\inetpub\wwwroot and copy and paste all of the files and folders from the dist folder.

2.0 Create web.config file

2.1 Create a web.config file inside the “myvueapp” and paste these codes:

<?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>
        <httpErrors>
            <remove statusCode="404" subStatusCode="-1" />
            <remove statusCode="500" subStatusCode="-1" />
            <error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" />
            <error statusCode="500" path="/survey/error" responseMode="ExecuteURL" />
        </httpErrors>
        <modules runAllManagedModulesForAllRequests="true"/>
    </system.webServer>
</configuration>

2.2 Save the file.

3.0 Create a website on IIS

3.1 Open the IIS app and create a new website under the “Sites” option and name it whatever you prefer. In my example, I name it as “myvuewebsite”. Locate the path of “myvueapp” and specify the specific port that you want.