Enabling html5 mode with AngularJS and a external NodeJS server

Question

So I've read almost every SO answer/question to this topic, but still I have many questions in my head.

First, the problem:

I have an AngularJS app with html5 enabled, so I can get rid of the '#' sign.

$locationProvider.html5Mode({ enabled: true, requireBase: true });
$locationProvider.hashPrefix('!');

This is the important part in my index.html:

<!DOCTYPE html>
<html ng-app="application" ng-controller="ApplicationController as app">
  <head>
    <meta name="fragment" content="!">

    <title>LivingRoomArt</title>

    <meta charset="UTF-8">
    <base href="/index.html" />

I am communicating with a NodeJS server which is using express:

router.route('/events')
  .post(authController.isAuthenticated, eventController.postEvent)
  .get(eventController.getEvents);

// Register all our routes with /api
app.use('/api', router);

// Start the server
app.listen(process.env.PORT || 5000);

So, the usual problem:

After reloading, I am getting an 404 from the server. I get the concept of this here, the suggested solution everywhere:

  // This route deals enables HTML5Mode by forwarding missing files to the index.html
  app.all('/*', function(req, res) {
    res.sendfile('index.html');
  });
});

The thing is, I don't have an index.html file on my server, neither do I want to duplicate it on my server.

So how do I tell Node to handle requests properly without storing html-files on my server?

I am hosting the Node app on Heroku, if this helps.

So you have a client server and an API server, right ? The 404 error is handle on the client server ? — Zagonine
– Zagonine, Commented Jan 15, 2016 at 11:56
Well, right now nowhere :) But I could handle it on the client, yes. And I have an API server and a static server for my client (html, js etc.) — ohboy21
– ohboy21, Commented Jan 15, 2016 at 12:04
And then what? I need to access sub-views and make AJAX calls there. — ohboy21
– ohboy21, Commented Jan 15, 2016 at 12:35
How come you don't have index? How would ng-app load? You definitely have a starting point, why not use it? res.sendFile('file'); // res.render('file'); — Medet Tleukabiluly
– Medet Tleukabiluly, Commented Jan 15, 2016 at 19:10
Well, read the question. My Front End (Angular) is on a seperate static server, the NodeJS app runs on a different server (hosted at heroku). I don't serve the static files. My starting point is a index.html file, which just makes Ajax calls to a REST Api. — ohboy21
– ohboy21, Commented Jan 16, 2016 at 1:03

Preview · Accepted Answer · 2016-01-16 15:06:24Z

1

+100

When you say you don't serve static files, you're saying that the node.js API isn't right?

I guess you end up with two distinct urls, let's call them http://api.com and http://client.com.

I don't understand why your API should handle the 404. Do you load http://api.com in your browser and expecting your index.html? If it's really your use-case, I would advice a simple routing to declare in your API like:

app.all('/*', function (req, res) {
   res.redirect('http://client.com');
});

Which will redirect all requests not catched by your previous routes declaration to your client website.

Then, there is two options:

If the server that serves your static files is another Node.Js server using express, you could perfectly do the sendfile, since you now have access to the index.html

If you're using Nginx, (which I strongly recommend if you don't) for the statics, you could do a configuration like this to redirect all failed requests (missing files / routes) to the index.html

server {
  listen 80;

  root /app/www;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

answered Jan 16, 2016 at 15:06

Preview

35.9k10 gold badges95 silver badges113 bronze badges

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

2 Comments

ohboy21 Over a year ago

I'll try it out tomorrow. Just read this now but I can answer one question: The api.com is not returning the index.html, it returns just blank. It's a pure REST api. Maybe this will change the answer a bit? For nginx. No, I don't. Can you recommend a service to do this?

Preview Over a year ago

Hum yeah it's perfectly normal that your api is not returning the index, I was simply asking if you wanted to do something special with it. So you are currently using node to serve your static files? Yeah I would recommend a little amazon web services where you can setup an nginx or maybe a dedicated server, but aws is really low-cost.

Collectives™ on Stack Overflow

Enabling html5 mode with AngularJS and a external NodeJS server

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related