4

I'm new to yeoman and are trying to get a basic yeoman generated angularjs site deployed to elastic beanstalk. At the moment when I deploy I receive a 502: Bad Gateway. I am able to deploy a simple nodejs app to aws with something like

server.js

var http = require("http");

http.createServer(function(request, response) {
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("Hello World");
response.end();
}).listen(process.env.PORT || 8888);

Without specifying the port in the url, this page works fine. Not sure if that is relevant to this issue.

The process for using the yeoman angular generator is pretty standard ie.

yo angular
yo angular:controller testController
..add some directives / views etc..
grunt server -- serves up pages correctly on port 9000
grunt -- which creates the dist folder

At this stage I have a working angularjs app locally, from here I follow the same workflow that deployed the earlier hello world sample correctly ( commit to git repo, provision image with elastic beanstalk cli..etc..). I made a repo based on the contents of the /dist folder and deployed it where I get the 502..

There are 2 leads I have here, firstly I should be listening on Port 80 - although my earlier sample on :8888 worked so I think the next requirement is most relevant, which is A file named server.js in the root directory.

The grunt build output \dist contains:

bower_components
views
styles
scripts
     25e920e4.modules.js
     5e188624.scripts.js
     76c21dca.plugins.js

So I'm not sure about the next step. I noticed the app.js is not a part of the dist output but now I have these 3 new script js files. What do I need to configure to make the nodejs container serve up this new structure?

Here's what the original app.js

'use strict';

angular.module('nodealphaApp', [])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

Let me know if I can provide more info

Cheers!

MikeW
  • 4,749
  • 9
  • 42
  • 83

2 Answers2

1

I had the same exact problem! They really want you to use grunt buildcontrol but there is no option for AWS. grunt buildcontrol pushes to a remote, which is not how Elastic Beanstalk deploys.

When you type eb deploy, it will deploy everything within the .git directory, not only your dist/ directory. My work-around was to create a local git repository within dist/.

  1. Remove any Elastic Beanstalk files in the repo. FYI, they're hidden.
  2. Using the terminal, cd dist/ from the project's root folder.
  3. Run git init to create a local git repo.
  4. Make an initial commit, because dist/ has always been .gitignore-d.
  5. Run eb init, eb create, eb deploy as normal within dist/.
  6. Set your environmental variables, if you need them; your app doesn't.
  7. eb open, with your fingers crossed.
Adam
  • 2,027
  • 1
  • 16
  • 27
  • So either I write my own little eb config files where I run the commands that I need or I have a build server or something like bitbucket pipelines to first build my app and deploy to eb afterwards. I think the prefered option is building first and than deploying it to eb. – EDREP May 15 '17 at 08:59
0

Here is an example of a Angular Nodejs template: https://github.com/joshdmiller/ng-boilerplate

Maybe you should check your configuration file of Grunt if the port matches. In your Gruntfile.js you will have port 9000 and in the Nodejs code you're listening on 8888. So change one of the two so they have the same port.

Take a look at:

grunt.registerTask('server', function (target) {

it will run some tasks and in one of the tasks ('open' perhaps) a port number from the configuration of Grunt will be used. See

  grunt.initConfig({ ...

I hope this will help you.

Stofkn
  • 1,428
  • 16
  • 24