Serving VueJS Builds via Express.js using history mode

Question

I want to serve vue js dist/ via express js. I am using history router in vue js app.

The following are the api calls

api/
s-file/sending/:id
terms/get/:which

As i have figured out a solution in python here. I don't know how to do it in node js with express

The code i am using right now is

app.use(function (req, res, next) {
    if (/api/.test(req.url))
        next();
    else {
        var file = "";
        if (req.url.endsWith(".js")) {
            file = path.resolve(path.join(distPath, req.url))
            res.header("Content-Type", "application/javascript; charset=utf-8");
            res.status(200);
            res.send(fs.readFileSync(file).toString());
        } else if (req.url.endsWith(".css")) {
            file = path.resolve(path.join(distPath, req.url))
            res.header("Content-Type", "text/css; charset=utf-8");
            res.status(200);
            res.send(fs.readFileSync(file).toString());

        } else {
            file = path.resolve(path.join(distPath, "index.html"))
            res.header("Content-Type", "text/html; charset=utf-8");
            res.status(200);
            res.send(fs.readFileSync(file).toString());
        }

    }
})

Im not clear about your requirement, is api/ is a rest api or is there any static file directories etc.. ? — Janith
– Janith, Commented Sep 14, 2018 at 7:49

sanchaz · Accepted Answer · 2021-06-22 22:02:51Z

19

Have a look at connect-history-api-fallback that is referenced in the vue docs. This should solve your problems.

Example using connect-history-api-fallback

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

// Middleware for serving '/dist' directory
const staticFileMiddleware = express.static('dist');

// 1st call for unredirected requests 
app.use(staticFileMiddleware);

// Support history api
// this is the HTTP request path not the path on disk
app.use(history({
  index: '/index.html'
}));

// 2nd call for redirected requests
app.use(staticFileMiddleware);

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

edited Jun 22, 2021 at 22:02

sanchaz

1331 silver badge6 bronze badges

answered Sep 14, 2018 at 7:56

Benno

9686 silver badges15 bronze badges

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

9 Comments

tbhaxor Over a year ago

it will not work for vue routerlinks i.e fallbacks and moreover i am getting Cannot GET /

Benno Over a year ago

My bad, have a look at the use of connect-history-api-fallback in my updated answer

LOG_TAG Over a year ago

Error: Forbidden Your client does not have permission to get URL / from this server after deploying to docker !! what does that mean ?

Benno Over a year ago

@LOG_TAG this error could have many causes either in your hosting configuration or in your server code. Consider opening a separate question where you give all the background information needed: (What are you trying to do? What is working? What isn’t? What have you tried so far)

LOG_TAG Over a year ago

@Benno sure thanks for responding, I'm dealing with same 'Serving VueJS Builds via Express.js" using google cloud run via gcloud! wondering it's going to be duplicate one :)

|

tbhaxor · Accepted Answer · 2020-04-19 20:52:33Z

7

The very simpler one if anyone wants to use

Just add this below all the valid routes and above app.listen

app.all("*", (_req, res) => {
  try {
    res.sendFile('/absolute/path/to/index.html');
  } catch (error) {
    res.json({ success: false, message: "Something went wrong" });
  }
});

Make sure you have included

app.use(express.static('/path/to/dist/directory'));

edited Apr 19, 2020 at 20:52

answered Mar 27, 2020 at 6:39

tbhaxor

2,0572 gold badges17 silver badges52 bronze badges

2 Comments

gbengaoyetade Over a year ago

Why is there an "async" when "await" is not being used in the function?

Christopher Franko Over a year ago

My man. You're the real mvp.

Collectives™ on Stack Overflow

Serving VueJS Builds via Express.js using history mode

2 Answers 2

9 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related