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.
Antwerp-based teacher at the Karel de Grote University of Applied Sciences and Arts. Avid programmer at the backend, frontend, and everything in between.
Location
Antwerp, Belgium
Work
Lecturer at KdG University of Applied Sciences and Arts
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!
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("ready!");<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.
Antwerp-based teacher at the Karel de Grote University of Applied Sciences and Arts. Avid programmer at the backend, frontend, and everything in between.
Location
Antwerp, Belgium
Work
Lecturer at KdG University of Applied Sciences and Arts
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!!
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"],
},
},
Antwerp-based teacher at the Karel de Grote University of Applied Sciences and Arts. Avid programmer at the backend, frontend, and everything in between.
Location
Antwerp, Belgium
Work
Lecturer at KdG University of Applied Sciences and Arts
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.
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.
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).
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
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 ...
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
We're a place where coders share, stay up-to-date and grow their careers.
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!
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!
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.
These two articles were seriously helpful man! thank you!
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("ready!");<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.
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!!
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"],
},
},
Great! That looks like an ideal solution. Thanks for the addition!
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.
So silly mistake. I did send wrong path to content. It should be: content: ["./../Views/*/.cshtml"]. Now it works like a charm.
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
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.
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
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 ...
Great article, thanks it really helped a lot...
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