We Keep Coding

Create React App Webpack Dev Server - How to select HTML documents on the same path based on query string?

I have a create react app, and I have two requirements that I am trying to achieve:
1 Language management for index.html:
When a user visits my-app/any/subpath?lng=en or my-app/any/subpath they should be served index_en.html which links to bundle.js
When a user visits my-app/any/subpath?lng=de they should be served index_de.html linking to the same bundle bundle.js
This requirement is pretty easy. I can solve it by serving my frontend with something like NGINX and selecting the html document by the query string lng. However, the hard part is getting this functionality in my local React development environment, which is my second requirement below:
2 I want to achieve this in my local dev environment, preferrably keeping Webpack Dev Server, so that I don't loose the benefits of hot reloading and automatic rebuilding on react code changes.
What I have done so far:
It seems that Create React App does not support this by default, so I have ejected through npm run eject. I build index_en.html and index_de.html from a base html document as a part of npm run start/build commands. To build several html documents, I had to modify the webpack.config.js as so:
const languages = ["en", "de"]
...
module.exports = function(webpackEnv){
...
return {
plugins: [
...otherPlugins,
...languages.map(lng=> new HtmlWebpackPlugin({
inject: true,
template: path.resolve(appDirectory, `public/index_${lng}.html`),
filename: `index_${lng}.html`,
...(isEnvProduction ? productionConfig : {}),
}))
]
}
}
This produces index_en.html and index_de.html the way I want, both linking to bundle.js.
Now the issue is that if I run npm run start, they are both served at the same path, so the Webpack Dev Server doesn't know which one to serve. I want to select between them based on a query parameter ?lng=de. Is this even possible with the webpack dev server? And what are my options?
I have also tried putting the localized index.html's into separate folders per language. E.g. public/de/index.html, but if I access myapp/de/some/subpath I will still be served the root index.html (english).

How to import template made by webpack into Laravel

I am developing a Laravel project. And I am using a third party HTML template which is using webpack and laravel mix to compile all assets. I need to know is there any way to import that HTML template to Laravel and compile it within the Laravel project. I am new to frontend technologies like webpack/laravel mix. It would be great if anyone can guide me. Thanks

I'm not familiar with Laravel, but since you have NodeJS in your stack, you should be able to incorporate a build step for copying templates into wherever Laravel needs them (I guess /assets/templates?)
Something like this perhaps?
const fs = require('fs')
webpack(webpackConfig, error => {
if (error) console.error(error)
else {
fs.copyFileSync('generatedTemplate.js', '/assets/templates')
}
})
I can't offer much more advice without knowing your setup. I think utilizing NodeJS is the solution here though.

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.

Moving from Gulp/Grunt to Webpack for an AngularJs 1.x project

I have a two-year-old AngularJs 1.x project, which is built with Gulp for development and Grunt for production (don't ask me why; I don't know either).
The build process is basically:
Compile all scss files into one css file
Merge all JS files into one JS file. We are not using any import mechanism. Each file is basically one of AngularJs' controller, component, service or filter. Something like this:
angular.module("myApp").controller("myCtrl", function() {//...});
Merge all html templates into one JS file. Each template is hardcoded with $templateCache.
Moving assets like images and fonts into the build folder.
Moving third-party libraries into the build folder.
Now I want to switch to webpack for this project. I want to incrementally modernize this project, but the first step would be just building it with webpack with a similar process like the above. I would like to keep the code base as much the same as possible. I don't want to add import for all the JS files yet. There are too many. I would also like to add a babel-loader.
I have some basic concepts about webpack, but never really customized the configuration myself.
Would anyone please give me some pointers? Like which loaders/plugins would I need, etc.? Thanks!

My process to do such a transition was gradual, I had a similar Grunt configuration.
These are my notes & steps in-order to transition to Webpack stack.
The longest step was to refactor the code so it will use ES6 imports/exports (yeah, I know you have said that it is not a phase that you wanna make, but it is important to avoid hacks).
At the end each file looks like that:
//my-component.js
class MyComponentController { ... }
export const MyComponent = {
bindings: {...},
controller: MyComponentController,
template: `...`
}
//main.js
import {MyComponent} from 'my-component'
angular.module('my-module').component('myComponent', MyComponent);
In order not going over all the files and change them, we renamed all js files and added a suffix of .not_module.js.
Those files were the old untouched files.
We added grunt-webpack as a step to the old build system (based on Grunt).
It processed via Webpack all the new files (those that are without .not_module.js suffix).
That step produced only one bundle that contains all the files there were converted already, that file we have added to concat step.
One by one, each converted file gradually moved from being processed by Grunt tasks to be processed by Webpack.
You can take as a reference that webpack.config.
Good luck.

Webpack import angular in angular-webpack-workflow demo project

I'm inspecting this Webpack demo project https://github.com/Foxandxss/GermanWords-ng1-webpack. This project contains in several files this line (features/home/index, features/login/index):
import angular from 'angular';
I don't understand - if 'angular' library will be included several times in result js file because this library exists in several source files? I've looked at webpack config file, but can't understand. Please, can you clear this questions?

It's just to be sure that angular will be available for every module. Imagine you use a feature to be a new standalone site, you will have already the code ready. Always think like every feature is a standalone (handle routes, dependencies, controllers, views etc.).
Webpack will handle the dependencies and inject only once angular, dont worry. Like #thsorens says in comments : "All dependencies in your files needs to be imported where it is used."
Oh and for furthermore, i've found this yeoman generator base on Foxandxss work : https://github.com/Aleksion/generator-angular-webpack-babel
Have fun.