Working with spa services in .NetCore 3.0?

Question

I develop SPA web applicaton using ASP.Net Core React+Redux.

After update to .Net Core 3.0 I see that UseWebpackDevMiddleware and AddNodeServices is obsolete.

I learn new project-template React+Redux, but it isn't use webpack or SSR.

1) Where I can find example or information of work with webpack in .Net Core 3.0? with UseWebpackDevMiddleware was realy easy to configure HMR and webpack build.

2) Where I can find example or information about SSR with .Net 3.0 + React?

Answer 1

I feel I am in the same boat as yourself!!! Having spent the last week or so since the official release of dotnetcore3, I've tried to get something up and running that uses a SPA framework.

Given there has been no answers for this and I am keen to get SPA services running for aspnetcore3 I have looked into the various templates supplied within Visual Studio. Currently the templates are Angular and React that use aspnetcore3.

Prior to this there are templates for Angular, React and also Aurelia. For me Aurelia looks great - vanilla typescript bindings. So I am trying to go down that route.

I managed to get HMR (Hot Module Replacement) working. I built an Aurelia project using the CLI. However, my project has a lot of configuration, and I am still learning WebPack. HMR does not currently work with Aurelia CSS.

For my scenario, I had the client app loaded in VS Code. I created an aspnet core project which then hooks into webpack.

I know you are asking specifically about React, but the concept could be the same.

Some code

You can find my code here:

https://github.com/andez2000/spa-apps/tree/master/aurelia-cli/e1/aurelia-app

NOTE: Currently I am just dumping stuff into this repo. There are projects created from the templates if you navigate to the top level.

Usage

1. Open folder spa-apps\aurelia-cli\e1\aurelia-app in VSCode
2. Open the project.csproj in VS2019
3. Open a terminal in VSCode and run npm start -- --hmr and wait for output to complete.
4. Compile and run the solution in VS2019

This should open the default browser and load the index.ejs.

Things to note

The port numbers in the dotnet project and the aurelia project must tie up.

Startup.cs

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    ...
    app.UseSpa(spa =>
    {

        if (env.IsDevelopment())
        {
            spa.UseProxyToSpaDevelopmentServer("http://localhost:5000");
        }
    });
}

aurelia.json

  "platform": {
    "hmr": false,
    "open": false,
    "port": 5000,
    "host": "localhost",
    "output": "wwwroot/dist"
  },

So maybe this is conceptually the same as React. For some reason my React template fails to connect to IIS Express - and it worked the other day - so not really in a position to go digging.

For me, this project has a lot of moving parts. I wish I had a minimal working solution - that comprises webpack + scss + some spa framework + dotnetcore3. But there is a tonne of configuration and lots of files.

Other links

Also it might be worth checking this blog post out:

https://www.alexdresko.com/2019/07/09/htmlwebpackplugin-asp-net-core-3/

Read more about aurelia here:

https://aurelia.io/

Hopefully someone will give you a better answer - but this might get you going. Hopefully Microsoft will update the docs and examples and provide us with some better guidance.

dotnet template updates (April 2020)

I am hoping updated templates might overcome the aspnet core/dotnet core differences with webpack. So hoping it's a case of pulling in new templates.

See here:

https://github.com/NetCoreTemplates/aurelia-spa