JavaScript Services / Webpack with Service Fabric

[CuddleBunny]

I've been trying to create a front-end web service with webpack / HMR @ dev time. I have tried both the Angular and React projects. Both projects work as expected outside of Service Fabric. I expect this isn't working due to how SF apps are deployed but there are no errors to indicate that it is broken. It simply doesn't do anything.

Steps to recreate:

1. Create a new Service Fabric project.
2. Add a stateless ASP.NET core project and choose either the Angular or React template.
3. Switch to a single node cluster.
4. Set the deployment strategy to Refresh Application
5. Set ASPNETCORE_ENVIRONMENT to Development in your ServiceManifest.xml:

  <!-- Code package is your service executable. -->
  <CodePackage Name="Code" Version="1.0.0">
    <EntryPoint>
      <ExeHost>
        <Program>Web1.exe</Program>
        <WorkingFolder>CodePackage</WorkingFolder>
      </ExeHost>
    </EntryPoint>
    <EnvironmentVariables>
      <EnvironmentVariable Name="ASPNETCORE_ENVIRONMENT" Value="Development"/>
    </EnvironmentVariables>
  </CodePackage>

6. Run application.

Observe:

• No notice that HMR is connected in the browser console.
• When changing a file such as the Home view, no hot reload occurs.
• After changing a file, even a page refresh will not display changes.
• The only way to see the changes is to delete wwwroot/dist which kicks off the webpack from the msbuild target in the csproj. (Edit: Strangely enough: it seems a clean will also somehow kick off the build despite not removing the dist folder).

Expected Behavior:

Service runs with webpack HMR enabled or app.UseWebpackDevMiddleware throws an error indicating why it does nothing.

[CuddleBunny]

Here is a minimal reproduction project: CuddleBunny/sf-ng-webpack-test

[CuddleBunny]

While working on another project I noticed that I was still running Node v8.7. I upgraded to v10.6 and thought I should try running this sample again. Now, I get an error when WebpackDevMiddleware is called:

"Webpack dev middleware failed because of an error while loading 'aspnet-webpack'. Error was: Error: EPERM: operation not permitted, lstat 'C:\\Users\\cuddl'

The call stack implies that this occurs while trying to load or run one of the temporary file scripts in C:\SfDevCluster\Data\_App\_Node_0\NgTestType_App1\temp\. I am currently waiting on Windows to process permissions for ServiceFabricAllowedUsers in that folder then I will try it again.

Edit: Okay that worked. My knowledge of Node isn't deep enough to understand why this may have worked in 10.6 and not 8.7. I will probably dig in some more this week to determine why it is looking in my user folder. The project is located in C:\Users\cuddl\source\repos\NgTest which has full permissions granted to ServiceFabricAllowedUsers already.

[masnider]

Glad you got it sorted out!