0

Please or Register to create posts and topics.

What is the purpose of having 2 projects, can you integrate quickapp.material under quickapp.pro

Page 1 of 2Next

What is the purpose of having 2 projects, can you integrate quickapp.material under quickapp.pro, there s duplication of the files under the material project

QuickApp.Pro is a self contained project that contains both the Server (backend API) and the Client (Frontend Angular App) in a single application. This is the VisualStudio approach that simplifies development and publishing by having a single self contained project.

quickapp.material is an option for those who prefer the Angular CLI approach to development. This option requires running two separate servers during development (1 for frontend and 1 for backend). This is the traditional approach to working with Angular applications using the CLI. This frontend will connect to the ASP.NET Core backend and must both be running. It is safe to delete the "ClientApp" folder from the ASP.NET backend since that will not be used in this scenario.

See my response in this post for a similar discussion: https://www.staging8.ebenmonney.com/forum/?view=thread&id=26&part=1#postid-64

 

walid336 has reacted to this post.
walid336

Thank you

I removed the clientapp since i use cli  after npm start and successful compilation i tried to login and got the following error

I modified the user to include a field and added permissions to the permission model,

Severity: "error", Summary: "No Network", Detail: "The server cannot be reached", Error: "{"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":null,"ok":false,"name":"HttpErrorResponse","message":"Http failure response for (unknown url): 0 Unknown Error","error":{"isTrusted":true}}"

I even ran the exact unmodified folder quickapp.pro , i was able to login from the clientapp folder (with dotnet run) but got the same error when running from the angular material folder (with npm start)

The error states that the backend API is not running. Make sure you start the asp.net core application too since you're now working with two separate projects.

Unless you've changed this, by default the ASP.NET Core backend runs on the port 5050 (i.e. http://localhost:5050/). If you've changed the default port then you need to point the Angular CLI project to this same address. You do this by modifying the "configuration.service.ts" file.

=> From the class ConfigurationService, make sure the baseUrl points to the same address as the backend. i.e. public baseUrl: string = "http://localhost:5050";

 

NOTE: If you deleted the "ClientApp" folder from the ASP.NET Core backend project, then it is recommended to modify the project file "QuickApp.Pro.csproj" to remove the Build & Publish entries for to the ClientApp. You do this by deleting the lines below from the csharp project file "QuickApp.Pro.csproj".

--Delete everything below-- 
  <Target Name="DevelopementRunWebpack" AfterTargets="Build" Condition="!Exists('wwwroot\dist\vendor.js')">
    <!-- Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
 
    <!-- In development, the dist files won't exist on the first run or when cloning to
         a different machine, so rebuild them if not already present. -->
    <Message Importance="high" Text="Performing first-run Webpack build..." />
    <Exec Command="npm install" Condition="!Exists('node_modules/webpack/bin/webpack.js')" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js" />
    <Exec Command="node node_modules/webpack/bin/webpack.js" />
  </Target>
 
  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec Command="npm install" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />
 
    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="wwwroot\dist\**; ClientApp\dist\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

--End of entries to delete--

Thank you for the support, I ran the application, i also had to run the quickapp.pro folder with the cmd line, so i have both ng serve and dotnet run  is that correct?

Deleted user has reacted to this post.
Deleted user

Is there a way to keep the ClientApp in the main VS solution but also use the approach detailed here: https://docs.microsoft.com/en-us/aspnet/core/spa/angular?tabs=visual-studio#run-ng-serve-independently ? Basically so that the startup time can be shrunk down.

Yes. The next update includes this change.

This will be available in 2 days.

In the split development mode where you use angular-cli, is the "Views" folder even necessary on the core side?  I would think not, but wasn't sure.

 

Page 1 of 2Next