Javascriptservices: webpack.config.vendor.js has to be manually executed after cloning the repo

[empz]

I see the command is there in the prepublish section, but it doesn't seem to be executed when doing dotnet run.

So if it can't be automated, maybe add an npm script to run it?
Something like

"scripts": {
    "start": "webpack --config webpack.config.vendor.js && dotnet watch run"
  },

So then, people just need to npm start (just like node/npm devs are used to do).

[SteveSandersonMS]

What do you mean by "after cloning the repo"?

Do you mean literally cloning this repo (the one at https://github.com/aspnet/JavaScriptServices)? If so, that's not the intended way to build an application with these technologies. The intended way is to use one of the templates/generators, i.e., the Yeoman generator or the Visual Studio template.

If instead you mean that you are using one of those generators/templates, but somehow it's still necessary to regenerate the vendor files before running, that would be a bug. If that does happen for you, could you please reopen this with repro steps? Thanks!

[empz]

I meant by actually cloning the repo. I know it's not the preferred way but since the templates are constantly being updated, that's the easiest way to get the latest updates.

[threenine]

I have this same issue when creating a new project using the Yo Generator and then when I commit to my own GitHub Repo. When I clone the new project repo to a new machine I am unable to dotnet run the app.

The app starts but whenever I browse to localhost:5000 , I get the error page.
Browsing the ClientApp/dist folder I notice that only the _placeholder.txt is present.
the same for wwwroot/dist

When I manually ran webpack --config webpack.config.vendor.js && dotnet watch run
the files seem to be created however still cannot browse the http://localhost:5000

The error log displays
fail: Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware[0]
An unhandled exception has occurred: Call to Node module failed with error: Prerendering failed because of error: Erro
r: Cannot find module '/home/gary/code/sourcelink/ClientApp/dist/main-server'

It looks like main-server.js is not generated.
Currently trying to figure out where this is generated

I seem to resolve the issue by running
npm install
*webpack --config webpack.config.vendor.js *
*webpack --config webpack.config.js *

manually after cloning the repo. The project is then able to run no issues

[SteveSandersonMS]

Yes, the wwwroot/dist and ClientApp/dist files have to be built before the app can run, just like how the C# has to be built before it can run.

You can do one of the following:

• Add the wwwroot/dist and ClientApp/dist files to source control, so they are automatically there when you clone to a new working copy
• Or, amend your .NET build process so that it also invokes Webpack to build those files each time
• Or, just build them manually after the first restore on a new machine

The latter option is probably the least amount of maintenance effort for you overall (and has no impact on build times), hence it being the way the project is set up.

[theCuriousOne]

And how exactly to:

"Or, amend your .NET build process so that it also invokes Webpack to build those files each time"

I can not make it work with a react app.

[AllainPL]

If you are using *.csproj you could add it to the build process.
Interesting thing - there is already a configuration for that but only for publishing:

 <Target Name="RunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec Command="npm install" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
    <Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />
    <!-- other stuff -->
  </Target>

[theCuriousOne]

Hi @AllainPL , thanks for the fast reply.

So I must run the webpack -env.prod so the files are actually written on disk?? (As far as I understand the code that you mentioned is for deploying/ production. )

What is the point then of adding:
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true, ReactHotModuleReplacement = true });

[AllainPL]

AFAIK it works only with the webpack.config.js, unless you change the config file

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
                    HotModuleReplacement = true,
                    ReactHotModuleReplacement = true,
                    ConfigFile = "webpack.more.awsome.config.js"
                });

but quick glance at the source code suggests it works only with one file. Maybe it could be a change request to add multiple config files to work with. Unless there is an other option i do knot now of.

[AllainPL]

@theCuriousOne

The naive version would be to add to csproj this:

<Target Name="TestTarget" AfterTargets="Build">
    <Exec Condition="$(Configuration) == 'Debug'" Command="webpack --config webpack.config.vendor.js" />
  </Target>

But it will make your build MUCH longer. So the better way would be probably to add some checks if file exists etc. But again - that's A solution - not sure if it's even close do decent ;)

[SteveSandersonMS]

The latest sources contain a bit of extra logic in the csproj to run webpack if you don't have the dist folder on disk: https://github.com/aspnet/JavaScriptServices/blob/dev/templates/AngularSpa/AngularSpa.csproj#L32. Maybe that's what you're looking for.

[AllainPL]

Thanks @SteveSandersonMS, that helps also me a lot! (And makes my comments obsolete ;) )

[theCuriousOne]

@AllainPL I have tried it with webconfig there, but with no success / change
@SteveSandersonMS that looks somewhat closer to what I want. Will try it out. Thanks

Extra question (maybe of topic). Does it have to be the web.config in the same folder as the .csproj file?

[robertmclaws]

Also, this logic does not seem to take into account if you upgrade any of the components. For example, I've upgraded Bootstrap to v4 Alpha 6 and JQuery to 3.2.1, and vendor.js + vendor.css remain unchanged after a build.

It seems like a better approach would be to either a) have a special build configuration as part of the default template that lets you build the vendor stuff too, or b) add in some bindings to Task Runner Explorer that let you trigger a vendor build whenever.

[aherrick]

I keep a simple webpack_build.bat file in my solution. Running the following: webpack --config webpack.config.vendor.js && webpack

Use the following to execute: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.CommandTaskRunner

[theCuriousOne]

In case anyone else have a similar problem/issue they can try and do the following:

• If you want to have a HMR functionality, make sure you have ASPNETCORE_ENVIRONMENT set to Development (Maybe this should be add in the docs)

• Sometimes the changes would not reflect directly in the browser, in that case CTRL+C to stop application, delete both "dist" folders, and run it again "dotnet run" (this way you ensure the app is rebuild from scratch)

-Do a script similar like the folks that did https://github.com/kriasoft/aspnet-starter-kit -- see run.js (currently in process of doing something like that, but I think it should work)