Многие веб-разработчики совершенно не знакомы со всеми возможностями бесплатной версии Visual Studio Express. А ведь даже в бесплатном виде VS Express хороша. Давайте посмотрим, начиная с самого процесса установки, на то, что доступно в Visual Studio Express.
Для тех, кто предпочитает видео-руководства, материал доступен по следующей
ссылке.
Установка Visual Studio 2013 Express Edition
Прежде всего вам необходимо зайти на сайт Visual Studio 2013 Express: http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx
Здесь представлены различные варианты Visual Studio. Выбор соответствующей версии зависит от того, что вы собираетесь делать.
Для веб разработчиков выберем Express 2013 for the Web: http://www.visualstudio.com/downloads/download-visual-studio-vs#d-express-web
Поддерживаемые операционные системы:
- Windows 7 SP1 (x86 and x64)
- Windows 8 (x86 and x64)
- Windows 8.1 (x86 and x64)
- Windows Server 2008 R2 SP1 (x64)
- Windows Server 2012 (x64)
- Windows Server 2012 R2 (x64)
Для установки вам потребуется чуть больше 1.17 Гб места на жестком диске:
![*](/user_img/150301125158/26354faba7784d258391e6bae64c18dc_mini_oszone.png)
Увеличить
Как только установка завершится, вы сможете запустить Visual Studio 2013 Express и приступить к работе:
![*](/user_img/150301125158/nm27ezi2k4k3jufngb3y5f-x_mini_oszone.png)
Увеличить
Создаем фронтэнд веб-сайта с нуля
Одним из основных этапов создания веб-сайта является настройка веб- сервера для публикации файлов вашего сайта.
Настроить веб сервер с Visual Studio 2013 Express очень просто. Необходимо создать папку и указать ее в File=> Open Web Site:
![*](/user_img/150301125158/hl-8y3f6n5in_k53iml-8l07.png)
![*](/user_img/150301125158/h1e_mfzccczrnygcfxg4_y12_mini_oszone.png)
Увеличить
Visual Studio автоматически создаст веб-сервер в указанной папке. Обратите внимание, что вы так же можете указать локальный сервер IIS (Internet Information Server) или FTP. Нет необходимости отдельно устанавливать веб — сервер, Tomcat, node или что – то еще.
Теперь, допустим, я хочу добавить в проект обычный HTML файл. Для того чтобы это сделать, правой кнопкой мыши я нажимаю на свой сайт в обозревателе решений и выбираю Add => New Item => Html Page:
![*](/user_img/150301125158/sn6q_3kae94h5d39i_2vgxx1_mini_oszone.png)
Увеличить
![*](/user_img/150301125158/1odi9szoads4l28cr2dc-kqx_mini_oszone.png)
Увеличить
Очевидно, что Visual Studio поддерживает HTML / CSS / JS файлы, а так же реализует для них подсветку синтаксиса и IntelliSense:
![*](/user_img/150301125158/zi5tx38gc2yeh96aoliuwaw4_mini_oszone.png)
Увеличить
Те же действия успешно произведем с файлом JavaScript:
![*](/user_img/150301125158/1z068jo-ybdfvnt_lo67lpe64_mini_oszone.png)
Увеличить
Для того чтобы добавить ссылку на этот файл со своей HTML страницы, необходимо просто переместить его в обозревателе решений.
И, как я упоминал выше, вы так же получаете все прелести IntelliSense и для JavaScript файла:
![*](/user_img/150301125158/1p_gudt7kg5ybzwl9ecxx3d9i_mini_oszone.png)
Увеличить
С Visual Studio не нужно настраивать веб сервер потому что все уже сделано за разработчика.
Просто нажмите на кнопку
и Visual Studio запустит выбранный браузер (один из установленных на вашем компьютере):
![*](/user_img/150301125158/cwaq2p7kjmadsy4grojb36kc_mini_oszone.png)
Увеличить
Visual Studio самостоятельно создает локальный веб сервер на localhost используя свободный порт (здесь 2013), что довольно удобно для разработчика.
Использовать «Точки остановки» так же просто — для установки точки достаточно кликнуть на полях или использовать F9, а затем запустить отладку:
![*](/user_img/150301125158/8jjb1awy7--67irr0v74m9w_mini_oszone.png)
Увеличить
Также для отладки вашего сайта вам доступно окно переменных, стек вызовов, консоль и многое другое.
Системы управления версиями
Visual Studio Express версии поддерживает взаимодействие как с TFS (Team Foundation Server), так и с Git:
![*](/user_img/150301125158/ee6pjbrteevi5x7vtvl2cdv-_mini_oszone.png)
Увеличить
Вы можете легко клонировать, разветвлять, выполнять или отправлять код в выбранную систему не выходя из IDE.
TypeScript
Возможно вы знаете, что я большой поклонник TypeScript (если нет, то можете прочитать мою статью о том почему мы решили перенести babylon.js с JavaScript на TypeScript )
Хорошие новости заключаются в том, что при установке Visual Studio 2013 Update 2, поддержка TypeScript в Visual Studio добавляется бесплатно.
Теперь вы можете добавить в ваш проект и TypeScript файл:
![*](/user_img/150301125158/1c6n-chsm6bu1jarybis5pbx4_mini_oszone.png)
Увеличить
Очевидно, что для TypeScript также поддерживается IntelliSense и многое другое, например, выпадающий список, предлагающий выбор доступных функций:
![*](/user_img/150301125158/12d5g79y9ris7ae-3mw7ik04t_mini_oszone.png)
Увеличить
Отладка также работает прекрасно — спасибо code map файлам, сгенерированным TypeScript.
Публикация веб-сайта в Azure
Благодаря тесной интеграции среды с Azure разработчик может создать и опубликовать веб-сайт прямо из Visual Studio без необходимости перехода на портал Azure. Также с помощью этих возможностей VS можно выполнять отладку веб-сайта прямо в облаке.
Правой кнопкой мыши нажимаем на сборку проекта в обозревателе решений и выбираем Publish Web Site:
![*](/user_img/150301125158/15pw1fzxeg6egv2_lpgc731wc_mini_oszone.png)
Увеличить
Выбираем публикацию сайта с помощью Microsoft Azure Websites:
![*](/user_img/150301125158/1tnl_1p9pbnfodb6uyf3hni1i_mini_oszone.png)
Увеличить
Авторизуемся и создаем новый экземпляр веб-сайта в Azure:
![*](/user_img/150301125158/c8ftfg-ivyo1iivkocnexye3.png)
В следующем диалоговом окне «Создание веб-сайта в Azure» необходимо будет выбрать ресурсы, которые требуется создать:
![*](/user_img/150301125158/ks5wfxqwx_ytcepvco4q4xa__mini_oszone.png)
Увеличить
После нажатия кнопки «Create» в окне мастера веб-публикации будет представлена возможность проверить подключение, чтобы убедиться, что Visual Studio может подключиться к Azure для развертывания веб-проекта:
![*](/user_img/150301125158/5sirq1yt5rygcozmw6l8hual_mini_oszone.png)
Увеличить
Нажимаем «Publish» и, после успешного развертывания, URL-адрес опубликованного веб-сайта автоматически открывается в браузере, а созданный веб сайт теперь опубликован в облаке и доступен из Интернета:
![*](/user_img/150301125158/1toh1k0l_vyuajxvw950iv3-b_mini_oszone.png)
Увеличить
Заключение
Вы увидели, как быстро можно начать работу с Visual Studio и создать для своего сайта фронтэнд. Описанные в этой статье возможности являются лишь малой толикой того, что можно делать с Visual Studio Express.
Ниже представлен список поддерживаемых файлов:
![*](/user_img/150301125158/1abayovoiodd1qut7snawgozj_mini_oszone.png)
Увеличить
В заключение я хотел бы посоветовать вам дать бесплатной версии шанс и попробовать Visual Studio Express. Вы не разочаруетесь.
Полезные ссылки