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

16

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.

coding-style asp.net visual-studio angularjs Christian Wattengård
sumber
versi VS apa yang Anda gunakan? VS2015 memiliki beberapa alat integrasi yang cukup bagus untuk sudut / mendengus / simpul / dll yang saya temukan dapat digunakan sebagai IDE lain yang dibangun dengan pengembangan front-end dalam pikiran.
Trotski94
Saya menggunakan VS2015u2, tetapi bahkan dengan peralatan yang bagus dan semuanya, saya masih tidak yakin apakah menempatkan SPA dan API dalam proyek yang sama cukup "memisahkan keprihatinan saya". Bagaimana jika, di masa depan, saya mendapatkan seseorang untuk membantu saya dengan proyek ini, dan mereka hanya perlu bekerja di front-end. Mereka seharusnya tidak diharuskan mengunduh seluruh schmedangle, bukan?
Christian Wattengård

Jawaban:

13

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.

CountZero
sumber
Bagaimana cara saya meng-hosting webapp-part dengan solusi ini? Saya benar-benar ingin mereka berakhir di server yang sama, hanya webapp menyala /dan api menyala /api. Pada IIS saya mungkin bisa menyelesaikan ini dengan mudah dengan "memasang" situs di bawah /api, tapi saya tidak yakin bagaimana menyelesaikannya dengan VS / IISExpress.
Christian Wattengård
Pertanyaan yang sedikit berbeda. Saya akan memperbarui jawaban saya dengan informasi ini juga.
CountZero
Diperbarui pada jawaban saya. Tolong beri tahu saya jika ada sesuatu yang tidak jelas.
CountZero
Ini solusi yang saya pilih. Namun Iis Express berfungsi dengan baik dengan satu proyek di bawah subfolder dan yang lainnya di root. Jadi saya pergi untuk itu.
Christian Wattengård
Saya menggunakan IIS Express juga. Layak menggunakan server-lite untuk pengembangan sisi klien karena setiap chnage yang dibuat untuk kode sisi klien diperbarui secara otomatis. Dapat menggunakan IIS bersama-sama dengan metode ini.
CountZero
2

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.

Chet
sumber
Amin. Selalu melakukan dua proyek adalah pemujaan kargo
StingyJack
0

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.

st.
sumber
0

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.

Mike Devenney
sumber
Saya mencoba membuatnya bulat (dengan asumsi itu akan menjadi bentuk yang lebih baik daripada dinding teks) tetapi setelah beberapa upaya gagal saya pergi dengan paragraf.
Mike Devenney