Vue Router history mode with Express and nginx reverse proxy

Question

I have configured nginx to pass all requests to Node:

server {
    listen 80;
    server_name domain.tld;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

On the server I have a Node app running Express which servers my Vue index file.

app.get('/', (req, res) => {
  res.sendFile(`${__dirname}/app/index.html`);
});

I want to use HTML5 history mode with Vue router, so I set mode: 'history' in the router settings. I installed connect-history-api-fallback and set it up:

const history = require('connect-history-api-fallback');
app.use(history());

The routes works fine if the user first hits http://domain.tld. But, if a subroute is accessed directly, or the page is refreshed, I get a not found error.

How do I change my configuration?

Is it wise to use a node app to serve the file? Wouldn't it be better to use e.g. nginx in terms of resources? — jntme
– jntme, Commented Oct 17, 2017 at 14:35

artuu · Accepted Answer · 2017-02-13 14:53:13Z

3

I had the same problem.

It won't work when the order is:

app.use(express.static('web'));
app.use(history());

,but will work when:

app.use(history());
app.use(express.static('web'));

Whole example app:

var express = require('express');
var history = require('connect-history-api-fallback');
var app = express();

app.use(history());
app.use(express.static('web'));

app.listen(3002, function () {
    console.log('Example app listening on port 3002!')
});

In web folder i have:
index.html
and other js, css files.

answered Feb 13, 2017 at 14:53

artuu

311 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gaute Haugen Over a year ago

Don't understand how your answer has not picket as the correct one. This fixed it for me and I can now use the package

Pete Over a year ago

Yes this! This fixed it for me, artuu can you explain why swapping history/static fixes it?

Mikko · Accepted Answer · 2017-01-09 11:59:50Z

2

As I couldn't get the connect-history-api-fallback library working, I created one myself:

app.use((req, res, next) => {
  if (!req.originalUrl.includes('/dist/', 0)) {
    res.sendFile(`${__dirname}/app/index.html`);
  } else {
    next();
  }
});

This will send the /app/index.html when requested anything but /dist where scripts and images are located.

answered Jan 9, 2017 at 11:59

Mikko

6572 gold badges10 silver badges22 bronze badges

Collectives™ on Stack Overflow

Vue Router history mode with Express and nginx reverse proxy

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related