14

I've been learning how to use the MEAN stack in order to build web apps and so far it's been a lot of fun. Instead of using yeoman generators or npm app to generate my code for me, I've been building my whole app from the ground up. This way I know how each piece connects and what is going on with my app. I was just starting to connect the front and back end of my app when I looked at the developer console and saw

GET http://blog.dev/bower_components/angular/angular.js

Not only angular, but every other resource I have (Modernizr, angular-routes, mootools, restangular, etc ...). When you use the yeoman angular generator you are suppose to run the grunt serve command to start up the angular side. Because I built the app from scratch and I am using npm for my build tool I didn't know how to build the front end server. So, I just went with a simple nginx virtual host pointing to my index.html. Here's the config:

server {
        listen 80;

        server_name blog.dev;

        root /home/michael/Workspace/blog/app;
        index index.html index.htm;

        location / {
                try_files $uri $uri/ =404;
        }
}

I'm not sure what other variables could be affecting the situation, so if I missed something please tell me and I'll be happy to give you what you need!

Michaelslec
  • 905
  • 1
  • 9
  • 20

1 Answers1

5

If you're using the mean stack, you should be able to host both the back end and serve the front end directly with node.

I'm not sure of your project structure but here's the structure for one I'm working on now.

/bin --contains a file called www.js (used to launch app)
/data
/models
/node_modules
/public -- contains my angular implementation
/routes -- contains express routes
/temp
/upload
/views
app.js -- main configuration for express
api.js -- my apis
package.json

in the /bin/www.js file you have the code to start your node server.

var app = require('../app');

app.set('port', process.env.PORT || 3000);

var server = app.listen(app.get('port'), function() {
debug('Express server listening on port ' + server.address().port);
});

You'll also need to setup express and your routes so well look at routes first in the routes directory I have a file called index.js

In this file, I define one route that leads to my angular index.html page.

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
res.redirect('/pages/index.html');
});

module.exports = router;

And of course you'll need to set up express.

process.env.TMPDIR = 'tmp'; // to avoid the EXDEV rename error, see            http://stackoverflow.com/q/21071303/76173

var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var multer = require('multer');
var flow = require('./flow-node.js')('tmp');
var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();
var uuid = require('uuid');
var mongoose = require('mongoose');
var session = require('express-session');

var routes = require('./routes/index');

var app = express();

app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(session({genid: function(req) { return uuid.v4()}, secret:   'XXXXXXXXXXX',
    saveUninitialized: true,
    resave: true}));
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

module.exports = app;

Now assuming you have your Angular files and javascript in the 'public' directory somewhere, you should be able to start up Node with the following command.

node bin/www

And the point your browser at http://localhost:3000 and be in business.

Hope this helps and happy learning.

astreet
  • 163
  • 6