.NET

29 dez, 2015

ASP.NET 5 e o .NET Execution Environment (DNX)

Publicidade

Este artigo foi publicado em 22/06/2015. Por ter sido considerado um dos melhores artigos de 2015, foi republicado hoje.

O .NET permite executar uma aplicação em qualquer ambiente Windows, Mac OSX ou Linux, o que chamamos de cross-platform e, para isso, você precisa de um SDK chamado .NET Execution Environment (DNX), que é um SDK e um runtime contendo tudo o que é preciso para rodar .NET. O objetivo deste artigo é criar uma aplicação ASP.NET vazia no VS 2015 e usar o DNX para montar o ambiente para executar a aplicação via linha de comando.

O pré-requisito para este artigo é qualquer versão do Visual Studio 2015, eu usei a versão Enterprise 2015 RC, versão 14.0.22823.1 D14REL.

O uso do DNX permite rodar aplicações de Console e ASP.NET em cross-platform com os frameworks .NET, Core e Mono, contendo todo o host e o gerenciamento do ponto de entrada. A vantagem é que você pode criar uma aplicação em qualquer plataforma e rodar em outra, isso sem mudar nada no seu código, apenas as diretivas do servidor.

Projeto ASP.NET 5 Empty

Vamos começar com a criação do projeto. Abra o VS 2015, selecione File/New Project (Ctrl + Shift + N). Na janela aberta, selecione a linguagem Visual C#, a categoria Web e, nos templates, ASP.NET Web Application. O nome do projeto será ASP5_DNX, conforme a figura 1.

Figura 1 – Novo projeto.
Figura 1 – Novo projeto.

Clique no botão OK e, na janela aberta, selecione Empty, conforme a figura 2. Esse template cria apenas o projeto com os frameworks, não há nenhum arquivo relacionado ao template de Web Site, que usa o padrão MVC.

Figura 2 – Template do projeto Empty.
Figura 2 – Template do projeto Empty.

Clique no botão OK e aguarde a criação do projeto. Veja na figura 3 que em References há dois frameworks, sendo o DNX 4.5.1 que contém o .NET completo e o DNX Core 5.0 que é um framework enxuto.

Figura 3 – Estrutura do projeto.
Figura 3 – Estrutura do projeto.

Quando há uma solicitação no servidor pela primeira vez, tudo inicia no arquivo Startup.cs. Portanto, abra e veja que temos dois métodos:

  • ConfigureServices, que deve conter a lista de serviços (coleção IServiceCollection) da aplicação – por exemplo, configurações no AppSettings, Sql Server, Entity Framework, Identity etc., ou seja, você adiciona os serviços sob demanda, conforme os requisitos da aplicação.
  • Configure, que recebe o IApplicationBuilder, o qual você pode configurar o ambiente, página de erro, uso de arquivos estáticos, setar cookies, definir autenticações Windows, facebook, goggle, rotas para o ASP.NET MVC.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.Builder;
using Microsoft.AspNet.Http;
using Microsoft.Framework.DependencyInjection;

namespace ASP5_DNX
{
    public class Startup
    {
        // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
        }

        public void Configure(IApplicationBuilder app)
        {
            app.Run(async (context) =>
            {
                await context.Response.WriteAsync("Hello World!");
            });
        }
    }
}

Vamos entender o funcionamento da aplicação. No método Configure,  adicione a linha “throw new Exception(“MVP virtual conference”);” dentro do app.Run.

public void Configure(IApplicationBuilder app)
{
    app.Run(async (context) =>
    {
        throw new Exception("MVP virtual conference");
        await context.Response.WriteAsync("Hello World!");
    });
}

Pressione F5 para executar a aplicação no browser e, conforme a figura 4, veja que a mensagem de erro foi exibida com o texto “MVP virtual conference”.

Figura 4 – Erro da aplicação.
Figura 4 – Erro da aplicação.

Mas você deve estar pensando que o erro deveria ser mostrado numa página de erro, afinal é uma aplicação ASP.NET, certo? Não, pois até agora não adicionamos nenhuma referência ao namespace de diagnóstico. Então, abra o arquivo project.cs e adicione a seguinte referência “Microsoft.AspNet.Diagnostics” no grupo de “dependencies”. E, para esclarecimento, isso se chama injeção de dependência – você vai adicionando blocos de referências de acordo com a necessidade da aplicação. No momento da digitação do Microsoft, você já deve ter notado que o Intellisense o ajuda no preenchimento, tanto no nome do namespace quanto na versão disponível.

"dependencies": {
    "Microsoft.AspNet.Server.IIS": "1.0.0-beta4",
    "Microsoft.AspNet.Server.WebListener": "1.0.0-beta4",
    "Microsoft.AspNet.Diagnostics": "1.0.0-beta4"
  }

Salve o arquivo e abra a lista de referências no References do Solution Explorer. Conforme a figura 5, note que esse Diagnostics foi adicionado aos dois frameworks. Além disso, vale ressaltar que as referências são as mínimas para executar o projeto. Agora, sim, você tem uma visão melhor que basta adicionar os blocos de namespaces de que necessita na lista de dependências, e pronto.

Figura 5 – Referências do projeto.
Figura 5 – Referências do projeto.

Em seguida, adicione a linha de código “app.UseErrorPage()” no início do método Configure, o qual captura Exceptions geradas por chamadas assíncronas ou síncronas e gera o HTML com todas as informações necessárias.

public void Configure(IApplicationBuilder app)
{
    app.UseErrorPage();

    app.Run(async (context) =>
    {
        throw new Exception("MVP virtual conference");
        await context.Response.WriteAsync("Hello World!");
    });
}

Execute o projeto no browser novamente e veja que a mensagem de erro mudou, agora contém o HTML com as informações de erro, conforme a figura 6. Claro que até aqui a página está praticamente em branco, porque não há nada.

Figura 5 – Referências do projeto.
Figura 5 – Referências do projeto.

 

Execução com o DNX

Na estrutura do projeto temos o folder wwwroot, que é o que chamamos de ponto de entrada do site. Basta abrir o arquivo project.cs e localizar a linha “webroot”: “wwwroot”. E, como não temos nenhuma página a ser executada, no Solution Explorer, clique com o botão direito em wwwroot, selecione Add / New Item / HTML Page chamada OlaMundo.html. Veja o código completo a seguir:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    Olá mundo ASP.NET 5!
</body>
</html>

Salve o arquivo html. Agora é preciso fazermos um ajuste no Startup.cs, comente a linha do throw que inserimos anteriormente. A partir de agora, não execute mais essa aplicação pelo VS 2015 com o F5, pois usaremos o DNX via comando de prompt.

Para facilitar a digitação, abra este projeto na pasta onde ele foi criado, ou seja, dê um clique com o botão direito no Solution Explorer e selecione Open folder in File Explorer. Localize o endereço que contém a pasta com o nome do projeto dentro da pasta SRC (source), no meu caso, C:\ProjetosASPNET5\ASP5_DNX\src\ASP5_DNX, conforme a figura 7. Copie esse endereço.

Figura 7 – Projeto dentro da pasta SRC.
Figura 7 – Projeto dentro da pasta SRC.

Em seguida, abra o Comando de Prompt como Administrador e digite cd\+endereço completo copiado na memória (você pode usar o clique com o botão direito/Colar). O prompt mostrará o local atual, sendo: c:\ProjetosASPNET5\ASP5_DNX\src\ASP5_DNX. Em seguida, digite o comando “dnx . web”. Aguarde alguns segundos para o DNX montar o ambiente e, pronto, você verá uma mensagem “Started”, conforme a figura 8, ou seja, está pronto para execução.

Figura 8 – Ambiente pronto para execução.
Figura 8 – Ambiente pronto para execução.

E qual o endereço a ser usado no browser? É simples, no VS abra o arquivo project.cs e localize a declaração “web” no grupo “commands”. Note que aponta para http://localhost:5000.

"commands": {
    "web": "Microsoft.AspNet.Hosting --server Microsoft.AspNet.Server.WebListener --server.urls http://localhost:5000"

Então, abra o browser e digite este endereço: http://localhost:5000. Veja na figura 9 que o resultado não é o esperado, ou seja, a nossa página HTML criada, e sim a mensagem “Hello World!”, que está declarada no Startup.cs “await context.Response.WriteAsync(“Hello World!”);”.

Figura 9 – Execução no Browser.
Figura 9 – Execução no Browser.

Isso está errado? Não, o que precisamos fazer é informar ao ASP.NET 5 que temos uma página estática HTML, e pronto. Lembre-se de que comentei sobre o ponto de entrada (wwwroot), e até agora no projeto não dissemos que há páginas estáticas, então, o framework não sabe que existe uma página que ele deverá executar. Vamos aos ajustes. No arquivo Project.cs, adicione a declaração do “Microsoft.AspNet.StaticFiles” nas dependências. Salve esse arquivo.

"dependencies": {
  "Microsoft.AspNet.Server.IIS": "1.0.0-beta4",
  "Microsoft.AspNet.Server.WebListener": "1.0.0-beta4",
  "Microsoft.AspNet.Diagnostics": "1.0.0-beta4",
  "Microsoft.AspNet.StaticFiles": "1.0.0-beta4"
},

O último ajuste é informar no método Configure do arquivo Startup.cs que a aplicação usará arquivos estáticos. Para isso, adicione o código app.UseStaticFiles(), conforme a seguir.

public void Configure(IApplicationBuilder app)
{
    app.UseErrorPage();
    app.UseStaticFiles();

    app.Run(async (context) =>
    {
        //throw new Exception("MVP virtual conference");
        await context.Response.WriteAsync("Hello World!");
    });
}

Salve o arquivo, abra novamente a janela do Comando de Prompt, dê um ENTER para interromper a execução. Digite novamente “dnx . web” para iniciar o ambiente do servidor web e aguarde a mensagem “Started”. Agora, basta abrir o browser e digitar o nome da sua página com o endereço completo, sendo: http://localhost:5000/olamundo.html, conforme a figura 10.

Figura 10 – Execução da aplicação.
Figura 10 – Execução da aplicação.

Observe que o VS 2015 é apenas o editor de códigos. Adicione uma nova página chamada ExecucaoViaDNX.html com o seguinte conteúdo.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    Esta página foi executada via DNX!!
</body>
</html>

Salve a página, e no navegador digite o endereço completo, sendo: http://localhost:5000/ExecucaoViaDNX.html. Veja na figura 11 que a página mostra o respectivo conteúdo, mas o interessante é que no VS 2015 nem compilamos nada, apenas o usamos como editor.

figura-11
Figura 11 – Nova página no browser.

Existem outros editores de códigos, fique à vontade para usá-los, seja o notepad, o Sublime, o novo Visual Studio Code, que é o VS para mundo não Microsoft.

Conclusão

Esta nova maneira de criar aplicações de Console ou ASP.NET 5 do tipo cross-platform deixa qualquer desenvolvedor ao alcance da plataforma .NET, com diversas ferramentas de edição e ambientes de execução.

Agradeço a oportunidade de poder compartilhar o conhecimento deste artigo. Qualquer dúvida e preparação de times de desenvolvimento, por favor me contate.