ASP.NET Core template app does not run

[tareqimbasher]

I'm submitting a bug report

• Library Version:
  1.0.0-beta.5

Please tell us about your environment:

• Operating System:
  Windows 10

• Node Version:
  8.9.0

• NPM Version:
  5.6.0

• Browser:
  all

• Language:
  TypeScript 3.0

• Loader/bundler:
  Webpack

Current behavior:
Use au new to create a new Typescript/AspNetCore/Webpack project. Once it is complete and dependencies are installed, run project using dotnet run. The app loads with the word "Loading..." and nothing happens. In the console, a message Loading failed for the <script> with source “http://localhost:5000/dist/vendor.bundle.js”. is shown.
Looking at the dist folder, it indeed does not have that bundle. There is a app.bundle.js but no vendor.bundle.js.
When app is run using au run the app loads properly, and different output is shown in dist/ folder. Also building ASP.NET core app does not create/recreate the dist/ folder.

• What is the expected behavior?
  To load and show Hello World.

• What is the motivation / use case for changing the behavior?

[milkshakeuk]

This also applies to 1.0.0-beta.6.

It seems to be related to this recent commit in the webpack.config.template which adds some optimisations but breaks the develop build of the aspnet core app.

I made it work by changing the following file Views/Home/Index.cshtml:

@{
    ViewData["Title"] = "Home Page";
}

<div aurelia-app="main">Loading...</div>

@section scripts {
<environment names="Development">
   <script type="text/javascript" src="~/dist/vendor.bundle.js" asp-append-version="true"></script>
   <script type="text/javascript" src="~/dist/app.bundle.js" asp-append-version="true"></script>
 </environment>
<environment names="Production">
   <script type="text/javascript" asp-src-include="~/dist/common.*.bundle.js" asp-append-version="true"></script>
 </environment>
 <environment names="Staging, Production">
   <script type="text/javascript" asp-src-include="~/dist/vendor.*.bundle.js" asp-append-version="true"></script>
   <script type="text/javascript" asp-src-include="~/dist/app.*.bundle.js" asp-append-version="true"></script>
 </environment>
}

to this

@{
    ViewData["Title"] = "Home Page";
}

<div aurelia-app="main">Loading...</div>

@section scripts {
<environment names="Development">
   <script type="text/javascript" asp-src-include="~/dist/vendor.*.js" asp-append-version="true"></script>
   <script type="text/javascript" src="~/dist/app.bundle.js" asp-append-version="true"></script>
 </environment>
<environment names="Production">
   <script type="text/javascript" asp-src-include="~/dist/common.*.bundle.js" asp-append-version="true"></script>
 </environment>
 <environment names="Staging, Production">
   <script type="text/javascript" asp-src-include="~/dist/vendor.*.bundle.js" asp-append-version="true"></script>
   <script type="text/javascript" asp-src-include="~/dist/app.*.bundle.js" asp-append-version="true"></script>
 </environment>
}

not really sure if this is the correct fix but it works.

[3cp]

@chrisckc could you have a look of this?

[milkshakeuk]

@huochunpeng I may have overlooked the other environments in the cshtml since I haven't attempted to build in Staging or Production configurations I can only assume that may be broken without a similar change.

[milkshakeuk]

@huochunpeng I would assume including everything in node_modules is not the best approach since a lot of devDependencies will also reside here.

What I do know is that before the removal of the vendor entry in the webpack.config.template.js this worked fine, its only since the move to use the optimized chunked files that this began to fail.

[3cp]

I guess it's because of the file name change. Here are files generated with au build (default dev env).

⋊> ~/p/w/dist ll
total 6672
-rw-r--r--  1 huocp  staff    15K 21 Nov 07:40 app.188eb6c394b113e4737a.bundle.js
-rw-r--r--  1 huocp  staff    15K 21 Nov 07:40 favicon.ico
-rw-r--r--  1 huocp  staff   976B 21 Nov 07:40 index.html
-rw-r--r--  1 huocp  staff   857K 21 Nov 07:40 vendor.188eb6c394b113e4737a.chunk.js
-rw-r--r--  1 huocp  staff   464K 21 Nov 07:40 vendor.aurelia-binding.188eb6c394b113e4737a.chunk.js
-rw-r--r--  1 huocp  staff   429K 21 Nov 07:40 vendor.aurelia-templating.188eb6c394b113e4737a.chunk.js
-rw-r--r--  1 huocp  staff   1.1M 21 Nov 07:40 vendor.aurelia.188eb6c394b113e4737a.chunk.js
-rw-r--r--  1 huocp  staff   448K 21 Nov 07:40 vendor.bluebird.188eb6c394b113e4737a.chunk.js

It's not vendor.bundle.js, it's vendor.*.chunk.js now.

[milkshakeuk]

@huochunpeng this is the conclusion I came to which is why my Index.cshtml amendment works.

<script type="text/javascript" asp-src-include="~/dist/vendor.*.js" asp-append-version="true"></script>

which generates the following html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home Page | Aurelia</title>

    <link rel="stylesheet" href="/dist/vendor.css">
</head>
<body>

<div aurelia-app="main">Loading...</div>

   <script type="text/javascript" src="/dist/vendor.50f6d34b46a9fb34d303.chunk.js?v=tYl2JAtHCZoHKNqmxd_PuzPWZ5fmDwDsT6v3pOUNuME"></script>
   <script type="text/javascript" src="/dist/vendor.aurelia-binding.50f6d34b46a9fb34d303.chunk.js?v=TO60jtGxPrwn_SpAEcNvBJJu9qMLQas7sepATWJIZNI"></script>
   <script type="text/javascript" src="/dist/vendor.aurelia-templating.50f6d34b46a9fb34d303.chunk.js?v=hQ2bcCi2qYxAn3wXpI460apCqDUl2LEcsF4BFKUzuRI"></script>
   <script type="text/javascript" src="/dist/vendor.aurelia.50f6d34b46a9fb34d303.chunk.js?v=w1X57SV4WfQIU2tSnSRJGJOlZAjdXmJfPmgM9DaMnqY"></script>
   <script type="text/javascript" src="/dist/vendor.bluebird.50f6d34b46a9fb34d303.chunk.js?v=LjoNM8hRKr-EpF40Ezo_P88vqRVooxxOL6Lgwo3CXKE"></script>
   <script type="text/javascript" src="/dist/app.bundle.js?v=BXRpF3iR4UgfU6M9O-rUvclNSeZelKYYe9ma5Je8tAM"></script>

</body>
</html>

[chrisckc]

@milkshakeuk @huochunpeng This is unfortunate, my testing was done using the new style ASP.NET Core Spa method which use SpaProxy in dev mode and serve the Aurelia bundle from ClientApp/dist when in production mode. Using that method there is no tie-in between the MVC Index view and the SPA code.

I guess this kind of issue may be one of the reasons why Microsoft have moved away from the old method that uses the WebpackDevMiddleware, this is what is currently generated by the Aurelia CLI.

I think that the CLI should be updated to generate the dotnet template using the SpaProxy method to keep it inline with the current Microsoft SPA templates. This will prevent any issues arising when users start to optimise their webpack config. It will also fill the gap now that Microsoft no longer provide an up to date Aurelia SPA template.

In the meantime this should be fixed as suggested above with comments added to point out the link between the scripts and the webpack optimisation config.

[milkshakeuk]

@chaskim I have not seen the latest ASP.Net Core SpaProxy method used in any tutorials or in the spa templates that microsoft provide do you have any examples.

however if this is the case I agree the aurelia cli should share the approach.

[chrisckc]

@EisenbergEffect Perhaps a better approach than updating the CLI would be to convince the ASP.NET Core team to reintroduce the Aurelia template into their core templates package https://github.com/aspnet/Templating and then ditch the CLI generated.NET core template.

This should also be a great help in driving the adoption of Aurelia.

[chrisckc]

@milkshakeuk I have a blog post here which links to a git hub repo using the new method:
https://www.chrisclaxton.me.uk/chris-claxtons-blog/aspdotnetcore-aurelia

[milkshakeuk]

@EisenbergEffect Perhaps a better approach than updating the CLI would be to convince the ASP.NET Core team to reintroduce the Aurelia template into their core templates package https://github.com/aspnet/Templating and then ditch the CLI generated.NET core template.

This should also be a great help in driving the adoption of Aurelia.

alternatively the aurelia team could create there own custom aurelia template ala custom-templates.

[milkshakeuk]

@chrisckc Thanks for the link.

[EisenbergEffect]

@milkshakeuk I wish we could convince them. For whatever reason they refuse to support anything besides Angular and React even with Angular moving into decline and React beginning to be supplanted by other VDom-based frameworks. When I was employed at Microsoft I even internally gave a "piece of my mind" to a few people about this but it didn't seem to make any difference. On the whole, I'm not convinced that the .NET team is really on top of front-end or knowledgeable about what is going on in this space. Their particular "data-driven" approaches to driving this are quite seriously flawed as well. So, we're probably on our own here.

@chrisckc Is there something we could do as the Aurelia team to make an official template available to ASP.NET devs who want it? From your post, it seems like you've got all the details worked out. We just need to package it up somehow to plug into the dotnet new system. Is that right? (Forgive me, I haven't looked into the details of the new CLI's extensibility model.)

[chrisckc]

Looks like the .NET team are open to providing links to community created 'dotnet new' templates in their documentation, here is the issue and discussion i found a while back on the retiring of the templates:

https://github.com/aspnet/Announcements/issues/289
i think this comment just about sums it up:
https://github.com/aspnet/JavaScriptServices/issues/1522#issuecomment-364333953

I am willing to help in the creation of an Aurelia template for dotnet new, we would need to decide what sample code is provided in it. Microsoft had their own Aurelia sample in the retired template package which looks the same as their Angular template using left sidebar navigation and a simple WebApi call to get fake weather data.

We should probably use the code from the skeleton repo, or the same code thats going to be outputted by the CLI when it's eventually combined, with the addition of an example WebApi call.

We could even go a step further and offer a template which implements JWT authorisation against the dotnet "individual auth" setup that is created using dotnet new mvc --auth Individual as authorisation this is the logical next step of anyone serious about developing an app.

Do you want to open up another issue/feature request for this?

[EisenbergEffect]

I'd like to start with the most basic setup that makes sense and then iterate on it from there based on community feedback. Our plan for the skeletons has been to have them be generated from the CLI and we'd want to have things be as close as possible with the ASP.NET integration as well. @JeroenVinke Any notion of how far we are away from being able to generate the skeletons from the CLI?

[EisenbergEffect]

Oh, in case it wasn't clear, @chrisckc we'd love your assistance in creating the Aurelia template :) I think the community will be very happy about this.

[chrisckc]

No problem, i have created a new issue to continue discussions on this, in the meantime should this issue be fixed in the CLI by editing Index.cshtml?

If so can someone else do a pull request for that please? @milkshakeuk ?

[milkshakeuk]

@chrisckc @EisenbergEffect pull request created, though I did update the template to aspnet core 2.1 whilst I was there, basing it on newer dotnet new mvc templates.