How to set up webpack in AngularJS ASP.NET MVC 5 application? - asp.net

I have this project currently running on ASP.NET MVC and using AngularJS for the front end.
I am using bower and gulp but want to migrate away to use new tooling, if possible webpack.
I have started the migration process, where all bower packages have been moved to package.json.
I need help figuring out how to set up webpack. And how the changes will affect the .NET Bundle.Config.cs file in App_Start.
Basic Project structure:
MyApp/
├── App_Start/
│ └── BundleConfig.cs
│
├── Controllers/
│ └── HomeController.cs
│
├── Content/
│ └── node_modules/
│ └── package.json
│
├── ng-app/
│ └── app.js
│ └── run.js
│ └── routes.js
│ └── controllers/
│ └── homeCtrl.js
│
├── ng-views/
│ └── home.html
│
└── Views/
├── Home/
│ └── Index.cshtml
│
└── Shared/
└── _Layout.cshtml
If anyone has some pointers/ articles/ guides, whatever help is welcomed.
If you need more info on my setup please ask.

Related

font-icons.woff 404 not found with micro frontend

I'm developing a micro frontend, for this I use Webpack 5 Module Federation and ngx-build-plus builder on an Angular 14 application.
When I build my project I get the following files:
dist
├── my-webco
│ ├── 106.js
│ ├── 136.js
│ ├── 497.js
│ ├── .
│ ├── .
│ ├── .
│ ├── icon-font.woff
│ ├── icon-font.woff2
│ ├── index.html
│ ├── main.js
│ ├── remoteEntry.js
│ ├── style.css
So I want to import the main.js file into another application this way:
<script src="https://my-host/my-webco/main.js" type="text/javascript"></script>
<my-web-component></my-web-component>
The webcomponent works well but I have a 404 error on the font because my font is on the path "https://my-host/my-webco/font-icons.woff" and my application will load it on the path "https://my-host/font-icons.woff".
do you know where I can set up this path?

How to use Netlify identity widget in R blogdown

R blogdown is super convenient to publish Rmarkdown report using netlify.
In order to build a private blog and control access, I found netlify identity widget could be a solution. Useful reference are:
Authenticate users with Netlify Identity
netlify identity widget
From the README file in netlify identity widget
"You can add controls for the widget with HTML:
<!DOCTYPE html>
<html>
<head>
<title>A static website</title>
<!-- include the widget -->
<script type="text/javascript" src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
<!-- Add a menu:
Log in / Sign up - when the user is not logged in
Username / Log out - when the user is logged in
-->
<div data-netlify-identity-menu></div>
<!-- Add a simpler button:
Simple button that will open the modal.
-->
<div data-netlify-identity-button>Login with Netlify Identity</div>
</body>
</html>
You can use this global object like this:
// Open the modal
netlifyIdentity.open();
// Get the current user:
// Available after on('init') is invoked
const user = netlifyIdentity.currentUser();
// Bind to events
netlifyIdentity.on('init', user => console.log('init', user));
netlifyIdentity.on('login', user => console.log('login', user));
netlifyIdentity.on('logout', () => console.log('Logged out'));
netlifyIdentity.on('error', err => console.error('Error', err));
netlifyIdentity.on('open', () => console.log('Widget opened'));
netlifyIdentity.on('close', () => console.log('Widget closed'));
// Unbind from events
netlifyIdentity.off('login'); // to unbind all registered handlers
netlifyIdentity.off('login', handler); // to unbind a single handler
// Close the modal
netlifyIdentity.close();
// Log out the user
netlifyIdentity.logout();
// Refresh the user's JWT
// Call in on('login') handler to ensure token refreshed after it expires (1hr)
// Note: this method returns a promise.
netlifyIdentity.refresh().then((jwt)=>console.log(jwt))
// Change language
netlifyIdentity.setLocale('en');
Which blogdown file should I add above code into?
How to integrate netlify identity widget into R blogdown?
Thanks a lot!
UPDATE:
I found two approaches might be helpful:
netlify-plugin-password-protection, which applies staticrypt.
Another tutorial: Password-protected pages on Netlify.
For reproducible example, the Hugo Theme I used in blogdown is pulp theme, the file structure is the following:
.
└── pulp
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── LICENSE.md
├── README.md
├── archetypes
│ └── default.md
├── assets
│ ├── css
│ │ ├── markdown-dark.css
│ │ ├── markdown.css
│ │ ├── style-dark.css
│ │ ├── style.css
│ │ └── syntax-highlight.css
│ └── js
│ ├── jquery-3.3.1.min.js
│ ├── jquery.mark.es6.min.js
│ ├── lunr.js
│ └── search.js
├── exampleSite
│ ├── .gitignore
│ ├── config.toml
│ ├── content
│ │ └── blog
│ │ ├── emoji-support.md
│ │ ├── markdown-syntax.md
│ │ ├── math-typesetting.mmark
│ │ ├── placeholder-text.md
│ │ └── rich-content.md
│ └── static
│ ├── css
│ │ └── custom.css
│ ├── img
│ │ ├── avatar.jpg
│ │ └── favicon.ico
│ └── js
│ └── custom.js
├── images
│ ├── logo.png
│ ├── screenshot.png
│ └── tn.png
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── baseof.html
│ │ ├── list.html
│ │ ├── list.json
│ │ ├── single.html
│ │ └── terms.html
│ ├── index.html
│ └── partials
│ ├── footer.html
│ ├── head.html
│ └── header.html
├── package.json
├── resources
│ └── _gen
│ └── assets
│ ├── css
│ │ ├── style0.css_d11fe7b62c27961c87ecd0f2490357b9.content
│ │ └── style0.css_d11fe7b62c27961c87ecd0f2490357b9.json
│ └── js
│ ├── bundle0.js_d11fe7b62c27961c87ecd0f2490357b9.content
│ └── bundle0.js_d11fe7b62c27961c87ecd0f2490357b9.json
├── static
│ ├── .DS_Store
│ ├── categories
│ │ └── img
│ │ ├── avatar.png
│ │ ├── clear.png
│ │ ├── favicon.ico
│ │ └── search.png
│ └── img
│ ├── avatar-border.svg
│ ├── avatar.jpg
│ ├── bu.png
│ ├── clear.png
│ ├── favicon.ico
│ └── search.png
├── theme.toml
└── yarn.lock

Gatsby/NextJS: group pages by domains

I'm trying to understand how to migrate to Gatsby/NextJS our structure.
src
├── scripts
├── components
├── domains
│ ├── ca.cdn.domain-1.com
│ │ ├── global
│ │ └── pages
│ │ │ ├── page.html
│ │ │ └── page-2.html
│ ├── m.cdn.domain-2.de
│ │ ├── global
│ │ └── pages
│ │ │ ├── page.html
│ │ │ └── page-2.html
page.html files can have different html templates, but sharing some common components from src.
Currently, we generate static pages per domain with Gulp. Tried Gatsby today and pages can be only in src folder. Any suggestions on how to use Gatsby/NextJS with multiple domains in 1 repo?
Also more detailed I described the question here for NextJS.

Add a module/library to meta-toolchain-qt5 sdk

I am trying to add qtcharts to meta-toolchain-qt5. My question is to which
recipes/files should I add qtcharts to have qtcharts on meta-toolchain-qt5
sdk?
I need to compile my program with qmake at
/opt/myimage/2.1.2/sysroots/x86_64-pokysdk-linux/usr/bin/qt5/qmake
I am not sure where should I put the qtcharts. Under meta-qt5 or
meta-myapplication/recipes-qt or somewhere else
here is poky directory:
poky$ tree -L 2
├── bitbake
│ └── ...
├── build
│ └── ...
├── meta
│ └── ...
├── meta-freescale-distro
│ └── ...
├── meta-fsl-arm
│ └── ...
├── meta-myqtapplication
│ ├── classes
│ ├── conf
│ ├── DOC
│ ├── licenses
│ ├── meta-patch
│ ├── README.md
│ ├── recipes-apps
│ ├── recipes-bsp
│ ├── recipes-connectivity
│ ├── recipes-core
│ ├── recipes-kernel
│ └── recipes-qt
├── meta-openembedded
│ └── ...
├── meta-poky
│ └── ...
├── meta-qt5
│ ├── classes
│ ├── conf
│ ├── COPYING.MIT
│ ├── files
│ ├── lib
│ ├── licenses
│ ├── README
│ ├── recipes-connectivity
│ ├── recipes-devtools
│ └── recipes-qt
├── meta-selftest
├── meta-skeleton
├── meta-yocto
├── meta-yocto-bsp
First of all, In Yocto/Bitbake while You are using meta-toolchain-qt5 recipe for generating SDK, You need to apply qtcharts as nativesdk package into nativesdk-packagegroup-qt5-toolchain-host.bb recipe, moving recipe to another localisation like poky/ will not apply them as rdepends package.
I see that qtcharts recipe is not available as nativesdk package, so You can extend BBCLASSEXTEND variable for this purpose, or use nativesdk class file.

gnu-make: Using individual files in a folder as dependencies and run rule on all filenames in folder

Suppose I have a file structure as follows:
code
├── configure
├── configure.in
├── Demo
│ ├── experiments
│ │ ├── 1.txt
│ │ ├── 2.txt
│ │ ├── 3.txt
│ │ ├── 4.txt
│ │ ├── 5.txt
│ │ └── 6.txt
| |___test.cpp
I am trying to create a rule that uses each one of the files in txt and creates the following files:
1.test
2.test
3.test
4.test
5.test
If I had the rule:
%.test: %.txt
do something
How do I run it on every file in experiments eg:
make *.test
and then run them individually eg:
.\*.test?
I really need help with this as I have thousands of files to process in this way.
You can use $(wildcard):
TEST_SOURCES = $(wildcard *.txt)
TEST_OUTPUT = $(patsubst %.txt,%.test,${TEST_SOURCES})
all: ${TEST_OUTPUT}

Resources