Node Express通过单个页面应用程序提供动态和静态文件

Question

I'm building a single page application and using node (v7.7.1) for server and express for routing and building the API.

My frontend is packaged into a folder called /client (so all you JS, css, img and html are there). And my API has for root url /api .

Any other queries that are not files or API should be sent the index.html . So I tried the following:

app.use(express.static(path.join(__dirname, '../client')));
app.get('*', function (req, res, next) {
    if (req.originalUrl.indexOf('/api') !== -1) {
        return next()
    }
    if (/\/(\w|-)+\.\w{2,5}$/gmi.test(req.originalUrl)) {
            return res.sendFile(rss);
    }
    res.sendFile(path.join(__dirname, '../client/index.html')); 
});

The above is giving me errors for mime type error in console for css and js files (maybe images as well, but can't tell since nothing loads).

Browser console:

Refused to apply style from '/app-2432393bf1588983d4f6.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Any tips on how to do this better or how to fix issue much appreciated.

Answer 1

do it like this way

   function getRoutes(){
      const router = require('express').Router();
      router.get('/abc',function(req,res,next){
         //logic
      })
      router.post('/bcd',function(req,res,next){
        //logic
      })
      router.all('*',function(req,res,next){
         res.redirect('/');   
      })   //make sure this one is always at the last of all routes. 
      return router;
   }     
app.use('/',express.static(__dirname +'/client'))); // for static content
app.use('/api',getRoutes());

it can be handled in many more ways.

let me know if it helps you

Answer 2

I would do something more like :

app.use(express.static(path.normalize(__dirname, '../client'))); // This will serve index.html by default on the "/" route

app.get('/api/:func', (req, res, next) => { // Call this with "/api/save"
        console.log(`Called the API's ${req.params.func} function`);
        next()
    })
    .get("/file/:filename", (req,res) => res.sendFile(req.params.filename) ) // call "/file/style.css"

EDIT after OP's comments

1) What about sending all other traffic to index.html ? My frontend handles any page not founds and the sorts.

You can do a redirection

app.get( "*", (req,res) => res.redirect("/") )

2) I had this before but then then for some reason that doesn't make sense to me, when I looked at the source of the file found for style.css it was my html page.

Uh, not sure how to check or debug that...