Geek Answers Handbook

How to enable ExpressJS routing when using AngularJS html5Mode (back4app / Parse-Server)

I am using the back4app BaaS service, which uses Parse-Server. For ClientSide, I run AngularJS with html5Mode (true);

My problem is that this does NOT work: http://app.rizop.tv/dashboard Although this works correctly: http://app.rizop.tv

Any idea how to fix expressJS to properly handle my routes?

I have this configuration:

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 \ view \ index.ejs

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

Here is my application structure:

enter image description here

+7
javascript angularjs express parse-server back4app
source share
3 answers

You can make it work by making small changes to the 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 html index

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

This answer may be useful for setting up your server.

+2
source share

The file in the cloud /app.js should not have app.listen () in its last line due to the fact that you are using Cloud Code. Can you try this?

+1
source share

I ran into the same problem and did the following

I chose this route as the last option, so when the express router has run out of parameters, it will display the index file where the angular application is located. angular internal router will resolve this route and draw a view.

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

Obviously, you can write a more reasonable regular expression instead of * according to your needs, but you get this idea.

0
source share

More articles:


All Articles