Deploy Vue CLI on Azure App Service with History mode

Question

Hi is there anyone who has deployed there application to azure app service and got the history mode to work? I have been trying on and off, and cant get it work :S

Im using connect-history-api-fallback and my package.json lookslike this:

{
  "name": "wbo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "start": "node server.js"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "buefy": "^0.7.3",
    "connect-history-api-fallback": "^1.6.0",
    "express": "^4.16.4",
    "js-cookie": "^2.2.0",
    "lodash": "^4.17.11",
    "nprogress": "^0.2.0",
    "vue": "^2.6.6",
    "vue-router": "^3.0.1",
    "vuelidate": "^0.7.4",
    "vuex": "^3.0.1",
    "vuex-persistedstate": "^2.5.4"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.5.0",
    "@vue/cli-plugin-eslint": "^3.5.0",
    "@vue/cli-service": "^3.5.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "vue-cli-plugin-buefy": "^0.3.5",
    "vue-template-compiler": "^2.5.21"
  }
}

And i have a server.js file in root like this:

const express = require('express')
const history = require('connect-history-api-fallback')
const port = process.env.PORT || 8080
const app = express()

app.use(history())

app.use(express.static(__dirname + '/dist/'))
app.get('/*', function(req, res) {
  res.sendFile(__dirname + '/dist/html.html')
})
app.listen(port)

console.log('Server started....')

Does anyone know if theres something more i need todo, or can see the problem somewhere :S

Best regards Daniel

Answer 1

i use ISS Server

This is my code

  <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>
    
    
                    <rule name="redirect all requests" stopProcessing="true">
                        <match url="^(.*)$" ignoreCase="false" />
                        <conditions logicalGrouping="MatchAll">
                            <add input="{​​​​​​​REQUEST_FILENAME}​​​​​​​" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
                         </conditions>
                        <action type="Rewrite" url="index.html" appendQueryString="true" />
                    </rule>
                </rules>
            </rewrite>
        </system.webServer>
    </configuration>

i use the same documentation , but i din't know if theres something more i need todo, or can see the problem somewhere