Cześć,
planuje się trochę pouczyć reacta i chciałbym sobie zrobić jakąś testową aplikację gdzie backend będzie zrobiony w .net 5 a front w react i redux.
Ale w samej solucji chciałbym rozdzielić projekt frontendowy i projekt backendowy nie wiem np zrobić sobie 2 katalogi i w jednym proj trzymać tylko frontend a w drugim tylko web api, czy to jest możliwe? czy to w ogóle dobre podejście? każdy typ projektu jaki chce utworzyć zawsze tworzy mi w VS projekt w którym jest backend i frontend.
0
0
Nie ma możliwości stworzenia osobnego projektu w Visual Studio dla jedynie Reacta.
Jeśli chcesz stworzyć projekt, w którym będziesz miał dwa osobne katalogi na frontend i backend będziesz musiał osobno stworzyć
- projekt pod API w .NET, wykorzystując Visual Studio
- w katalogu obok, poza solucją stworzyć katalog pod frontend w React i utworzyć projekt już poprzez konsolę
npx create-react-app
Wyglądać to będzie mniej więcej tak (nie zamieszczam wszystkich plików):
./MyFullWebProject
|-- .git/
|-- Backend/
| |-- API.sln
| |-- Website/
| | |-- Controllers/
| | |-- Website.csproj
|-- Frontend/
| |-- packages.json
| |-- src/
| | |-- App.js
Przy czym projekt Backend może wyglądać odrobinę inaczej, jeśli utworzysz solucję i projekt w jednym katalogu, ale to już raczej szczegół.
0
Czyli ogólnie w jednej solucji nie zobaczę frontendu i backendu tak? myślałem że to się da zrobić tak ładnie że będzie w jednej i będę sobie budował albo jedno albo drugie.
Innymi słowy w GIT w jednym repo bede miał i to i to osobno, ale uruchamiać i tak będę musiał osobno?
0
Niestety tak. W Visual Studio jest możliwość wybudowania jednej solucji zawierającej apkę w React i API w .NET, ale apka w React nie będzie osobnym projektem, a jedynie podkatalogiem.
Rozwiązanie uruchamiania jednej solucji z dwoma osobnymi projektami od Backend i Frontend jest możliwe z poziomu Visual Studio gdy oba projekty są w .NET (na przykład API + Razor), ale Ty pytasz o .NET + React
Myślę, że jeśli bardzo zależy Ci na możliwości uruchamiania obu "jednym przyciskiem", to można sprawdzić Visual Code, wtedy jednak trzeba będzie napisać odpowiedni launch.json w katalogu ./.vscode. Ale architektura (projekty, katalogi) pozostaną takie same, edytowanie i uruchamianie będzie z poziomu Visual Code.
0
Rozumiem, dziękuję za wyjaśnienie. Wiesz może jeszcze czy jest jakiś tutorial który mi pomoże ogarnąć obsługę DB przez EF core i moje webapi tak zeby część bazodanowa była w osobnym projekcie? Tak żeby w przypadku gdybym chciał zrobić kolejne webapi dla innej aplikacji abym mógł użyć znowu tego samego projektu do obsługi DB?
1
A na pewno nie chcesz w VS tylko robić C#, a w VS Code frontu?
Rozwiązanie uruchamiania jednej solucji z dwoma osobnymi projektami od Backend i Frontend jest możliwe z poziomu Visual Studio gdy oba projekty są w .NET (na przykład API + Razor), ale Ty pytasz o .NET + React
Myślę, że jeśli bardzo zależy Ci na możliwości uruchamiania obu "jednym przyciskiem", to można sprawdzić Visual Code, wtedy jednak trzeba będzie napisać odpowiedni launch.json w katalogu ./.vscode. Ale architektura (projekty, katalogi) pozostaną takie same, edytowanie i uruchamianie będzie z poziomu Visual Code.
Istnieją templatki pokroju dotnet new react -o my-new-app które mają 2w1 i odpalając projekt .NETowy odpala się również frontend.
src: Use the React project template with ASP.NET Core
app.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment())
{
spa.UseReactDevelopmentServer(npmScript: "start");
}
});
0
@WeiXiao: Odpalanie rzeczywiście, dzięki! Wiedziałem, że istnieje architektura jaką pokazałeś na obrazku i o niej mówiłem:
ale apka w React nie będzie osobnym projektem, a jedynie podkatalogiem.
ale zapomniałem, że uruchamianie już odpali dwa projekty.
Jednak przypadku takiego, o jakim pisze autor (osobne projekty, osobne katalogi) już takie rozwiązanie nie obsłuży właśnie.
2
0
Tak o coś takiego, ale tak jak mówie to moje pierwsze zderzenie z react, nie wiem jak się robi i jak powinno, może rozwiązanie że front w vs code a backend w VS bedzie ok :)
Nie chce też jakoś przekombinowywać :P Chce się dowiedzieć jak jej poprawnie, jak robią to inni.
0
Od siebie dodam, że lepiej się sprawuje proxy to development server, bo wtedy backend wstaje momentalnie, a npm start z reguły długo startuje frontend, co nie jest dobre przy częstym restartowaniu backend bez zmian na froncie:
app.UseSpa(spa => { if (env.IsDevelopment()) { // using localhost cause 2-4s startup, because of ipv6 timeout! spa.UseProxyToSpaDevelopmentServer("http://127.0.0.1:4200"); } });
Zamień tylko port na ten co hostuje react, bo domniemuje, że też jest tam jakiś osobny developerski serwer jak w angularze. Dzięki temu frontend osobno można sobie robić np w visual code i fajnie się to sprawuje, a serwer do frontendu odpalam sobie ręcznie raz dziennie z konsoli :)
W projekcie asp.net'a (plik .csproj) tylko trzeba wyłączyć by nie includowało katalogu w którym ten frontend się trzyma. Tu przykład dla angularowej apki w folderze ClientApp
<PropertyGroup>
<TargetFramework>net5.0</TargetFramework>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
<TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
<IsPackable>false</IsPackable>
<SpaRoot>ClientApp\</SpaRoot>
<DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
</PropertyGroup>
<ItemGroup>
<!-- Don't publish the SPA source files, but do show them in the project files list -->
<Content Remove="$(SpaRoot)**" />
<None Remove="$(SpaRoot)**" />
<None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
</ItemGroup>
0
A to jeszcze dodam, że backend w Visual Studio, a frontend w Visual Studio Code bardzo dobrze mi się sprawuje w zespole. Trzymanie tego w jednym projekcie też ułatwia sprawę, bo i tak wersję produkcyjną musisz dać razem z backendem, a nie odpalać jako osobna aplikacja (widziałem takie wynalazki).
Niestety templatety do angulara, a pewnie i reacta są w asp.net core takie trochę do kitu, bo chociażby spa.UseReactDevelopmentServer(npmScript: "start"); przekreśla dla mnie pracę na backendzie właśnie przez to, że przy przebudowaniu on nie wstanie w 1s. Pięknie rozwiązuje to właśnie UseProxyToSpaDevelopmentServer, którego niestety nie ma w domyślnym template, a jeszcze nie tak dawno w ogóle mało dokumentacji było na ten temat.
Pamiętać też trzeba o wykluczeniu plików w tym .csproju bo bez tego projekt będzie działał ale visual studio będzie dziwnie zamulało :)
0
Podepnę się pod temat.
Nie lepiej zrobić dwa osobne projekty: dotnetowy przez dotnet CLI, reactowy przez analogiczny odpowiednik i rozwijać dwa niezależne projekty w VSC? Domyślam się, że jest więcej uruchamiania, ale ogólnie nie jest to "praktyczniejsze" rozwiązanie?
1
@revenger: Możesz tak zrobić, kwestia upodobań.
Generowanie builda produkcyjnego robi się z projektu backendowego w asp.net'a, a w nim wolę operować na relatywnych ścieżkach niż kombinować z zależnościami między projektowymi, które już nie raz widziałem jak programiści potrafią rozwalić.
Do Visual Studio Code jako frontend się przekonałem, głównie poprzez Angular Language Services (IntelliSense typescriptowe w html'ach), które w głównym VS działało słabo. Za to debugowanie C# i bardziej złożone rzeczy to tylko pełny Visual.