How to host an angular on Azure linux web app

Question

I have this Angular app that I am trying to host using Linux web app on Azure. After deployment, I could not load the website so, after a little research, I found that I needed to add a index.js file (Cannot GET index.html Azure Linux Web App)

That fixed the fact that I could not load my website. But it does not fix angular routing issue. If I navigate to an angular route and hit refresh, the page does not get redirected to index.html and I get a 404 response. (See http://ecominas-website-qas.azurewebsites.net)

This is my index.js

var express = require('express');
var server = express();
var options = {
    index: 'index.html'
};
server.use('/', express.static('/home/site/wwwroot', options));
server.listen(process.env.PORT);

I have also tried adding a web.config as described here Hosting angular application in azure linux app service, but that would not load the index.html page and the default "everything is working but no app found" page was displayed.

How can I get angular routes working?

Thanks

You can achieve it with out node server as mentioned here, stackoverflow.com/questions/59707804/… (Possible duplicate) — Ravikumar B
– Ravikumar B, Commented Dec 21, 2020 at 18:44

Lucas Phillip · Accepted Answer · 2019-07-30 02:50:59Z

4

So, I have finally managed to get it working. After a few days of research and try/error, this is the index.js that worked for future reference

var express = require('express');
var path = require('path');

var server = express();
var options = {
    index: 'index.html',
    redirect: true,
};
server.use(express.static('/home/site/wwwroot', options));
const allowedExt = [
    '.js',
    '.ico',
    '.css',
    '.png',
    '.jpg',
    '.woff2',
    '.woff',
    '.ttf',
    '.svg',
  ];

server.get('*', (req, res) => {
    if (allowedExt.filter(ext => req.url.indexOf(ext) > 0).length > 0) {
        res.sendFile(path.resolve(req.url));
    } else {
        res.sendFile(path.resolve('index.html'));
    }
});
server.listen(process.env.PORT);

answered Jul 30, 2019 at 2:50

Lucas Phillip

1854 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

How to host an angular on Azure linux web app

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related