DEV Community

Cover image for Managing ASP.NET Core MVC front-end dependencies with npm and webpack (part 2)

Managing ASP.NET Core MVC front-end dependencies with npm and webpack (part 2)

Lars Willemsens on April 09, 2021

This post is the second part of a two-part article on managing Javascript and CSS dependencies within a multiple-page application written in ASP.NE...
Collapse
 
fawkes07 profile image
Hugo Ruvalcaba

Hey bro!

Great post! this guide was awesomely helpfully as first aproach of webpack! just one question. I followed this project as learn process but I stoped with a little prolem, My dropdown buttons doesn't work :(

Searching in other sources I see that popper is requeried for this but in your code is already imported! (@popperjs/core). So what is the real problem here? Any idea? I just want to be sure I know why this could happend to avoid and learn how to fixit by my own for future projects.

Again. Thanks a lot for your time writing this!

Collapse
 
larswillemsens profile image
Lars Willemsens

Hi!
First thing to check: on that page where you're using the dropdown, you should include the 'bootstrap_js.entry.js' script.
If you have the log statement in there, you should see 'The 'bootstrap_js' bundle has been loaded!' in the console.
Then, ensure that the popper import is listed in 'bootstrap_js.js'. To be absolutely sure, you can even inspect 'bootstrap_js.entry.js'. It's unreadable, but searching for popper should give you some results.
Hope this helps!

Collapse
 
joonhwan profile image
joonhwan

With my limited knowledge of webpack + asp net core, I've never had satisfying project template during last years.

Thanks for this great series of posts.

Collapse
 
d0rf47 profile image
Michael j.

These two articles were seriously helpful man! thank you!

Collapse
 
martajohnsson profile image
Marta Johnsson

Hi, Your guide was very helpful. But I wounder how I can use jQuery now.
I'm just testing to add some script:
<br> $(document).ready(function () {<br> console.log(&quot;ready!&quot;);<br> });<br>
On a contact page in script section but getting: Uncaught ReferenceError: $ is not defined

I know I should not put code like that but I'm working on a huge refactoring and there is a ton of such scripts everywhere.

Collapse
 
larswillemsens profile image
Lars Willemsens

Hey, thanks for your comment! You won't be able to use jQuery in a script section using this setup. You can use jQuery in a JavaScript file that will be picked up by webpack, however.
If you do need jQuery in an inline JavaScript section, then I'd recommend adding reference to a jQuery CDN as well.
Hope this helps your refactoring. Good luck!!

Collapse
 
martajohnsson profile image
Marta Johnsson

Thank You for Your answer.
I did find another solution. I can use expose-loader to make it work.
{
test: require.resolve("jquery"),
loader: "expose-loader",
options: {
exposes: ["$", "jQuery"],
},
},

Thread Thread
 
larswillemsens profile image
Lars Willemsens

Great! That looks like an ideal solution. Thanks for the addition!

Collapse
 
martajohnsson profile image
Marta Johnsson

I've been trying to add purgeCSS in my postcss.config.js without success. Do You have any idea why it should't work as excepted?
My css is just blank after that process.
I would like to work with scss files from node_modules/bootstrap/scss/bootstrap and be able to add custom configuration.
I ask because You mantion CSS pruning in Your article.

Collapse
 
martajohnsson profile image
Marta Johnsson

So silly mistake. I did send wrong path to content. It should be: content: ["./../Views/*/.cshtml"]. Now it works like a charm.

Collapse
 
pykos profile image
Blaž Lozej

Great article, thanks it really helped a lot...

Collapse
 
michaelkaramanolis profile image
Michael Karamanolis • Edited

Quick question, how would i deploy from github to Heroku currently i tried using the following buildpack but no joy github.com/jincod/dotnetcore-build...
Log follows
-----> Building on the Heroku-20 stack
-----> Using buildpack: github.com/jincod/dotnetcore-build...
-----> Core .NET app detected

Installing dotnet
-----> Removing old cached .NET version
-----> Fetching .NET SDK
-----> Fetching .NET Runtime
-----> Export dotnet to Path
-----> Project File
/tmp/build_2b8f36bf/SkyQR.csproj
-----> Project Name
SkyQR
publish /tmp/build_2b8f36bf/SkyQR.csproj for Release on heroku_output

Welcome to .NET 6.0!

SDK Version: 6.0.201

Installed an ASP.NET Core HTTPS development certificate.
To trust the certificate run 'dotnet dev-certs https --trust' (Windows and macOS only).

Learn about HTTPS: aka.ms/dotnet-https

Write your first app: aka.ms/dotnet-hello-world
Find out what's new: aka.ms/dotnet-whats-new
Explore documentation: aka.ms/dotnet-docs
Report issues and find source on GitHub: github.com/dotnet/core

Use 'dotnet --help' to see available commands or visit: aka.ms/dotnet-cli

Microsoft (R) Build Engine version 17.1.0+ae57d105c for .NET
Copyright (C) Microsoft Corporation. All rights reserved.
Determining projects to restore...
Restored /tmp/build_2b8f36bf/SkyQR.csproj (in 5.27 sec).
SkyQR -> /tmp/build_2b8f36bf/bin/Release/net6.0/linux-x64/SkyQR.dll
/usr/bin/sh: 2: /tmp/tmp4cf9164d7b7042719df0c7cd48e78bf8.exec.cmd: npm: not found
/tmp/build_2b8f36bf/SkyQR.csproj(35,5): error MSB3073: The command "npm run build" exited with code 127.
! Push rejected, failed to compile Core .NET app.
! Push failed

Collapse
 
michaelkaramanolis profile image
Michael Karamanolis

I figured it out
pls follow this mans instructions creating a container
faun.pub/deploy-net-core-api-to-he...
big shout out!!!!
note the the cli expects mcr.microsoft.com/dotnet/aspnet:6.0 for dotnet 6.0
Yay its now working ...

Collapse
 
atrevorwaters profile image
Trevor Waters

This was amazing, I had to make an account to say Thank you! So much accomplished in one place, it's really hard to find.

Collapse
 
beginner profile image
Mo

Hi Lars,

It's maybe too much asked, but can you guide us true the proces of getting the application to production please? Or is there an other way to find it out? The thing is that i'm a student and i'm still figering out what's under the hood of the wonderfull application you've build! It will take me for ages to really understand what's going on!. So therefore, I would very appreciate it if you can help me on my way mastering programming in general using your primarly using your app. Which is in my opinion the best starting point.

Thank you in advance.

With kind regards,

Mo

Collapse
 
pereiradiasgonc profile image
Gonçalo Dias

Thanks for this. Quite helpful!
"This guide may have filled a gap by bringing npm and webpack into MVC and MPA applications, specifically .NET Core and .NET 8 apps." It sure did