Javascriptservices: Multiple front-end entries

[ghost]

Hi

I've played with the dotnet new react and dotnet new reactredux templates (which work good, thanks), however wanting AspNet MVC with rich front-end JS I think nearly always means working with _multiple_ razor pages each with a front-end app (ie multiple entries for webpack).

I've tried to merge the templates mentioned above with the info from Scott Allens blog post on having multiple entries but have hit some roadblocks I haven't been able to hurdle.

So can I suggest/request a template that has front-end "apps" or features returned from multiple razor pages?

Thanks

PS. If you're happy to offer assistance with my specific issues I'd be only too eager to share them :) (WinHttpException is one)

[stephtr]

I don't think that an expansion of the templates is useful because in most cases one would probably just add pages to the SPA. Plus adding additional pages to MVC and an additional entry point to webpack should be quite simple.
What are your problems?

[ghost]

I'd like it to be simple...

My particular issue I think is around the development configuration and WebpackDev Middleware.
If I call dotnet run in a console then visit http://localhost:5000 or http://localhost:5000/admin in a browser, I get the result I'm expecting.
If I set ASPNET_CORE_ENVIRONMENT=Development then dotnet run or if I try to run/debug it in Visual Studio I get internal server errors for all the static files, and if I visit one of the files directly, eg http://localhost:26559/dist/main/app.js?v=xo36flgLZ5jY5yORnVqtZjuWE0gGD_5ZnxUUfLkUTXE, I get

WinHttpException: A connection with the server could not be established

Here are the changes that I've made to the react template to support multiple entries or features with multiple AspNet MVC Views:

• In ./ClientApp, moved the existing files to a ./ClientApp/main folder, renamed boot.tsx to entry.tsx, and added another folder ./ClientApp/admin as another entry/feature with sample content.
• Added an "admin" contoller method and view.
• Modified webpack.config.js to find app entry points as files named entry.tsx. They will be bundled into the folder they are found in with a name of app.js. For example, the /admin/entry.tsx entry is bundled into ./wwwroot/dist/admin/app.js.
• Added /main to all routes in ./ClientApp/main/routes.tsx, and in Startup.cs, added a MapWhen so that these routes are handled by the front-end app.
• Finally, I deleted the ./wwwroot/dist folder and rebuilt the front-end apps:

node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js
node node_modules/webpack/bin/webpack.js

I've put up the repo of all my current changes, here.

If you can assist that'd be great.

[stephtr]

The issue is that your entry names start and end with a slash (for example /main/ instead of main).
In your webpack.config.js file at line 11 the regexp should be ^.\/ClientApp\/(.+)\/entry\.tsx$. The filename at line 23 should then be './[name]/app.js'. Using that modifications your project runs for me.
Just a marginal note: If you would like to you could also split the css files by using new ExtractTextPlugin('./[name]/style.css')

[SteveSandersonMS]

Thanks for providing the tips, @stephtr!

[ghost]

Thanks @stephtr, that also fixed it for me. Much appreciated.

Just on your initial comment that "most cases one would probably just add pages to the SPA":

• I think there's still are large number of .NET dev's who are comfortable creating razor views and enriching them with small SPA functionality.
• It's also useful for creating a line between different parts of a website (eg Customer view vs Admin config area).
• And it's less of a change for .NET teams who are coming across from mainly razor/jquery development.

Would be interested in your thoughts on this.

Thanks again

[ghost]

Another thing @stephtr How did you discover the bug in the webpack config? I've got a similar exception for something else, the Webpack middleware is crashing and not giving me a helpful exception message.

[stephtr]

Sorry for the delay.
I'm not really the right person to ask since my experience is quite limited.
In the past my approach was to split for example the customer view and the admin area into two seperate projects, with an additional project for sharing Database Models, Setup Extensions, Utilities. My reason was (among others) that when working only on one of the two main projects it and thus for example the build time would be smaller. Additionally I could also update the admin area without interrupting the customer view. However at least latter reason got anyway invalid by using CI with all three projects being in the same Git repository and getting rebuild and redeployed each time I sync my commits.
So yes, my assumption was probably not right.

Regarding additional templates: From what I have read so far the templates created by the asp-spa generator should be kept as few and simple as possible. However it could be interesting to offer different options during creating a new project based on the templates (yo for example already asks for some projects if it should add unit tests; my idea would be to for instance ask if the generator should add support for CSS modules or if it should add static pages), but that would notably increase the effort needed for keeping the templates updated and working and supporting them. Another interesting option would be to detail the necessary modifications in the wiki (which currently is nearly empty).

Concerning your project: One can attach a debugger to the node process, but I chose the dirty way of putting a few console.warn() into the project's npm packages. Can your new exception be reproduced with your repo?

[ghost]

Thanks for the response @stephtr
I find there's often a grey area of where and how to split the project. You had good reasoning.

I tried to replicate the error with some changes to the repo just now but wasn't able to. I might be in touch again when this occurs :)