AspNetCore.Docs/aspnetcore/client-side/yeoman.md

155 lines
6.2 KiB
Markdown
Raw Normal View History

---
2017-07-01 07:47:15 +08:00
title: Building projects with Yeoman in ASP.NET Core
author: spboyer
description: This article walks through building an ASP.NET Core web application using the Yeoman generator on macOS.
keywords: ASP.NET Core,Yeoman,Cross Platform,yo aspnet
ms.author: spboyer
2016-10-29 01:35:15 +08:00
manager: wpickett
2017-07-11 03:02:22 +08:00
ms.date: 07/05/2017
2016-10-29 01:35:15 +08:00
ms.topic: article
ms.assetid: fda0c2a8-1743-4505-be1a-7f8ceeef8647
2016-11-17 08:24:57 +08:00
ms.technology: aspnet
ms.prod: asp.net-core
uid: client-side/yeoman
2016-10-29 01:35:15 +08:00
---
# Introduction to building projects with Yeoman in ASP.NET Core
2016-10-29 01:35:15 +08:00
[Yeoman](http://yeoman.io/) is a project scaffolding system for creating many kinds of applications. The Yeoman generator for ASP.NET Core contains a variety of project templates for starting a new web, MVC, or console application.
2016-10-29 01:35:15 +08:00
## Install Node.js, npm, and Yeoman
### Prerequisites
Node.js and npm are required for Yeoman. Download from [Node.js](https://nodejs.org/). The installer includes [Node.js](https://nodejs.org/) and [npm](https://www.npmjs.com/). Bower is also required for installing UI frameworks like Bootstrap.
2016-10-29 01:35:15 +08:00
2017-07-11 03:02:22 +08:00
To install Yeoman and Bower, run the following command:
2016-10-29 01:35:15 +08:00
2016-11-18 13:03:07 +08:00
```console
2016-10-29 01:35:15 +08:00
npm install -g yo bower
```
2016-10-29 01:35:15 +08:00
>[!Note]
>If you get the error `npm ERR! Please try running this command again as root/Administrator.` on macOS, run the following command using [sudo](https://developer.apple.com/library/mac/documentation/Darwin/Reference/ManPages/man8/sudo.8.html): `sudo npm install -g yo bower`
2016-10-29 01:35:15 +08:00
From a command prompt, install the ASP.NET generator:
2016-10-29 01:35:15 +08:00
2016-11-18 13:03:07 +08:00
```console
npm install -g generator-aspnet
```
2016-10-29 01:35:15 +08:00
> [!NOTE]
> If you get a permission error, run the command under `sudo` as described above.
The `g` flag installs the generator globally, so that it can be used from any path.
## Create an ASP.NET app
2017-07-11 03:02:22 +08:00
Run the Yeoman-based ASP.NET generator:
2016-10-29 01:35:15 +08:00
2016-11-18 13:03:07 +08:00
```console
2016-10-29 01:35:15 +08:00
yo aspnet
```
2016-10-29 01:35:15 +08:00
The generator displays a menu. Arrow down to the **Web Application Basic [without Membership and Authorization]** project and tap **Enter**:
2016-10-29 01:35:15 +08:00
![Command window: What type of application do you want to create? Menu of application types](yeoman/_static/yeoman-yo-aspnet.png)
2016-10-29 01:35:15 +08:00
Select Bootstrap as the UI Framework and tap **Enter**.
Use "**MyWebApp**" for the app name and then tap **Enter**.
2016-10-29 01:35:15 +08:00
Yeoman will scaffold the project and its supporting files. Suggested next steps are also provided in the form of commands.
![Command window: What's the name of your ASP.NET application? Command prompt](yeoman/_static/yeoman-yo-aspnet-created.png)
2016-10-29 01:35:15 +08:00
The [ASP.NET generator](https://www.npmjs.com/package/generator-aspnet) creates ASP.NET Core projects that can be loaded into Visual Studio Code, Visual Studio, or run from the command line.
## Restore, build, and run
2016-10-29 01:35:15 +08:00
Follow the suggested commands by changing directories to the `MyWebApp` directory. Then run `dotnet restore`.
2016-10-29 01:35:15 +08:00
![Command window](yeoman/_static/dotnet-restore.png)
2016-10-29 01:35:15 +08:00
Build and run the app using `dotnet build` and `dotnet run`:
![Command window](yeoman/_static/dotnet-build-run.png)
2016-10-29 01:35:15 +08:00
2017-07-11 03:02:22 +08:00
At this point, you can navigate to the URL shown to test the newly-created ASP.NET Core app.
2016-10-29 01:35:15 +08:00
## Client-side packages
2016-10-29 01:35:15 +08:00
2017-07-11 03:02:22 +08:00
The front-end resources are provided by the templates from the Yeoman generator using the [Bower](xref:client-side/bower) client-side package manager, adding *bower.json* and *.bowerrc* files to restore client-side packages using Bower.
2016-10-29 01:35:15 +08:00
2017-07-11 03:02:22 +08:00
The [BundlerMinifier](xref:client-side/bundling-and-minification) component is also included by default for ease of concatenation (bundling) and minification of CSS, JavaScript, and HTML.
2016-10-29 01:35:15 +08:00
## Building and running from Visual Studio
2016-10-29 01:35:15 +08:00
2017-07-11 03:02:22 +08:00
You can load your generated ASP.NET Core web project directly into Visual Studio, then build and run your project from there. Follow the instructions above to scaffold a new ASP.NET Core app using Yeoman. This time, choose **Web Application** from the menu and name the app `MyWebApp`.
2016-10-29 01:35:15 +08:00
Open Visual Studio. From the File menu, select Open ‣ Project/Solution.
2017-07-11 03:02:22 +08:00
In the Open Project dialog, navigate to the *.csproj* file, select it, and click the **Open** button. In the Solution Explorer, the project should look something like the screenshot below.
2016-10-29 01:35:15 +08:00
![Files and folders of a new project in Solution Explorer](yeoman/_static/yeoman-solution.png)
2016-10-29 01:35:15 +08:00
2017-07-11 03:02:22 +08:00
Yeoman scaffolds a MVC web application, complete with both server- and client-side build support. Server-side dependencies are listed under the **Dependencies/NuGet** node, and client-side dependencies in the **Dependencies/Bower** node of Solution Explorer. Dependencies are restored automatically when the project is loaded.
2016-10-29 01:35:15 +08:00
![Under the Dependencies node in the Solution Explorer tree view, the Bower folder is open listing its dependencies.](yeoman/_static/yeoman-loading-dependencies.png)
2016-10-29 01:35:15 +08:00
When all the dependencies are restored, press **F5** to run the project. The default home page displays in the browser.
![Web application open in Microsoft Edge](yeoman/_static/yeoman-home-page.png)
2016-10-29 01:35:15 +08:00
## Restoring, building, and hosting from a command line
2016-10-29 01:35:15 +08:00
2017-07-11 03:02:22 +08:00
You can prepare and host your web application using the .NET Core CLI.
2016-10-29 01:35:15 +08:00
2017-07-11 03:02:22 +08:00
At a command prompt, change the current directory to the folder containing the project (that is, the folder containing the *.csproj* file):
2016-10-29 01:35:15 +08:00
2016-11-18 13:03:07 +08:00
```console
2016-10-29 01:35:15 +08:00
cd src\MyWebApp
```
2016-10-29 01:35:15 +08:00
Restore the project's NuGet package dependencies:
2016-10-29 01:35:15 +08:00
2016-11-18 13:03:07 +08:00
```console
2016-10-29 01:35:15 +08:00
dotnet restore
```
2016-10-29 01:35:15 +08:00
Run the application:
2016-11-18 13:03:07 +08:00
```console
2016-10-29 01:35:15 +08:00
dotnet run
```
2016-10-29 01:35:15 +08:00
2017-07-11 03:02:22 +08:00
The cross-platform [Kestrel](xref:fundamentals/servers/kestrel) web server will begin listening on port 5000.
2016-10-29 01:35:15 +08:00
2016-11-16 00:46:25 +08:00
Open a web browser, and navigate to `http://localhost:5000`.
2016-10-29 01:35:15 +08:00
![Web application open in Microsoft Edge](yeoman/_static/yeoman-home-page_5000.png)
2016-10-29 01:35:15 +08:00
## Adding to your project with sub generators
2016-10-29 01:35:15 +08:00
Using Yeoman [sub generators](https://github.com/omnisharp/generator-aspnet), you can add either a `nuget.config` or a `web.config` after the project is created. For example, execute the following command from the directory in which the file should be created:
2016-10-29 01:35:15 +08:00
2016-11-18 13:03:07 +08:00
```console
2017-07-11 03:02:22 +08:00
yo aspnet:nugetconfig
```
2016-10-29 01:35:15 +08:00
2017-07-11 03:02:22 +08:00
The result is a NuGet configuration file named `nuget.config` with the following content:
```xml
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<packageSources>
<!--To inherit the global NuGet package sources remove the <clear/> line below -->
<clear />
</packageSources>
</configuration>
```
## Additional resources
2016-10-29 01:35:15 +08:00
2017-07-11 03:02:22 +08:00
* [Servers (Kestrel and WebListener)](xref:fundamentals/servers/index)
* [Fundamentals](xref:fundamentals/index)