読者です 読者をやめる 読者になる 読者になる

BEACHSIDE BLOG

MicrosoftとかC#を好むレンジャーの個人的メモ

React も Angular も ASP.NET Core で Get Started♪

2017年2月の .NET Core SDK が 1.0 RC4 に更新 されたことで、プロジェクトを作成するコマンド dotnet new がちょっと変わりました。
dotnet new コマンドで今まで作れたプロジェクトテンプレートに加えて、以下のSingle-Page Applications(SPA)のカスタムプロジェクトテンプレートが出てきました。

  • Aunglar
  • Aurelia
  • Knockout.js
  • React.js
  • React.js and Redux

プロジェクトを作成すると、サーバー/クライアント間の通信のができるサンプルコード付きのプロジェクトができます。最近のJS界隈は、JSを各以前にpackage.json や webpack のセットアップや、もされていてとっかかりやすいです。

Environment

今回の私の環境はWindows10 で以下です。

  • .NET Core SDK 1.0 RC4 以上(必須)
  • Node.js (6.9.5)以上(必須)
  • Visual Studio Code(VS Code)

SDKのバージョンが若干わかりにくいかもしれませんが、リリースノート の2017年2月7日のアップデートかそれ以降であれば大丈夫です。

環境の確認

正しいSDKが認識されているか確認しましょう。 ここからは、コマンドプロンプトで操作していきます。コマンドプロンプトを起動して、まずは、以下のコマンドをうちます。

dotnet --version

f:id:beachside:20170225142722p:plain

.NET Command Line Toolsのバージョンが1.0.0-rc4-004771 以上であればOK♪。

カスタムのプロジェクトテンプレートをインストール

今回使うのはカスタムのプロジェクトテンプレートのため、以下のコマンドでインストールします。

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

f:id:beachside:20170225144027p:plain

インストールが完了すると、テンプレートの一覧が表示されます。

f:id:beachside:20170225144050p:plain

プロジェクトの作成:ASP.NET Core & React

まず、プロジェクトのルートディレクトリを作成しましょう。今回は、C:\projects\reactDemo というディレクトリを作成しました。そしてそのディレクトリに移動します。

f:id:beachside:20170225144254p:plain

プロジェクトを作るには、dotnet new の後に、Short Nameを付けてあげます。デフォルトでC#のプロジェクトができますが、F#を指定して作ることもできます。
今回は、C#とReact.jsです。

dotnet new react

すぐに作成が終わりますので、dir と叩いてディレクトリの中を見てみましょう。

f:id:beachside:20170225144353p:plain

これで完了です。

動作確認

実行前に、依存関係のあるパッケージのパッケージのダウンロードが必要です。

  • Visual Studio 2017でプロジェクトを開くと依存関係のあるパッケージのインストールはプロジェクトの起動時に自動で行われます。
  • Visual Studio 2017を使わない場合、依存関係のあるパッケージをインストールする dotnet restore と、 npm install のコマンドを手動で実行します。

せっかくなんで、コマンドプロンプトで2つのコマンド dotnet restore と、 npm install を実行します。npmのんストールはちょっと時間がかかると思いますので、ゆっくり待ちましょう。

終わりましたら、dotnet run で実行してみましょう。

f:id:beachside:20170225144818p:plain

「Now listening on: http://localhost:5000」と出ていますので、ブラウザーでアクセスしてみましょう。

f:id:beachside:20170225144904p:plain

Hello Worldにしてはちょっと豪華なサイトができました。3画面用意しており、サーバー連携もできるコードができています。

VS Codeでコードを見てみましょう。既にプロジェクトのルートディレクトリにいるので、コマンドプロンプトで、code .とたたいてみましょう。

f:id:beachside:20170225145128p:plain

VS Codeが起動します。

f:id:beachside:20170225145144p:plain

package.jsonwebpack.config.js だったり、その他諸々作成ができていますので、動かして勉強するにもいいですね。これでASP.NET Coreの入門も人気のSPAのフレームワークの入門もできて幸せです(と個人的に思ってます)。

参考

Building Single Page Applications on ASP.NET Core with JavaScriptServices | .NET Web Development and Tools Blog

core/release-notes at master · dotnet/core · GitHub