Aurelia CLI project possible error

1

I will keep this as short as possible.

Using Visual Studio 2017 (latest updates as of post date).

  1. I created an MVC core project.

  2. I created an Aurelia project via the CLI inside this project.

  3. Following the CLI instructions made the changes to the Home/Index view :

    @{
    ViewData[“Title”] = “Home Page”;
    Layout = “~/Views/Shared/_Layout_App.cshtml”;
    }

    Loading...

    @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>
    }

  4. Build the aurelia project and CTRL-F5 to run the MVC project. The Aurelia app does not load.

Why?

In the webpack.config.js, lines 43-45 inclusive:

filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'

The development bundle names have a [hash]. The Index.cshtml does not expect one:

  <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>

Removing the ‘[hash]’ from the development build webpack.config.js, lines 43-45 and things work again.

There is still a 404 on ‘vendor.css’ on a newly created project.

2

Regarding the 404 on ‘vendor.css’ on a newly created project.

I have changed the ‘_Layout_App.cshtml’ file to include a RederSection for css:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@ViewData["Title"] - Aurelia</title>
  @RenderSection("css", required: false)
</head>
<body>
  @RenderBody()

  @RenderSection("scripts", required: false)
</body>
</html>

This is used by the ‘Index.cshtml’ file as follows.

@section css {
  <environment names="Production">
    <link asp-href-include="~/dist/*.css" rel="stylesheet" asp-append-version="true"/>
  </environment>
}

CSS now seems to be handled correctly both in ‘dev’ and ‘prod’ builds with the 404 error gone and the redundant ‘vendor.css’ removed.

3
  1. Clone.
  2. ‘yarn build’
  3. ‘dotnet run’