angularjs app running on localhost but not on heroku

Question

My angularjs app is running perfectly fine on localhost on my machine. But when I deploy it to heroku, the app is showing up but some of the features, mainly the frontend to backend communication is failing. I suspect that this is because I have used http://localhost:3000 instead of my real website addess: https://mytestapp.herokuapp.com . Could somebody please let me know what I should do to get this app running on heroku? with backend communicating with the frontend to get the login/signup feature running. At the moment, when I login or signup, I get an error, as if nothing has happened.

I ran grunt build, and removed the /dist from .gitignore and have a procfile like this web: node api.js .

and my package.json file is like:

  "version": "1.0.0",
  "main": "Gruntfile.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "start": "nf start",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

I have also declared a constant in my app.config.js like:

  .constant('API_URL', 'http://localhost:3000/')

I use API_URL to setup my login/signup authproviders.

and in my gruntfile.js , I have the following bit as well:

connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729
  },
  livereload: {
    options: {
      open: true,
      middleware: function (connect) {
        return [
          connect.static('.tmp'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect().use(
            '/app/styles',
            connect.static('./app/styles')
          ),
          connect.static(appConfig.app)
        ];
      }
    }
  },
  test: {
    options: {
      port: 9001,
      middleware: function (connect) {
        return [
          connect.static('.tmp'),
          connect.static('test'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect.static(appConfig.app)
        ];
      }
    }
  },

update

i am trying to implement it in this controller, but no success: when I implement the Yoni's solution, i don't get the projectlist anymore, it shows an empty page. why is that?

'use strict';
angular.module('ModuleV11App')
  .controller('ProjectlistCtrl', function ($http, $scope, API_URL, alert) {
    return $http.get($rootScope.server.url + '/projectlist').success(function (projectlist) {
      $scope.projectlist = projectlist;
    }).error(function (err) {
      alert('warning', "Unable to get projects, please login first", err.message);
    })

  });

however, it works, when it is like this:

return $http.get(API_URL + 'projectlist').success(function (projectlist) {

Yoni Rabinovitch · Accepted Answer · 2016-08-23 20:20:19Z

1

Use the $location service.

You can do something like this:

angular.module('mainModule', [])
    .run(function($location,$rootScope) {
        $rootScope.server = {url: location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '')};
    })

Then you can have calls like this anywhere in your frontend code:

$http.get($rootScope.server.url + '/whatever');

edited Aug 23, 2016 at 20:20

answered Aug 23, 2016 at 19:30

Yoni Rabinovitch

5,2611 gold badge27 silver badges36 bronze badges

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

7 Comments

Yoni Rabinovitch Over a year ago

In your angular app,js (or whatever you call the file your ng-app module is in).

cplus Over a year ago

my app.js is like: 'use strict'; angular .module('loginMdouleV11App', ['ui.router', 'ngAnimate', 'satellizer']); you mean here?

cplus Over a year ago

i updated my question, i need your help to clarify this issue, thanks

Yoni Rabinovitch Over a year ago

You need to add the .run function I posted above in your module: angular.module('ModuleV11App')

cplus Over a year ago

you mean in every angular.module? not in my app.js only? in others as well?

|

Collectives™ on Stack Overflow

angularjs app running on localhost but not on heroku

update

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

update

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related