CODEWITHSUNDEEP
azurevue-routerazure-web-app-servicevue-cli-3html5mode
Daniel Öhling
Daniel Öhling

Reputation: 23

Deploy Vue CLI on Azure App Service with History mode

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

Upvotes: 2

Views: 1351

Answers (1)

Youssef CH
Youssef CH

Reputation: 741

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

Upvotes: 0

Related Questions