Visual Studio Code e ASP.NET 5 no Linux Ubuntu

FacebookTwitterGoogle+

Com o lançamento do CoreCLR e do ASP.NET 5, a Microsoft tornou o trabalho de rodar aplicações .NET em ambientes não Microsoft algo relativamente simples. O projeto Mono (que já existe há um bom tempo para esse porte) está diretamente suportado pela Microsoft e as oportunidades para quem usa Linux ou Mac melhoraram.

O Visual Studio Code, ambiente de desenvolvimento lançado no Build 2015, é multi-plataforma e oferece bons recursos para quem programa, como Intellisense, navegação e refactoring. Ele não possui todos os recursos do Visual Studio tradicional, mas os que existem ajudam bem. Além disso, para aqueles que gostam de focar no código, o VS Code é uma excelente opção.

No entanto, preparar uma máquina Linux para rodar o .NET pode ser um pouco trabalhoso. Neste post, vou mostrar o passo a passo de como preparar esse ambiente.

Instalando o ASP.NET e o DNX no Ubuntu

O primeiro passo é instalar o Mono. É importante que a versão seja igual ou superior a 4.0.1. Para isso, abra o terminal no Ubuntu e execute os seguintes comandos:

(Dica: pressione CTRL-ALT-T para abrir o terminal)

sudo apt-key adv –keyserver keyserver.ubuntu.com –recv-keys 3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF
echo “deb
http://download.mono-project.com/repo/debian wheezy main” | sudo tee /etc/apt/sources.list.d/mono-xamarin.list
sudo apt-get update
sudo apt-get install mono-complete

O download e instalação do mono pode demorar algum tempo.

clip_image001

Ao término da instalação, verifique se a versão correta do Mono foi instalada e tudo está funcionando usando o comando:

mono –version

Instalando o Libuv

O libuv é a plataforma usada pelo KestrelHttpServer que servirá de host para nossas aplicações ASP.NET. Os comandos de instalação estão abaixo:

sudo apt-get install automake libtool curl
curl -sSL
https://github.com/libuv/libuv/archive/v1.4.2.tar.gz | sudo tar zxfv – -C /usr/local/src
cd /usr/local/src/libuv-1.4.2
sudo sh autogen.sh
sudo ./configure
sudo make
sudo make install
sudo rm -rf /usr/local/src/libuv-1.4.2 && cd ~/
sudo ldconfig

Instalando o DNVM

Agora, é a hora de instalar o DNVM (.NET Version Manager). É com ele que gerenciamos as versões do .NET que serão utilizadas no nosso ambiente, seja em Linux, Mac ou Windows.

curl -sSL https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstall.sh | DNX_BRANCH=dev sh && source ~/.dnx/dnvm/dnvm.sh

clip_image002

Se o DNVM foi instalado corretamente, digitar dnvm no terminal deve retornar esse resultado:

clip_image003

Instalando o DNX

O DNX (.NET Execution Enviroment) é o responsável por rodar nossas aplicações .NET, seja ela uma aplicação Console ou Web. Quando usamos o Visual Studio no Windows, ele quem está por trás de uma aplicação vNext.

Quando usamos o comando dnvm list é exibido uma lista das versões do DNX instalado. No meu caso, em uma instalação limpa, nada está instalado:

clip_image004

Então, usamos o comando dnvm upgrade e a versão mais atual do DNX é instalada (atualmente, a 1.0.0-beta4).

clip_image005

Agora, se usarmos o comando dnvm list, essa versão do DNX é exibida e é a ativa.

clip_image006

Para testar se os paths estão corretos, execute o comando dnx e você deve ver algo como abaixo:

clip_image007

Ferramentas adicionais (GIT, Node.js e Yeoman)

O Visual Studio Code não vem com templates para criação de uma aplicação .NET. Por isso, precisamos de algumas ferramentas extras para criar um projeto inicial para gente. O Yeoman é uma ferramenta de Scaffolding que quebra esse galho para gente. Ele roda no Node.js, por isso precisamos dele. Vamos também precisar do GIT para fazer o restore de alguns packages no nosso template do ASP.NET. Então, vamos instala-lo também.

Instalando o GIT

O GIT é bem simples de ser instalado. Basta baixá-lo pelo apt-get do Ubuntu com o comando:

sudo apt-get install git

Instalando o Node.js

Os comandos abaixo, instalam o Node .js no Ubuntu:

curl -sL https://deb.nodesource.com/setup | sudo bash –
sudo apt-get install -y nodejs

clip_image008

Precisamos também instalar o NPM, o gerenciador de pacotes do Node.js.

sudo apt-get install npm

Instalando o Yeoman, Bower e Grunt

Chegou a hora do Yeoman, a nossa ferramenta de scaffolding, que irá criar os templates iniciais para nossos projetos. Para não termos problemas de permissão no momento de executa-los, vamos configurar o NPM para adicionar seus pacotes em uma pasta de nossa propriedade. No meu caso, estou criando uma pasta chamada dev para meus projetos e uma subpasta npm para os pacotes.

mkdir ~/dev

mkdir ~/dev/npm

sudo npm set prefix ~/dev/npm

Se tudo correu bem, o comando sudo npm get prefix deve exibir a sua pasta criada.

clip_image009

Outra coisa que facilitará muito a nossa vida é adicionar o caminho dos pacotes do node no path. Aí você poderá executar o yeoman de qualquer lugar. Para isso, execute o comando:

echo “export PATH=$PATH:$HOME/dev/npm/bin” >> $HOME/.bashrc

e reinicie o terminal!

Agora, vamos instalar o yeoman, bower, grunt e gulp:

npm install -g yo bower grunt-cli gulp

Instalando o VS Code no Linux

Chegou a hora do VS Code. Você pode baixá-lo em https://code.visualstudio.com/ ou executar a instalação via terminal também.

clip_image010

Para instala-lo via terminal, execute os comandos abaixo:

sudo add-apt-repository ppa:ubuntu-desktop/ubuntu-make
sudo apt-get update
sudo apt-get install ubuntu-make
umake web visual-studio-code

clip_image011

clip_image012

clip_image013

Depois de tudo isso, olha ele na barra de ferramentas do Ubuntu:

clip_image014

Você também pode criar um link para abrir o code de qualquer pasta com o comando:

sudo ln -s /<path de instalação>/Code /usr/local/bin/code

No meu caso, o code está no folder ~/tools/web/visual-studio/Code, portanto:

sudo ln -s ~/tools/web/visual-studio/Code /usr/local/bin/code

Desta forma, estando na pasta do projeto, para abrir o VS Code basta digitar:

code .

Adicionando caminhos para o NuGet

Para conseguirmos baixar os pacotes das aplicações .NET que construiremos, precisamos adicionar os caminhos para que o NuGet possa encontrar os pacotes. Para isso, precisamos criar um arquivo chamado NuGet.config na pasta ~/.config/NuGet com o seguinte conteúdo:

<?xml version=”1.0″ encoding=”utf-8″?>
<configuration>
<packageSources>
<add key=”AspNetVNext” value=”https://www.myget.org/F/aspnetvnext/api/v2/” />
<add key=”nuget.org” value=”https://www.nuget.org/api/v2/” />
</packageSources>
<disabledPackageSources />
</configuration>

Vamos criar esse arquivo com o próprio Code. Então, abra-o pela barra de ferramentas do Ubuntu ou digitando code no terminal. Aí crie um novo arquivo, cole o conteúdo do XML acima e salve na pasta ~/.config/NuGet/NuGet.config.

clip_image015

clip_image016

Yeoman template para ASP.NET 5

O Yeoman possui muitos templates. Você pode encontra-los nesse link. Nós utilizaremos o template aspnet. Então, vamos instala-lo com o comando:

npm install generator-aspnet

Criando nosso projeto

Se você chegou até aqui, pode ficar contente: seu ambiente está configurado 😉

Então, chegou a hora de criarmos nossa aplicação ASP.NET.

Para isso, vou criar uma pasta ~/projects e uma subpasta ~/projects/aspnet-ubuntu que será o local onde ficará nossa aplicação

mkdir ~/projects
mkdir ~/projects/aspnet-ubuntu
cd ~/projects/aspnet-ubuntu

Nessa pasta, vamos criar um template aspnet usando o Yeoman. Execute o comando:

yo aspnet

Selecione Web Application:

clip_image017

Dê um nome para a sua aplicação. A minha eu chamei de web:

clip_image018

Esse é o resultado que você verá após a criação do template:

clip_image019

Agora, entre na pasta criada e siga os comandos sugeridos (no caso, vamos usar o dnu restore para restaurar os pacotes NuGet)

cd web
dnu restore

clip_image020

Se você quiser rodar sua aplicação depois da restauração, use o comando dnx . kestrel estando dentro da pasta web (a que possui o arquivo project.json). Mas, antes, vamos abrir nosso projeto no Code.

Abrindo o projeto no Visual Studio Code

Via terminal, se você estiver na pasta do projeto e criou o link conforme explicado anteriormente, basta digitar:

code .

Você também pode abrir o VS Code pela interface do Ubuntu. Mas nesse caso, precisa abrir o Folder de seu projeto em File -> Open Folder. O meu projeto está nessa pasta: /home/heber/projects/aspnet-ubuntu/web

clip_image021

Você pode executar muitos comandos no VS Code abrindo o Command Pallete, apertando CTRL-P. No Windows é possível mandar executar sua aplicação por aí digitando dnx web. Mas essa função ainda não está disponível no Linux. Então, para rodar sua aplicação, entre no terminal, confira se está na pasta do seu projeto (onde se encontra o project.json) e execute o comando:

dnx . kestrel

clip_image022

Uau!!! Está rodando!!!

Bom, então confira abrindo o navegador e acessando o endereço http://localhost:5000

clip_image023

(Dica: esse caminho, localhost:5000, está configurado no arquivo project.json, na seção commands, item kestrel).

Ufa! Deu trabalho! Mas o ambiente está configurado. Agora, os novos projetos você pode criar usando o Yeoman e codificando no VS Code.

Um abraço.

FacebookTwitterGoogle+