Loiane Groner
Java + JavaScript/HTML5 developer • Web/Angular GDE • Microsoft MVP • author @PacktPub More decks available at: https://www.slideshare.net/loianeg
JavaScript Moderno na Nuvem
Deploying Angular to Azure:
Aplicação MEAN com Angular, TypeScript e Azure Cosmos DB
#AzureOpenDev
Loiane Groner
Java, JavaScript + HTML5, Sencha, Cordova/Ionic, Angular, RxJS + all things reactive
I have no idea
what I'm doing
Angular
MEAN
Cosmos DB
Deploy
Extensões Angular
Extensões TypeScript
Extensões Azure + Docker para Node
Angular
Angular CLI
MEAN
MEAN app
proxy.conf.json
{
"/api": {
"target": "http://localhost:3000",
"secure": false
},
"logLevel": "debug"
}
package.json
"scripts": {
"ng": "ng",
"start": "node src/server/index.js",
"start-ng": "ng serve --proxy-config proxy.conf.json",
"build": "ng build --prod"
}
Show me the
VS Code!
@Controller('contacts')
export class ContactsController {
constructor(private readonly contactsService: ContactsService) {}
@Get()
async findAll(): Promise<Contact[]> {
return this.contactsService.findAll();
}
@Get(':id')
async getById(@Res() res: Response, @Param('id') id: string) {
const contact = await this.contactsService.findById(id);
res.status(HttpStatus.OK).json(contact);
}
@Post()
async create(@Body() contact: CreateContactDto): Promise<Contact> {
return this.contactsService.create(contact);
}
@Delete(':id')
public async delete(@Res() res: Response, @Param('id') id: string) {
const hero = await this.contactsService.remove(id);
if (hero) {
res.status(HttpStatus.NO_CONTENT).send();
} else {
throw new NotFoundException('');
}
}
}Azure Cosmos DB
Show me the
VS Code!
Azure Functions
{
"bindings": [
{
"authLevel": "anonymous",
"type": "httpTrigger",
"direction": "in",
"name": "req",
"methods": [
"get"
]
},
{
"type": "http",
"direction": "out",
"name": "res"
},
{
"type": "documentDB",
"name": "contacts",
"databaseName": "admin",
"collectionName": "contacts",
"connection": "angular-cosmosdb-functions_DOCUMENTDB",
"direction": "out"
}
],
"disabled": false
}function.json
module.exports = function(context, req, contacts) {
context.log('JavaScript HTTP trigger function.');
context.res = {
body: context.bindings.contacts
};
context.done();
};
index.js
Deploy
Show me the
VS Code!
Obrigada!
Referências + Links
JavaScript Moderno na Nuvem
By Loiane Groner
JavaScript Moderno na Nuvem
O JavaScript está presente no browser, no servidor, no banco de dados e até na plataforma mobile. JavaScript já deixou de ser uma linguagem e se tornou um ecossistema. Nessa palestra vamos aprender como podemos usar frameworks modernos como Angular para desenvolver um projeto MEAN (com Angular v5+), como usar TypeScript no lado do Node.js e fazer deploy do projeto na nuvem, usando banco de dados serverless (Cosmos DB) ou até mesmo uma aplicação frontend com código serverless (Azure Functions). E no final, vamos usar Docker para criar uma imagem da nossa aplicação, debugar a imagem e preparar a imagem para produção para deploy no Azure numa máquina Linux. Tudo isso sem sair do nosso editor favorito, o VSCode! Palestra com "live coding".
