How to host an AngularJS app in Heroku using Node.js WITHOUT using yeoman?

Question

I'm trying to push a Hello World build with AngularJS into Heroku using Node.js. BUT with multiple views(partials).

I first deployed a Hello World without using ngRoute, meaning: without partials. That was fine and smooth. Then, I tried to push 2 simple partials. But I believe the issue is hosting the application and at the same time asking for partials. I know it is not the right approach and I want your advice.

This is my index.html:

<!DOCTYPE html>
<html ng-app="main">
<head>
    <meta name="name" content="something">
    <title></title>
</head>
<body>
    <section ng-view=""></section>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">
    angular.module('main', ['ngRoute'])
    .config(['$routeProvider', '$http', function ($routeProvider, $http){
        console.log('hola');
        $routeProvider
        .when('/', {
            resolve: **??? I tried with templateUrl but did not work either**
            ,controller: 'indexCtrl'
        })
        .when('/second', {
            resolve: **???**
            ,controller: 'secondCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
    }])
    .controller('indexCtrl', ['$scope', function ($scope){
        $scope.helloWorld = "Hello World";
    }])
    .controller('secondCtrl', ['$scope', function ($scope){
        $scope.helloWorld = "World Hello";
    }]);
    </script>
</body>
</html>

Partial 'templates/second.html'

<h1>{{ helloWorld }}<h1>
<a href="#/" title="">Go to First</a>

Partial 'templates/index.html'

<h1>{{ helloWorld }}<h1>
<a href="#/second" title="">Go to Second</a>

My express app:

var express = require('express'),
app = express();
app.set('view engine', 'html');
app.get('/', function(req, res) {
    res.sendfile('index.html', {root: __dirname })
});
app.get('/index', function (req, res){
    res.sendfile('templates/index.html', {root: __dirname })
});
app.get('/second', function (req, res){
    res.sendfile('templates/second.html', {root: __dirname })
});
var server = app.listen(process.env.PORT || 80);

And obviously, Procfile:

web: node index.js

All the tutorials that I've found so far use Yeoman but I don't want to use Yeoman or any other scaffolding (if that is what that is) tool.

Q: Is it possible to host an AngularJS app in the same Heroku application where I'm storing the partials? If so, what am I doing wrong? If not, what is the best approach?

miken32 · Accepted Answer · 2022-10-17 16:39:41Z

18

I found my issue looking at this example.

The actual issue was that I was not making "public" the directory with express:

app.use(express.static(__dirname));

Here is the hello world

index.html

<!DOCTYPE html>
<html ng-app="main">
<head>
    <meta name="name" content="something">
    <title></title>
</head>
<body>
    <section ng-view=""></section>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">
    angular.module('main', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider){
        console.log('hola');
        $routeProvider
        .when('/', {
            templateUrl: 'templates/index.html'
            ,controller: 'indexCtrl'
        })
        .when('/second', {
            templateUrl: 'templates/second.html'
            ,controller: 'secondCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
    }])
    .controller('indexCtrl', ['$scope', function ($scope){
        $scope.helloWorld = "Hello World";
    }])
    .controller('secondCtrl', ['$scope', function ($scope){
        $scope.helloWorld = "World Hello";
    }]);
    </script>
</body>
</html>

Server / index.js

var express = require('express'),
app = express();

app.use(express.static(__dirname));
app.get('/', function(req, res) {
    res.sendfile('index.html', {root: __dirname })
});
var server = app.listen(process.env.PORT || 80);

Procfile

web: node index.js

templates/index.html

<h1>{{ helloWorld }}<h1>
<a href="#/second" title="">Go to Second</a>

templates/second.html

<h1>{{ helloWorld }}<h1>
<a href="#/" title="">Go to First</a>

I hope this helps someone.

To answer my question. Yes, it is possible, what I was doing wrong is not making the templates(files) accessible. If you want to have extra security on what can be accessible you could create a folder called, for example, public. Then make that directory static:

app.use(express.static(__dirname + '/public'));

then you can also have different routes to communicate with your application even RESTfully. Like:

app.get('/users', function(req, res) {
    res.json({...});
});

edited Oct 17, 2022 at 16:39

miken32

42.5k16 gold badges127 silver badges177 bronze badges

answered Nov 23, 2014 at 4:47

pgarciacamou

1,74222 silver badges41 bronze badges

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

4 Comments

Prasanth Jaya Over a year ago

good one, thanks. Do we need package.json to deploy in heroku?

pgarciacamou Over a year ago

Yes, package.json tells Heroku about your app's dependencies: devcenter.heroku.com/articles/…

AlainIb Over a year ago

hello. i'm trying to host node.js+ angular.js on heroku but i fail. can i have a zip with your working example please ?

pgarciacamou Over a year ago

Hi @AlainIb, unfortunately, it has been so long that I no longer have the app on Heroku. Maybe you could post a question and post the logs so that someone can help. I do remember copying and pasting all the files in this solution, so I don't think you would have found anything in there. Another tip, one time I messed something with the app in Heroku and I had to fully delete it and create it again and that fixed some issues (but I'm just guessing here). Sorry I couldn't be of more help, good luck!

Collectives™ on Stack Overflow

How to host an AngularJS app in Heroku using Node.js WITHOUT using yeoman?

1 Answer 1

Here is the hello world

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Here is the hello world

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related