Di mana menempatkan aplikasi Angular dalam solusi ASP.NET Web API?

Saya memulai aplikasi greenfield dan saya ingin menggunakan ASP.NET (4.6) dan Angular 2. Untuk backend saya telah membuat proyek di Visual Studio, dan sekarang saya bertanya-tanya di mana harus meletakkan aplikasi Angular. Saya benar-benar ingin menggunakan npm dan node-tools untuk front-end, tetapi pada akhirnya itu akan di-host di instance Azure App Service yang sama dengan aplikasi Angular di domain.com/dan api di bawah domain.com/api/atau semacamnya.

Bagaimana saya harus memisahkan aplikasi di Visual Studio? Haruskah aplikasi Angular berada di proyeknya sendiri? Haruskah saya memiliki aplikasi Angular dalam proyek yang sama dengan API? Bahkan jika saya tidak ingin menggunakan nuget dan alat-alat VS lainnya untuk itu? (Untuk ujung depan, VS akan lebih atau kurang adalah editor kode yang dimuliakan). Saya belum menemukan praktik terbaik untuk kombinasi ini.

Anda memiliki dua opsi.

Buat proyek mywebsite.api dan mywebsite.app terpisah dalam solusi Anda.

Keuntungan

• Pemisahan keprihatinan yang tepat.
• Anda dapat menyebarkan pembaruan ke api dan front end Anda secara mandiri.
• Arsitektur situs dapat diubah secara independen (mis. Anda dapat memperbarui api Anda untuk berjalan di asp.net 5 tanpa mempengaruhi situs web)
• Pembersih

Buat satu proyek dengan aplikasi klien dan api dalam satu proyek

Keuntungan

• Lebih mudah untuk menyebarkan pembaruan
• Tidak perlu mengkonfigurasi untuk bekerja dengan CORS

Cara meng-host dan mengembangkan aplikasi secara lokal.

Solusi yang efektif untuk pengembangan adalah menggunakan lite-server untuk menjalankan aplikasi klien Anda (Angular 2) dan IIS / Casini untuk meng-host kode api web Anda. Contoh yang baik tentang bagaimana menggunakannya diberikan dalam tutorial quickstart Angular 2 (tertaut di bawah). Proses pengembangan saya adalah menjalankan api melalui Visual Studio dan bekerja dengan pengkodean situs klien menggunakan Visual Studio Code dan lite-server (Atom adalah pilihan lain yang baik).

Dari dokumentasi lite-server. Pengembangan ringan hanya node server yang melayani aplikasi web, membukanya di browser, menyegarkan ketika html atau perubahan javascript, menyuntikkan perubahan CSS menggunakan soket, dan memiliki halaman cadangan jika rute tidak ditemukan.

https://code.visualstudio.com/

https://angular.io/docs/js/latest/quickstart.html

https://www.youtube.com/watch?v=e_FVeYWUF3s

https://github.com/johnpapa/lite-server

Pandangan ku

Tidak ada masalah dalam menggunakan Nuget / NPM baik dalam solusi yang sama dan ini seharusnya tidak menginformasikan pilihan Anda tentang struktur proyek.

Saya hanya menggunakan pendekatan proyek tunggal untuk demo / bukti aplikasi konsep. Untuk rilis produksi, saya akan selalu memisahkan kekhawatiran saya dengan benar dan memiliki proyek api khusus.

Saya telah menemukan proyek seeder ini https://github.com/damienbod/AngularWebpackVisualStudio/ yang memungkinkan Anda untuk mengembangkan dan meng-host klien dan server dalam satu proyek Visual Studio (2017).

Saya setuju dengan komentar @CountZero tentang keuntungan menggunakan dua situs untuk menjadi tuan rumah (khususnya pemisahan masalah) tetapi kerugian besar bagi saya adalah harus mengaktifkan dukungan CORS di API Anda ketika dalam kebanyakan kasus, satu-satunya konsumen API Anda adalah Anda ujung depan klien sendiri. Saya bukan ahli tentang CORS tetapi ini hanya terasa seperti overhead yang tidak perlu dan juga disertai dengan ancaman keamanan tambahan.

Yah, jelas Anda dapat memisahkannya menjadi dua solusi, menambahkan proyek lain dalam solusi, atau memilikinya dalam proyek yang sama. Saya akan memberi tahu apa yang akan saya lakukan.

IMHO, jika Anda ingin memanfaatkan Sesi di IIS dan / atau menyembunyikan proses otentikasi dalam API, tulis angular di Visual Studio juga. VS2015 memiliki integrasi yang cukup bagus (intellisense) dengan sudut jika Anda menginstal ekstensi pengembangan web. Saya harus mengatakan cara ini akan lebih ringkas dan portabel.

Jika Anda akan menambahkan halaman dokumentasi pada proyek backend, kemudian pisahkan ke dalam proyek mereka sendiri (solusi yang sama) dan sajikan api dari subdomain atau subfolder.

Jika Anda tidak tertarik pada hal-hal di atas dan Anda merasa lebih nyaman dengan cara yang biasa Anda lakukan, lakukanlah. Jika Anda akan memiliki otentikasi berbasis token, Anda dapat memisahkan proyek tanpa ragu.

Dalam VS 2015 Anda memiliki opsi untuk memulai lebih dari satu proyek dalam solusi Anda ketika melakukan debugging selama Anda menetapkan URL Proyek yang berbeda untuk masing-masing.

Sebagai contoh, Anda akan mengatur proyek aplikasi Angular Anda untuk dijalankan http://localhost:55000/dan proyek API dapat diatur untuk dijalankanhttp://localhost:55000/api . Anda mengatur properti Project URL di dialog Properties proyek di tab Web.

Kemudian untuk mengatur beberapa proyek startup, dalam dialog Properti properti di bawah Properti Umum, pilih simpul Proyek Startup. Di sebelah kanan Anda akan menemukan opsi untuk Single startup projectdan Multiple startup projects. Pilih beberapa tombol radio proyek startup. Kemudian pilih Tindakan yang sesuai di sebelah proyek Angular Anda (Mulai tanpa debugging karena Angular dan Anda mungkin akan men-debug itu di browser), lalu di sebelah proyek API Anda pilih Mulai.

Sekarang ketika Anda menekan jalankan aplikasi Angular Anda akan terbuka di browser dan API web akan mulai berjalan juga. Anda dapat mengatur titik istirahat dalam metode API Web Anda dan menekannya dari aplikasi Angular.