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".

  • 1,916