npm install -g @angular/cli
ng new serverlesstodo
cd serverlesstodo npm i -S aws-amplify aws-amplify-angular npm install -g awsmobile-cliNext configure the AWS access, it will create necessary configuration files to communicate with your AWS environment.
awsmobile configureYou will be asked 3 questions:
- accessKeyId 2) secretAccessKey 3) region
Do this configuration setting once in your computer and you are good to go.
Initialise Mobile Hub Project.
Login to your AWS account and go to the Mobile Hub service, and create a new project.
Create Project : serverlessdto
Select Platform: JS
Now go to your Angular project and run the given awsmobile init command.
Add aws config files into the src\app folder.
Add Script for Global in head section of index.html
<script>
if (global === undefined) {
var global = window;
}
</script>📃index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Serverlesstodo</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<script>
if (global === undefined) {
var global = window;
}
</script>
</head>
<body>
<app-root></app-root>
</body>
</html>Next go to tsconfig.app.json file and include node for the types in compilerOptions field.
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": ["node"] // node is required
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}App.component.html
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<hr class="my-4" />
<p class="lead">{{message}}</p>
</div>App.Component.ts
import { Component, OnInit } from '@angular/core';
import awsmobile from './aws-exports';
import Amplify from 'aws-amplify';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
message = '';
ngOnInit() {
Amplify.configure(awsmobile);
console.log('Amplify Initialised');
this.message = 'Amplify Initialised';
}
}Now run ng serve -o you should see Amplify Initialized message.
As we have a basic Angular app working now, we will be creating a simple backend API which will pull the test ToDo data for the display.
We first need to activate the API for our Mobile Hub project, run the awsmobile features command and turn on the cloud-api feature.
Run AwsMobile Features
Run awsmobile features & press space to select
cloud-api option.
Once the cloud-api is enabled, then we will run the awsmobile push command, and this will synchronise the changes we have made on local project to the Mobile Hub project on AWS.
Now run AWSMobile Push
awsmobile push
It will initialise and deploy a basic API with name sampleCloudApi with endpoints like /items/ and /items/{id}.
Also the new Lambda will be available in the code so that we can write our logic.
Be patient it may take some time.
See your backend folder structure
Update Items End Point
awsmobilejs\backend\cloud-api\sampleLambda\app.js
app.get('/items', function(req, res) {
// Add your code here
// Return the API Gateway event and query string parameters for example
const todos = [
{ id: 1, content: 'Prepare for the call with Mike @ 8 PM', status: false },
{ id: 2, content: 'Call with Mike @ 9 PM', status: false }
];
res.json(todos);
});src\app\app.component.ts
import { Component, OnInit } from '@angular/core';
import awsmobile from './aws-exports';
import Amplify, { API } from 'aws-amplify';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
todos = [];
loading = false;
ngOnInit() {
Amplify.configure(awsmobile);
this.loading = true;
API.get('sampleCloudApi', '/items', {}).then(data => {
this.loading = false;
this.todos = data;
});
}
}src\app\app.component.html
<div class="container">
<div class="row">
<div class="col-12 jumbotron">
<h1 class="display-4">Your ToDos</h1>
</div>
<div class="col-12" *ngIf="loading">
Loading ToDos ...
</div>
<div class="col-12">
<ul class="list-group list-group-flush">
<li class="list-group-item" *ngFor="let todo of todos">
{{todo.content}}
<span class="badge badge-primary pull-right" *ngIf="!todo.status"
>Pending</span
>
<span class="badge badge-success pull-right" *ngIf="todo.status"
>Completed</span
>
</li>
</ul>
</div>
</div>
</div>👉Run Your App Locally
go to backen packagejson and add start script.
awsmobilejs\backend\cloud-api\sampleLambda\package.json
"scripts": {
"start": "node app.js"
},Next open new terminal and run server by running below command
npm start