We Keep Coding

How to share webpack result between frontend and backend?

I have two projects - frontend (vue) and backend (nodejs) - of one web app. I'm using webpack to build frontend. All images change their names to hashes during building. Now i need to know some of them at backend side. What is best way to share that info between frontend and backend?
I can use simple hardcoding approach or rely on custom hand-written mapping and use custom script to load assets. But both of these are fragile approach.
Webpack allows multi-build projects using target. Exactly, how to achieve this using Webpack?

Webpack programmatic can help you webpack Node API
// webpack/script.js
import webpack from "webpack";
const compiler = webpack({ /* your config*/ }, (err, stats) => {
// stats.toJson(options)
console.log(stats.toString())
// make api call for getting the info in backend with stats of your choice
})

How to render ejs files in Webpack

As part of a MOOC I created a CRUD application using Node JS, Javascript, Express, MongoDB, and EJS.
Now, I want to convert it to a decentralized DAPP using Ethereum Solidity and Truffle Boxes aka boilerplate (at https://truffleframework.com/boxes).
I am using Truffle Webpack boilerplate for this conversion inside which I plan to re-use the existing code and connect it with Solidity Code but the only challenge I have is in using my EJS files with webpack.
I am unable to identify what changes shall I make in the Webpack config.js so that it renders the EJS files.
Please help if someone has tried to implement EJS files in Webpack.
Thanks in advance.

There may be other ways to accomplish, but I ended up using WebpackShellPlugin and ejs-cli to compile .ejs views:
new WebpackShellPlugin({
onBuildEnd: [`${PATHS.node_modules}/ejs-cli/bin/ejs-cli --base-dir ${PATHS.root}/views/ '*.ejs' --out ${isDev ? PATHS.dev : PATHS.build}/`],
safe: true
})
You will need to adjust above webpack.config.js block for your project specifics, but hopefully this will help in some way.
ejs-cli: https://www.npmjs.com/package/ejs-cli
webpack-shell-plugin: https://www.npmjs.com/package/webpack-shell-plugin

How to import modules in js files as you do in typescript?

So basically the problem is this. I need to use some FCM cordova plugins in my ionic v3 project, this project as been modify so it is based in javascript.
I need to be able to import modules as I usually do in typescript files, I mean do something like this:
import { FCM } from '#ionic-native/fcm';
But in js, so I can use methods and functions of these plugins and components in js
Currently, I'm trying by using require.js since guys bellow gave me the idea:
var FCM = '#ionic-native/fcm';
require([FCM], function(fcmodule){
// use module
})
but it is not working so far, I'm getting these errors

There are various AMD libraries, some of them are systemjs, requireJS.
If you are using requireJS, you can use var FCM=require('#ionmic-native/fcm');.
If you are using es6+ then you will get support of import keyword.

Spring and react integration

I have a problem with integrating reactJS and spring. I know java very well, but I am a beginner in frontend technologies.
I have a spring controller, which simply returns index.html view, which has a script tag with main.js file.
At the beginning it was simple and worked, but then I decided to use react-router component,which requires this :
var Router = require('react-router');
In the browser I got the following error : ReferenceError: require is not defined
I've made some google reasarch and I found that I need some libraries like gulp, browserify etc ( I am not familiar with these right now ). I found also many examples, but these examples are only js examples where I need to run gulp file etc.
I'd very grateful if somebody gives me a hint what should I learn to be able to integrate it.

Here is a tutorial on using react-router, where you can find how to add dependencies and build frontend:
https://github.com/reactjs/react-router-tutorial/tree/master/lessons
You'll also need to configure spring to work as a SPA, which you can do in the controller:
#RequestMapping(value="/**", method=HTTPMethod.GET)
public String index(){
return "index"
}

Using Jade Templates (jade-lang.com) client-side

I'd like to use Jade templates client-side. Preferably generated using the Rails 3.1 asset pipeline. I can't really figure out how to do this.
Anyone who've stumbled upon the same problem and found a great solution? Any thoughts are much appreciated.
http://jade-lang.com/
http://ryanbigg.com/guides/asset_pipeline.html

If you use browserify you can use this handy jade middleware: jadeify.
Then you can just call jadeify("foo.jade", { x : 4, y : 5 }) browser-side after pointing a views directory at the middleware and you get back a jquery handle.

P.S: Probably right now Substack's answer is better.
browserify
Maybe you can use https://github.com/substack/node-browserify
Browser-side require() for your node
modules and npm packages
Just point a javascript file or two at
browserify and it will walk the AST to
read all your require()s recursively.
The resulting bundle has everything
you need, including pulling in
libraries you might have installed
using npm!
Browser
http://jsperf.com/dom-vs-innerhtml-based-templating/53 => The performance isn't that great according to this benchmark => http://gist.github.com/raw/550723/12d176698628e30a1df398c7ac7aea93924e1294/jade.js. But according to TJ it was never supposed to be used in the browser, but node.js instead. In that case it is going to be pretty fast. There are a lot of alternatives which you can use in the browser instead.

Checkout Blade. It is a Jade-like HTML template engine that is designed for client-side (and server-side) use. There are some other features that you guys might like, as well.
EDIT: But, only for Node.js servers. There is no Ruby implementation at this time.

This feature is now available in Jade.
http://jade-lang.com/api/
From their API Documentations:
var jade = require('jade');
// Compile jade file to a function
var fn = jade.compileClient('string of jade', options);
// Later in client site, render the function to HTML
var html = fn(locals);
You should pass the compiled javascript function to the client, for example by writing the function (fn in the example) to a .js file and then include the .js file in the html file with script tag.
Another option is using templatizer, which compiles jade to a .js file for you.

I wrote a gem called tilt-jade to do this within the asset pipeline. It's made to work exactly like EJS does with sprockets by default - it renders Jade templates down into functions so they can be called client side. I'm not sure it's a great solution, but it has worked okay for my needs.

I've just made a library for making jade available in client-side html. It is as simple as < jade>...< /jade>. Check it out: https://github.com/charlieamer/jade-query

Jade now supports compiling for the client by default; use the -c --client option. See http://jade-lang.com/command-line.

Here's a hacky but simple version for browserify using gulp-jade.
var jade = require('gulp-jade'),
replace = require('gulp-replace');
gulp.task('jade-client', function() {
gulp.src('./views/**/*.jade')
.pipe(jade({
client: true
}))
.pipe(replace(/function template/g, 'var jade = require("gulp-jade/node_modules/jade/lib/runtime");\n\nmodule.exports = function'))
.pipe(gulp.dest('./client/templates'));
});
Then in my client side JS file...
var template = require('./path_to_compiled_template_file');
var renderedTemplateHtml = template({ aLocal: 'blah blah'});
So you only send to the client the specific templates you need and browserify makes sure you only have one copy of the runtime.