Aspnet core 5 webpack proxy server

Help Requests
1

I am trying to create a new project using Net 5.0, aurelia-cli 2.0.2 and webpack.
This is the first time I’ve used webpack and cannot work out how to configure it so that I can run the server on https://localhost:5001 and the webpack-devserver on the same port.

Previously using requireJs, I could run the server on https://localhost:5001, run ‘au build --watch’ and then type in to the browser https://localhost:5001 and the application would run. However I now just get page not found. If I run https://localhost:5001/swagger - the page comes up correctly.

I just discovered that I need to type https://localhost:5001/dist/index.html for the app to start. In doing so I get Failed loading required CSS file: styles/app.css

If I comment out in app.html <require from="./styles/app.css"></require> the app will load.
I note that it correctly loads

  <require from="@fortawesome/fontawesome-pro/css/all.min.css"></require>
  <require from="izitoast/dist/css/iziToast.min.css"></require>

When using requireJs I could set a proxy in run.ts file to:

let serve = gulp.series(
  build,
  done => {
    browserSync({
      online: false,
      open: CLIOptions.hasFlag("open"),
      port: project.platform.port,
      logLevel: "silent",
      proxy: {
        target: "https://localhost:5001"
      },
    }, function (err, bs) {
      if (err) return done(err);
      let urls = bs.options.get("urls").toJS();
      log(`Application Available At: ${urls.local}`);
      log(`BrowserSync Available At: ${urls.ui}`);
      done();
    });
  }
);

This would give what I suppose is the equivalent of hmr?

I also had to remove all references to WebpackMiddleware in Startup

Clearly I don’t understand what I’m doing !!!

At this stage I would be quite happy if I could find the solution to getting the app to run when I type https://localhost:5001 into the browser, and understanding why I’m getting the failed to load app.css error.
I don’t have a problem in manually running dotnet run and au build --watch

webpack.config.js and webpack.netcore.config.js are the default files.

1 Like
2

have you tried:
au run --watch

1 Like
3

au run --watch fires up the dev-server. The problem is that if the net server is running on port 5001, and I set up the dev-server to run on the same port, it is unable to do so because the “port is already in use”. That’s why when using requireJs, I had to set up the proxy.

4

I guess the difference between running proxy on ASP or PHP is not that great. We make use of the proxy possibilities of the devServer property of the webpack configuration. The proxy forwards all requests with specific api base urls to another domain where the PHP server resides. That could be an alternative.

    "devServer": {
        "historyApiFallback": {
            "index": "/"
        },
        "proxy": {
            "/app": {
                "target": "http://local.dev",
                "changeOrigin": false
            },
            "/admin/": {
                "target": "http://local.dev",
                "changeOrigin": false
            }
        }
    },

HTH

5

It kind of works if I set the target to http://localhost:5000 and then rely on net to do the redirect to https://localhost:5001.
However, it is still not picking up the <require from="./styles/app.css></require>.

This all seems terribly complicated to setup something that I think should be “out of the box”. I’m going to give up on webpack and go back to requireJs.

6

Webpack can just build and watch without firing a server
Webpack --watch

7

I know, but I need the client to access the data on the back-end server

8

A, with you reply I remember to have forgotten to mention something :wink: The build output is inside the public folder of the nginx/php stack. All static files (as is your app.css ?) that are not generated or moved by Webpack reside there next to the build files.

9

I was under the impression that webpack is supposed to extract the css files.
Anyway I gave up in the end and reverted to requireJs. Now back to my old problem of not being able to debug within VS Code or Rider :sleepy:

10

@jeremyholt https://github.com/MaximBalaganskiy/AureliaDotnetTemplate
As for extracting css, webpack can do that as well, which is demonstrated in this template

This template uses watch to update the UI, the files are served by asp.net.
Lately, I have adopted another approach in my projects, where UI is served by the webpack dev server and CORS is setup for development only. This allows for hot reload, not that it mattered much, but still. When deployed, asp.net app serves the files as well.

1 Like
11

Many thanks - I’ll take a look at that.

12

Since nothing much seem to have happened in this area (https://github.com/aurelia/cli/issues/986) still two years later I usually do like below when starting a new .NET5/Core project in VS2019 and that works fine as far as I’ve seen with requiring css and calling C# web apis in the same project etc.

Run “dotnet new angular” from a terminal (since there isn’t any longer an Aurelia template)

Delete the ClientApp folder (containing the Angular app)

Run “au new ClientApp” and select applicable options like webpack etc. also I chose Web rather than .NET Core since code generated using that was using some outdated stuff last time I tried, thus the “dotnet new angular” above.
I used this: Custom=>App=>WebPack=>Web=>TypeScript=>None=>Sass=>Yes=>None=>None=>Visual Studio Code=>Minimum=>No=>No

Open the csproj file and replace this line in Startup.cs:
spa.UseAngularCliServer(npmScript: “start”);
with:
spa.UseProxyToSpaDevelopmentServer(“http://localhost:8080”);
(the host/port here should match what’s at the end of the aurelia.json file).

If you named your aurelia app something else than ClientApp just change the SourcePath just above this in Startup.cs.

Since I got issues with hot reaload with the SSL enabled I unticked the Enable SSL checkbox in the Debug section of the project in Visual Studio.

Then I just run “npm install” (to download packages) and “npm start” to start the devserver with hot reloading and start the project in VS2019 with F5 as usual and can then set breakpoints either in the browser or the studio and they get hit in both.

To be able to publish the solution from VS2019 I also have to do some minor changes in the csproj file:
Replace:

with:

Remove:

3 Likes
13

Hi @Souldrinker ,

The last bits of your extensive instructions are lost in translation… (or should I say: conversion)
In the .csproj, what do we need to replace with what and what do we remove?

Thanks

14

Ah, sorry. In the PublishRunWebpack target there is a line containing:
Command=“npm run build – --prod”
…there I had to change it to plainly:
Command=“npm run build”

…also I think there will be a line in the same section regarding BuildServerSideRendererer. That whole row should be removed.

1 Like
15

Do you have any advice on how to publish to Azure App Services?

Before I publish, I run au build --env prod which generates output in the ClientApp/dist folder. However, when I publish, the ClientApp/dist folder does not get published up to the Azure App Service.

Is there a way of telling VS to include the ClientApp/dist folder when it publishes?