ASP.NET Core - Run webpack on Azure with git deploy

Question

I'm working on a ASP.NET Core web application (.csproj) that's being deploy on Azure directly from a git repo. I'm also using webpack to generate production bundles into a wwwroot/build folder.

I don't want those files in my repo so I excluded them, but of course when doing the gitdeploy the files are not sent to the server. The thing is I need to run a custom deployment script so I can run npm run prod-build (a script set in the package.json file) that runs webpack with the production flag. I'm looking into a kudu script but couldn't find any example for the new ASP.NET Core format.

I could make a deployment branch and push the bundles into it, but I'm trying to look for a "cleaner" solution.

Any ideas on what's the best approach to achieve this?

Thanks!

Answer 1

The following configurations in the .csproj file work for my webpack script. You may try to replace it with your script.

<Target Name="RunWebpack" BeforeTargets="Publish">
    <Exec Command="npm install" />
    <Exec Command="npm install webpack" />
    <Exec Command="npm install vue-loader" />
    <Exec Command="npm install vue-template-compiler" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.js --env.prod" />
</Target>

Answer 2

One option is setting the default node (aka NodeJS) version for your App Service to something more recent e.g. 10.14.1.

To change the default node version open Azure portal and navigate to the Application Settings for your Azure App Service. Then change the setting named WEBSITE_NODE_DEFAULT_VERSION to something like 10.14.1 (or later).

With that in place you can add webpack to the devDependencies in your package.json file and run npx webpack as part of the post-build event of your project. This assumes the file webpack.config.js is at the root of your project (same directory as your .csproj file).

To determine which node versions are available for your App Service, you can use the "Advanced Tools" (available from App Service in the Azure Portal as well). Once you have opened the browser window for the Advanced Tools, click on "Debug Console", then "PowerShell". Using dc to switch to directory D:\Program Files (x86)\nodejs. Each installed node version is in a separate directory there.

---

Notes:

1. npx - strictly speaking - is part of npm. However, a later version of node will also have a more recent version of npm. Node 10.14.1 comes with npm version 6.4.1. npx was introduced with version 5.2 of npm.

2. To add webpack to your package.json file, execute npm install webpack --save-dev in the directory of that package.json file.