angularjs应用web.js结构部署在heroku上 [英] angularjs app web.js structure to deploy on heroku

问题描述

我几周来一直在为这个部署而苦苦挣扎，但没有成功。
我的应用程序在本地运行，我运行 grunt serve 以及 node backend / app.js ，不过，我试图按照

I have been struggling with this deployment for weeks now, but no success. For my app to run locally, I run grunt serve and also node backend/app.js , however, I am trying to follow the way it was deployed here as an example. I also tried to follow the instructions here because my app was generated by yeoman.
- How is it possible to run node web.js instead of node backend/app.js as you can see here that the app is linked to the web.js file.

• how to modify the and correct my web.js file? or any other file needed to make run the app.

at the end I run grunt build and then deploy it to heroku, but the app is not working, it runs as if it is running locally without having run the node backend/app.js, apparently this file doesn't get run or included at all. for example when i register or login, nothing happens.

Here is my app folder structure:

app/app.js

'use strict';  
var myApp = angular.module('myApp', ['ui.router', 'ngAnimate', 'satellizer']);
myApp.config(function($urlRouterProvider, $stateProvider, $httpProvider, $authProvider, API_URL){

  $urlRouterProvider.otherwise('/');

  $stateProvider

    .state('main', {
      url: '/',
      templateUrl: '/views/main.html'
    })
    .state('register', {
      url: '/register',
      templateUrl: '/views/register.html',
      controller: 'RegisterCtrl'
    })
    .state('login', {
      url: '/login',
      templateUrl: '/views/login.html',
      controller: 'LoginCtrl'
    })
    .state('projectlist', {
      url: '/projectlist',
      templateUrl: '/views/projectlist.html',
      controller: 'ProjectlistCtrl'
    })
    .state('logout', {
      url: '/logout',
      controller: 'LogoutCtrl'
    });
  $authProvider.loginUrl = API_URL + 'login'
  $authProvider.signupUrl = API_URL + 'register'
  $httpProvider.interceptors.push('authInterceptor')
})
  .constant('API_URL', 'http://localhost:3000/')

backend/app.js

var express = require ('express');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var jwt = require('jwt-simple');
var passport = require('passport');
var LocalStrategy = require('./services/localStrategy.js');
var projectlist = require('./services/projectlist.js');
var createSendToken = require('./services/jwt.js');
var emailVerification = require('./services/emailVerification.js');

var app = express();

app.use(bodyParser.json());
app.use(passport.initialize());
passport.serializeUser(function (user, done) {
  done(null, user.id);
});

app.use(function (req,res,next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

passport.use('local-register', LocalStrategy.register);
passport.use('local-login', LocalStrategy.login);


app.post('/register', passport.authenticate('local-register'), function (req, res) {
  emailVerification.send(req.user.email);
  createSendToken(req.user, res);
});
app.get('/auth/verifyEmail', emailVerification.handler);


//using passport
app.post('/login', passport.authenticate('local-login'), function (req, res) {
  createSendToken(req.user, res);
});

app.get('/projectlist', projectlist);

var server = app.listen(process.env.PORT || 3000, function () {
  console.log('api listening on', server.address().port);
});

mongoose.connect('mongodb://username:[e-mail]:53845/myapp');

./web.js

var gzippo = require('gzippo');
var express = require('express');
var morgan = require('morgan');
var app = express();

app.use(morgan('dev'));

var apiFiles = './backend';
var wwwFiles = './app';

app.use(gzippo.staticGzip("" + __dirname + "/dist"));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.use(express.static(__dirname));

app.get('/backend', function(req, res) {
  res.sendfile('/api')
});

var server = app.listen(process.env.PORT || 3000, function () {
  console.log('api listening on', server.address().port);
});

procfile

web: node web.js

package.json

{
  "name": "potsdamapplication",
  "private": true,
  "devDependencies": {
    "autoprefixer-core": "^5.2.1",
    "grunt": "^0.4.5",
    "grunt-angular-templates": "^0.5.7",
 .... (all other grunt dependencies)
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "description": "This project is generated with [yo angular generator](https://github.com/yeoman/generator-angular) version 0.15.1.",
  "version": "1.0.0",
  "main": "Gruntfile.js",
  "directories": {
    "test": "test"
  },
  "dependencies": {
    "bcrypt-nodejs": "0.0.3",
    "body-parser": "^1.15.2",
     .... (all other dependencies)
  },
  "scripts": {
    "start": "nf start",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

bower.json

{
  "name": "mytestapplication",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.4.0",
    "bootstrap": "^3.2.0",
    "angular-ui-router": "^0.3.1",
    "animate.css": "^3.5.2",
    "angular-animate": "^1.5.8",
    "satellizer": "^0.15.4",
    "moment": "^2.14.1"
  },
  "devDependencies": {
    "angular-mocks": "^1.4.0"
  },
  "appPath": "app",
  "moduleName": "test2App",
  "overrides": {
    "bootstrap": {
      "main": [
        "less/bootstrap.less",
        "dist/css/bootstrap.css",
        "dist/js/bootstrap.js"
      ]
    }
  },
  "homepage": "https://github.com/myusername/myapp",
  "description": "my application",
  "main": "app/index.html",
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

and here is gruntfile.js file link.

the maximum bounty will be given to the best answer in two days. PROMISED

解决方案

Maybe this hint helps: for installing stuff via bower you need to add a buildpack:

heroku config:set BUILDPACK_URL='git://github.com/qnyp/heroku-buildpack-ruby-bower.git#run-bower'

I did this once for a Ruby on Rails with AngularJS demo app, find the full story here: https://github.com/stiebitzhofer/rails-angular-bower-heroku

这篇关于angularjs应用web.js结构部署在heroku上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！