React Redux SPA template

[nabinadhikari]

Please pardon me if I shouldn't have ask this here.
I am learning React and Redux with dotnet recently.
The dotnet template is perfect for my need , but it uses typescript. With typescript, I am having difficulty using libraries like redux-form.
I want to ask if the similar template is available with vanilla javascript.

[SteveSandersonMS]

Please see the newer version of the React+Redux template, which is JavaScript only (because Create-React-App produces JS-only apps): https://docs.microsoft.com/en-us/aspnet/core/spa/index

[pkellner]

@SteveSandersonMS Is there an estimate for when the react template will come out of RC status and released? @nabinadhikari , for a little more background on the status of the current templates and this new one, look at the issues below including comments from @buvinghausen

Personally, I'm disappointed that SSR is not part of the ASP.NET Core / React solution. My feeling is that ejecting a Create-React-App site is something that no one should ever do. It instantly adds a ton of debt to your project as now, you are responsible for maintaining a hugely complex webpack configuration.

IMHO, not having Server Side Rendering in an enterprise quality react app is a big mistake on Microsoft's part. Besides the obvious SEO and performance implications (which I understand have some work arounds that can solve), handling 404's from the server is almost impossible. Catching 404's on routes like ../Product/101 require a lot of ugly programming on the server without being able to re-use the JavaScript itself on the server.

I get that SSR is hard and that Create-React-App is important integration point. I'm just not liking the state this leaves developers in who want to use asp.net core and react.

#1441

#1457

[pkellner]

After more thought (and Talking to @SteveSanderson) , I've changed my opinion about Server Side Rendering and it's importance in the Microsoft React template.

I no longer believe Server Side Rendering is a "must have" feature in the Microsoft React Template and instead now believe it is a niche feature that in certain scenarios makes a lot of sense. What drives me to changing my position is a better understanding of the pain Server Side rendering causes development teams that have any 3rd party tools that directly access the window object. That, and I've mellowed on the importance of status 404's not being returned on "Page Not Found" scenarios. Frankly, I'm having trouble finding a scenario where returning 200's when a page is not found is really that important.

[tpetrina]

Well, if you have API you want to get 404 on misformed URLs instead of 200 with the content being root index.html.

[buvinghausen]

@tpetrina that's why you should wrap your call to UseSpa inside a MapWhen condition that ignores certain route prefixes.

Here's the code we have as our last middleware wireup..

app.MapWhen(
	// Pass the rest through to the SPA for deep linking
	// Note: static files should be proxied to webpack-dev-server but ignored in hosted environments
	// Filter out static files except in dev where they must be proxy served from webpackdevserver
	context => context.IsSpaRequest(env.IsDevelopment()),
	builder =>
	{
		builder.UseSpa(spa =>
		{
			spa.Options.SourcePath = "../client";
			if (env.IsDevelopment())
				spa.UseReactDevelopmentServer("webpackdevserver");
		});
	}
);

Note: IsSpaRequest is an extension method that I have written to exclude all routes that start with /api, /swagger, /webhooks, and requests with a file extension (the exception to the latter is when in development I do pass the file name extensions through because they are hosted by webpack-dev-server).

[clayhan]

@SteveSandersonMS Is there possibly a .NET Core/React/Redux template that is available that does not use TypeScript and has server side rendering, that is as bare as possible? Have been having a tough time getting everything working well. Thanks a ton.

[DamianMullins]

@clayhan I've created a rough server-side rendered demo app which uses .Net Core, React, Redux, and react-intl here. It isn't isn't a full SPA and I haven't tested to see how it holds up under high traffic but it could be a good starting point?