AWS Elastic Beanstalk for Backend

1. Go to AWS Elastic Beanstalk and click Create New Application

2. After App creation, click Create one now in Environments tab

3. Choose Web server environment under Select environment tier for web application with low workloads

4. Fill in environment name, platform and make sure the domain name is available.

5. Add application code by uploading your code located at the bottom of the page.

6. Need to compress the file by going to the main nodejs directory and exclude the node_modules.

7. Check if app health condition under the Dashboard. Click on Health tab or Causes button to check what cause the issue.

8. If the cause of the issue only print out errors with impaired services on all instances and following services are not running: application.

9. Upload and deploy again the revised files. Make sure the app health status is checked. If it is still degraded, check again the error in Health tab.

Note: Sometimes the cause of error is the bcrypt module. Use bcryptjs instead. Install it using npm install --save bcryptjs and replace all instances the bcrypt to bcryptjs in the backend files

10. Copy the EIP to the dashboard or in the Health tab and add it to MongoDB atlas in Network Access > Add Whitelist Entry

AWS S3 for Front End

1. Go to AWS S3 and click on Create Bucket.

2. Go to the root directory of the Angular directory and type in the terminal npm build --prod.

3. Go to the dist/ directory created in the root after the npm build and select all the files under it and drag it to the bucket. (as shown in the screenshot above).

4. Set Block public access to Off.

5. The bucket won't be seen by public unless the Bucket policy is not set.

6. Go to the Permission > Bucket policy editor tab and paste in the policy suited for your website.

Note: List of the bucket policy documentation is located in this Amazon S3

Connect AWS Elastic Beanstalk to MongoDB

1. Add the MongoDB application code to the Mongoose.connect

Note: MongoDB application code can be found in Cluster > Connect and copy the Connection String

Location: app.js in express js files

mongoose.connect(`mongodb+srv://myapp:${process.env.MONGO_ATLAS_PWD}@myapp-aow0x.mongodb.net/testme?retryWrites=true`)
  .then(() => console.log('DB Connected'))
  .catch(() => console.log('Error in DB connection'))

2. The process.env.MONGO_ATLAS_PWD value is in the nodemon.json in the root file.

Location: / > nodemon.json

{
  "env": {
    "MONGO_ATLAS_PWD": "passWD"
  }
}

Connect AWS S3 to AWS Elastic Beanstalk

1. Locate the backend endpoint in Amazon Elastic Beanstalk app at the top of the page. See the URL link. Add it in the Angular environments

environment.prod.ts or environment.ts

export const environment = {
  production: true,
  BACKEND_ENDPOINT: 'http://myapp.ap-southeast-1.elasticbeanstalk.com'
};

2. Make use to replace the local endpoint to the environment backend endpoint

app.service.ts

addFormItem(formItem) {
  this.http.post<{message: string, formItem: any}>(`${environment.BACKEND_ENDPOINT}/api/formItem`, formItem)
    .subscribe(responseData => {
      this.getItemUpdated.next([...this.blog]);
  });
}