CODEWITHSUNDEEP
javascriptangularjsexpressparse-serverback4app
lito
lito

Reputation: 3125

how to resolve ExpressJS routing when using AngularJS html5Mode (back4app/Parse-Server)

I'm using back4app BaaS service that uses Parse-Server. For the ClientSide I'm running AngularJS with html5Mode(true);

My problem is that this is NOT working: http://app.rizop.tv/dashboard While this is working right: http://app.rizop.tv

Any idea how to fix expressJS to handle my routes in the right way?

I have this config:

cloud\app.js

// Helper modules that will be used
var path = require('path');
var bodyParser = require('body-parser')

// This imports the Router that uses the template engine
var index = require('./routers/index');

// Sets the template engine as EJS
app.set('view engine', 'ejs');

// This defines that the 'views' folder contains the templates
app.set('views', path.join(__dirname, '/views'));

// These options are necessary to 
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

// This bind the Router to the / route
app.use('/', index)

// Starts listening in the routes
app.listen();

cloud\routers\index.js

// Importing express
var express = require('express');

// Creating a Router
var route = express.Router();

// Defining a route that binds the GET method
route.get('/', function(req, res) {
  // This is the code that renders the template
  res.render('index', {testParam: 'Back4Apper'});
});

module.exports = route;

cloud\views\index.ejs

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  ...
</body>
...
</body>
</html>

Here is my app structure:

enter image description here

Upvotes: 7

Views: 351

Answers (3)

ocespedes
ocespedes

Reputation: 1303

I have ran into the same problem and did the following

I've put this route as the last option, so when the express router ran out of options it will render the index file where is the angular app. Angular internal router will resolve that route and draw the view.

router.get('*', function (req, res) {
    res.render('index', {testParam: 'Back4Apper'});
});

Obviously you can write a smarter regex instead of * according to your needs but you get the idea.

Upvotes: 0

rvitorper
rvitorper

Reputation: 55

The file at cloud/app.js should not have app.listen() on its final line, due to the fact that you are using Cloud Code. Can you please try that?

Upvotes: 1

nivas
nivas

Reputation: 3186

You can make it work by making little changes in app.js and root html file

I assume you already defined $locationProvider.html5Mode(true); where you defined your routes. Then define base href in your index html 

<head>
  <base href="/">
  ...
</head>

This answer might be helpful to configure your server

Upvotes: 2

Related Questions