CODEWITHSUNDEEP
c#angularwebpack.net-core
Jamie
Jamie

Reputation: 168

How to bundle .NetCore API + Angular Front end

I have a public-facing angular frontend which hits a .NetCore back end. The two projects are bundled together using webpack. The problem is, I need Server Side Rendering enabled and Microsoft has deprecated /made UseSpaPrerendering obsolete. I did follow this tutorial but it doesn't work well in .net core 3.0/3.1 very well at all. When I get this working, I get a FOUC (Flash of unrendered content) and the page load speed is very slow.

With the above being the case, how can I deploy a .net core API/Angular front end application with server-side rendering?

Upvotes: 4

Views: 948

Answers (1)

Pieterjan
Pieterjan

Reputation: 3591

Did you already try to deploy the application to IIS? Or you could also change your ASPNETCORE_ENVIRONMENT (Project properties --> Debug --> ASPNETCORE_ENVIRONMENT = Production) to prod, and just run the application.

Now the angular bundles aren't built when running the app. To do so, you have to run the following commands from the ClientApp folder (check your csproj file, they're right there):

npm run build --prod
npm run build:ssr --prod

Now the angular build files are generated. If you see a dist/browser folder next to the dist/server folder, then the app won't render in Production mode. The contents of the browser folder should be next to the server folder (this is a known bug, but Microsoft will no longer change this). If this is not the case, you can always get around this by changing your angular.json file: projects:ClientApp:architect:build:options:outputPath = dist and not dist/browser. This way the app will behave the same in Development mode as Production mode. The "browser" files will always end up in the dist-folder, and ASP.NET Core will always look in the dist-folder, regardless the environment settings.

After your angular server/browser files have been built, you should be able to run the application in prod mode as regular.

Can you try this? I will try as well.

Update:

I tried my guide from https://medium.com/@pieterjandeclippel/server-side-rendering-in-asp-net-core-angular-6df7adacbdaa, with .NET Core 3.1 and it still seems to be working.

Could you try to perform following steps?:

  1. Open your angular.json file, locate the projects:ClientApp:architect:build:options:outputPath setting and ensure this is set to dist instead of dist/browser. Setting this to dist will make the app behave the same way in Development and Production mode.
  2. Optionally remove the dist folder inside your ClientApp.

  3. Run the following commands from your ClientApp folder: npm run build --prod and npm run build:ssr --prod

  4. Open your project properties page → Debug tab → Change ASPNETCORE_ENVIRONMENT to Production

  5. F5 to run the application

What result do you get? You can also read a lot of information from the Output window if something like this isn't working well...

If this is working, then it appears you just have to be more patient, and wait for the server build files to appear. So during development:

  1. You can set the ASPNETCORE_ENVIRONMENT variable to Development
  2. You can delete the ClientApp/dist folder
  3. When you run the project the browser+server build commands are run, as specified in your Startup.cs
  4. Just be patient and wait for the dist/server folder to appear
  5. Refresh the browser window

Upvotes: 4

Related Questions