Deploy Angular AWS Beanstalk using code pipeline

Angular default generated app git
https://github.com/thallapalli/angular-app.git


Select code pipleline servive create as below






Click Next
Select Source provider as GitHub
Click on Connect to GitHub
I have already configured my github so screen looks below.
if we are settingup for the first time just selct default options .just provide your github url (https://github.com/thallapalli/angular-app.git)


click Next
select Build provider as AWS code build and Under project name click on Create Project

provide code build project name
angular-app-codebuild
Operating system as :Ubuntu
make sure to add buildspec.yml file to github root directory

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 10
  pre_build:
    commands:
      - echo Installing source NPM dependencies...
      - npm cache clean --force
      - npm install -g @angular/cli
      - npm install --save-dev @angular-devkit/build-angular

  build:
    commands:
      - echo Build started on `date`
      - ng build --prod
  post_build:
     commands:
     - echo Build completed on `date`
   
artifacts:
  files:
      - '**/*'
  base-directory: dist/angular-crud-client
  discard-paths: yes

Runtime standard
Image select latest
Image version select latest
Keep rest all default
Click on continue to pipeline
Now you will redirected to codepipleline project
click Next
Deploy provider select Beanstalk
Select Application name and  env name
review create pipleline
now you will be redirected to codepiple  and starts
just watchout code will be deployed beanstalk env.


Troubleshooting from here
I see that  below error is appeared


so added server.js & package.json to src/asset folders
server.js content is below

const express = require('express');
const http = require('http');

const app = express();

const port = process.env.PORT || 3001;

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

const server = http.createServer(app);

server.listen(port, ()=> console.log("Running....ss....."));

your package.json is one which created underroot folder your app.copy package.json to src/asset
and move  "@angular/cli": "~8.3.21" from devDependencies to dependencies

I committed above two files to github . under src/asset folder

As soon as you commit files your codepiple starts building
watchout for codebuild
this time my application got deployed but I got 503 error when i click URL

Lets watch servers logs


Now I see below error in logs
/var/log/nodejs/nodejs.log
-------------------------------------
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/var/app/current/server.js:1:17)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
internal/modules/cjs/loader.js:638
    throw err;
I searched for the above error google ,most of the search results suggest to install npm express
so  execute below command


C:\Users\13033\git\angular-app>npm install express --save
commit code
there are two files updated package.json and package.lock file .I commited two files
my codepipeline picked above files started building
after deployments completes my server still  bad state ,so i again looked at servers logs 

I still see  below error 
/var/log/nodejs/nodejs.log
-------------------------------------
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/var/app/current/server.js:1:17)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module 'express'


So I stared looking beanstalk documentation in aws.
beanstalk picks libraries from package.json which is under asset folder
so added "express": "^4.17.1" to devdepndencies




commit code
as soon as i copied express": "^4.17.1  in dependencies section ,it is resolved Error: Cannot find module 'express'



Takeouts:
1 : instruct beanstalk server to run node js server .hence server.js added
2 add server.js and package.json to asset folder .while ng build start .these two files will be copied under dist folder
3. instruct  beanstalk to  all dependencies are added  in package.json. in my case error was about express.so i moved   "express": "^4.17.1" to devdependencies



Comments