We Keep Coding

build react app and widget js in one webpack config

My task is to introduce library to existing create react app based application.
This library need to be build to separate chunk and should not contain any contenthash in name. Ideally should be build to buildDir/js/widget.js and that is.
Currently all my ts are compiled to js during build and are served with contenthash in name.
I don't know how to build widget.js from src/widget/index.ts because entry point is src/index.ts and it never catch src/widget/index.ts because it is not imported anywhere in main entry point.
This widget.js later will be imported in thirdparty web apps via <script> tag and it will be used to initialize some library like MyLibrary.init(...) so I think webpack should also have some info so this one widget.js should export its methods in special way to the browser during importing external script.
What is best way to get this build proces to work. Also it could be really nice to have it also during development with hot updates.
I don't want contenthash in resulting buildDir/js/widget.js because I don't want to ask my customers every time I have new version to update their <script src="..."> for new file name.
Should I eject this CRA? I'm not sure even if I add another entry point that I will be able to control output file name for one entry point as it is and for another without contenthash.
Or maybe it will be better to create separate webpack config (next to unejected CRA) for this widget but then how to run everything in development mode with hot updates?
I'm using webpack 4.42.0 here in this project.

for your case maybe you need this:
https://dev.to/zhiyueyi/include-your-react-widgets-in-any-web-page-emj
https://github.com/ZhiyueYi/demo-react-web-widget

How can we integrate Vue JS with ASP.NET MVC and nuget packages

How can we integrate Vue JS with MVC Project that is existing and using with Nuget Package.
Tried with below approach.
<h3>VueJS 2 in ASP.NET MVC 5</h3>
<div id="aboutPage">
{ { message }}
</div>
<script>
var aboutPage = new Vue({
el: '#aboutPage',
data: {
message: 'Hello Vue! in About Page'
}
});
</script>
Question:
Is there need for any additional package like - webpack or gulp, we already have bundle config of MVC?
2.
How can we create separate files or design for each view like:
To separate the service call (to call web api from client side)
separate out the template file.
methods or logic to write in JS.
any example for MVC with VueJS like - controller, view,service, vue JS file is great..
Thanks a lot !

You can use vuejs buy adding it to your layout.
#Scripts.Render("~/node_modules/vue/dist/vue.min.js")
You need to install Nodejs on your machine to use NPM and ES6 features.
For integrate Vue.js in .NET MVC you need module bundler (webpack, gulp),can choose one of this options, the popular is webpack:
1:(Gulp, Browserify), which has some limitations such as supporting only require syntax handling assets. and the setup is kind of complicated.
2:(Webpack), which has a lot of cool things you can do with it, Hot Reload. check this repo
by using webpack, you config it to handle just js files and it will handle js files for build too , upon build each entry will be copied inside Scripts/bundle, also you need some loaders such ass (vue, scss, css and js) for webpack. check this
Webpack uses webpack-dev-server for development which is basically a node.js based server which serves assets (javascript, css etc) that our browsers can interpret. Usually these assets include some development friendly features like Hot Reload. These assets are not minified and are quite different from the ones generated when building for production.
devServer: {
proxy: {
'*': {
target: 'http://localhost:5001',
changeOrigin: true
}
}
},
webpack-dev-server has a feature which can proxy requests from one url to another. In this case, every request from "webpack dev server " will be proxied to your "asp.mvc server". So, if we run our MVC app on http://localhost:5001 and run npm run dev , on port 8086 you should see the same output as from our MVC app.
Answers:
1: yes you have to setup Webpack or Gulp.
2. by using webpack you can all thing for file structuer that you want
check this tree
-app
--libs
----utils
----components
---------commons
---------.......
-----pages
---------.....
check this articles
https://medium.com/corebuild-software/vue-js-and-net-mvc-b5cede228626
http://www.lambdatwist.com/dot-net-vuejs/

If you want to keep the .cshtml files and use MVC as a multipage application, you can take a look at this template as an example or starting point. https://github.com/danijelh/aspnetcore-vue-typescript-template
You can create modules of pages which you want to enhance with Vue and import that bundle.

How can I create a shared utility to use with two different AngularJS apps (on different html pages)?

I'm working on a multi-page site using AngularJS, and I want to write a utility that can be included in more than one page. I've looked at services and providers, and all the examples I find are single-page examples. I'm not sure how to generalize this to multiple apps used on different pages.
This is what I want to have for my two different pages/apps.
in app1.js:
var app1 = angular.module('app1',['myUtil'])
app1.controller('ctrl1',function ctrl1($scope,myUtil){...})
in app2.js:
var app2 = angular.module('app2',['myUtil'])
app2.controller('ctrl2',function ctrl2($scope,myUtil){...})
in myUtil.js:
??? Provider? Service? Module?
All the examples I have found for providers and services show them as being attached to a single app. Is this possible with AngularJS? If so, what am I missing?

The answer from zero298 is a nice answer as it's a great way of organising and reusing the utility module you create.
If you want a less broad and more "codey" answer, then one way of doing it would be to have some kind of utility module that houses whatever services you want to put in it, and then you can pass that in as a dependency for all apps that use it. This will all depend on your build process as to how you import/organise the files, but as a very basic example you could have a "utilsmodule" module with a "utils" service:
myUtils.js:
angular.module('utilsmodule', []);
// Service could be in another file
angular.module('utilsmodule').service('myutil', function() {
return {
myUtilFunction : function() {
return "This is from myutil";
}
};
});
Then in your app files you can pass in the module by name, which will give the app access to the 'myutil' service.
app1.js:
var app1 = angular.module('app1',['utilsmodule'])
app1.controller('ctrl1',function ctrl1($scope,myutil){...})
Then you would import the myUtils.js file before the app1.js file so that the "utilsmodule" module is registered with angular before your app is created. You do the same with app2 and the utility module should be available to both.
Example Plunker

This may be a bit too broad. However, what I would suggest you do is create a library module dedicated to the feature/utility that you want to make available to your projects.
I would suggest using npm to organize all of this. Give this feature module it's own package.json and add whatever code you need to make it run. In your consumer projects, add the library module as a dependency.
A good method to get this working locally (as well as quickly since you don't have to constantly push to the npm registry) is to use the npm link utility.
If your consumer projects are already npm oriented, the workflow would be as follows:
Create a new directory to contain your utility library module lets call it my-utility
cd to the new directory
npm init to create a package.json in this library
npm link to make the library available locally
cd to any of the consumer projects
npm link my-utility so that the consumer projects create a symlink to the local folder that contains your utility module
After that is setup, depending on how your consumer projects build or use dependencies, you can use your new utility library in your top level projects.

Include Javascript files (jQuery, Bootstrap, etc...) on a Angular 2 Component

I'm creating a SPA that have two parts. The landing page that is public and it's used to explain things about the project and to show up a login form. The other part of the application is not public and only registered users can access.
Each part of the site (Home & Dashboard) have different components. The problem I'm facing is that these component have different Javascript files that I already have bundled (home.js & dashboard.js). I've found in Internet different solutions but they do not look right to time.
Some details about the environment is that the application was scaffolded by Angular CLI so webpack is included, in case it makes easier the task.
I would like to know if there is a proper way to do it that meets Angular 2 Good practices.
Any help would be appreciated.

-Inside angular-cli.json there is a section called apps. Inside that there is scripts section you can import your js files there angular cli will bundle that js files into scripts.bundle.js and put it to index.html
"apps": [
{
"scripts": ["../node_modules/jquery/dist/jquery.min.js",
"../node_modules/hammerjs/hammer.js",
"path_to_your_file/dashboard.js",
"path_to_your_file/home.js"]
}
-In another way you can import them inside index.html in classic way.
I'm not sure but i imported 'hammerjs' inside app.module.ts but i think it works because it is a module which installed via npm.
import { MaterialModule } from '#angular/material';
import 'hammerjs';
like this. there is nothing more down about hammerjs. You can turn your js files to module and install them like hammerjs.

How to organize App in durandal?

I have created a simple durandal SPA based on tutorial from #john_papa, in this video from plural sight, he installs the nuget package but the video is already like one year old.
In that version, when the durandal package is installed it would create an App folder, and then a durandal folder with many js files there.
In the new version of durandal, there is no App folder created and instead all durandal files are created under /scripts/folder.
Based on the tutorial I created my structure like this:
http://screencast.com/t/13B4YhqExVRQ
However when I run it I got on F12 developer tools this error:
http://screencast.com/t/Sfdd0kLK
I know the path is different to the tutorial, thats why I ask how should I organize and how should I use the define method or function.
I tried
define(['Scripts/durandal/system', 'logger'],
but that didnt work
I noticed my main.js has:
require.config({
paths: { "text": "durandal/amd/text" }
});
define(function (require) {
var system = require('durandal/system');
app = require('durandal/app');
system.debug(true);
app().start().then(function () {
app.setRoot('shell');
});
});

Your question is quite opinionated in that project structure can vary greatly depending on who you ask. Given that I will give you my quick opinion -
Anything that you do not plan to modify should be in your scripts or vendor folder. In the project structure you are referencing I would have my Durandal and related scripts in there.
Anything that you plan to modify should be separate. If that means placing an App folder at root then do that. I would suggest keeping it all under one directory though (such as App) so that by convention you can set up all of your routes and other application code.
I always use a convention of separating views and view models as Durandal 2.x suggests (root/app/views // root/app/viewmodels) and have a well defined structure from there such as having a home directory on each side.
As far as why it isn't working currently you need to point your require.js config in main.js to the correct directory that Durandal lives in.
I would add this to your config -
require.config({
paths: {
'text': 'durandal/amd/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
'transitions': '../Scripts/durandal/transitions' }
});

This document helped me to find the problem.
http://durandaljs.com/documentation/Conversion-Guide.html