We Keep Coding

How does webpack-encore works with symfony 5?

I'm getting a bit mad dealing with webpack-encore in a symfony 5 project.
There is few things i just don't understand. first of all here is my webpack.config.js :
const Encore = require('#symfony/webpack-encore');
// Manually configure the runtime environment if not already configured yet by the "encore"
command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('app', './assets/app.js')
// enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
.enableStimulusBridge('./assets/controllers.json')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
.configureBabel((config) => {
config.plugins.push('#babel/plugin-proposal-class-properties');
})
// enables #babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
// enables Sass/SCSS support
//.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment if you use React
//.enableReactPreset()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery();
module.exports = Encore.getWebpackConfig();
The thing is when i use {{ asset('build/images/my-image.png') }} in my template the file is not found though it is in assets/images/my-image.png
How should i access my image???
Why it is not in manifest.json ??
Why am i not having images in my public/build/ folder ?
What path should i be using to reference my image in app.css as a background-image for example ?
This thing is a nightmare to use & configure.....
Thanks in advance

Thank you guys you are both right,
.copyFiles({
from: './assets/images',
// optional target path, relative to the output dir
to: 'images/[path][name].[ext]',
// if versioning is enabled, add the file hash too
//to: 'images/[path][name].[hash:8].[ext]',
// only copy files matching this pattern
//pattern: /\.(png|jpg|jpeg)$/
})
this part was missing in my config files, then i did not run the build command.....
But it still not an easy tool.
Have a good day.

you tryed run command for build files npm run build ?
or run command for recompile automatically assets
how of documentation exemple
https://symfony.com/doc/current/frontend/encore/simple-example.html

How do you run eslint for only a specific rule or set of rules - command line only

I know you can define rules in an .eslintrc file, but what if I just want to run eslint and check for one specific rule?
E.g. $ eslint helpme.js --rule some-important-rule

I don't know if this is the best way, but I was able to get this working:
$ eslint helpme.js --no-eslintrc --env "es6" --env "node" --parser-options "{ecmaVersion: 2018}" --rule "{some-important-rule: error}"
Note: With this method (ignoring .eslintrc completeley) you still have to add some stuff from .eslintrc like your environment and parser options.

If you want to use your .eslintrc file to keep your configuration (parser, plugin settings, etc), you can use eslint-nibble with the --rule=some-important-rule flag. This will respect your normal configuration, but only show you errors from that rule. There are some other flags as well like --no-interactive if you want to run this in something like a CI environment.
Disclaimer: I'm the creator of eslint-nibble.

Expanding on #matrik answer, this doesn't require me to define all eslint config again and also shows the file name.
eslint helpme.js | egrep "react/jsx-no-literals" -B 1

Try ESLint custom formatter.
It can be used to filter part of rules, files you want to pay attention to.
And you don't need to :
Edit your ESLint config file.
Use complicate command.
DEMO for filter files contain error which rules id is prop-types:
// ./eslint-file-path-formatter.js
const fs = require('fs');
function containRules(result, targetRuleId) {
if (!result || !targetRuleId) {
return false;
}
return result.messages.some((cur) => {
// console.log(`cur?.ruleId = ${cur?.ruleId}`);
if (cur?.ruleId?.includes(targetRuleId)) {
return true;
}
});
}
module.exports = function (results, context) {
const summary = [];
results.forEach((cur) => {
if (containRules(cur, 'prop-types')) {
summary.push(`'${cur.filePath}',`);
}
});
// fs.writeFileSync('eslint-error-files.txt', summary.join('\n'));
// return 'Done Write';
return summary.join('\n');
};
Usage:
eslint . -f ./eslint-file-path-formatter.js
Then this formatter will print all files name to console.
You can also write result to local files, do whatever you want.

Simple way to see single rule output while still using .eslintrc is to use grep:
$ eslint helpme.js | egrep "(^/|some\-important\-rule$)"

Gulp- Versioning for javascript files

I am doing bundling and minification for javascript files. I am doing this using gulp. Now I want that if I make any change in any of my file and hit gulp then it generate a new bundled and minified file with version number like:
<script src="https://cdn.test.com/bundle-1.0.0-min.js/"></script>
then
<script src="https://cdn.test.com/bundle-1.0.1-min.js/"></script>
I want to do this using gulp because I am already using gulp for other purposes. And one more thing if this is possible then is there any way that I don't specify version no in my html page every time I make a change and my html page get the latest version by its own somehow.

This is just a rename of the file in general. But this should really not be an automated task to increment the version number. Otherwise you will be quickly getting a version like 1.0.2092 what is not helpful. I would suggest to read the version out of the package.json and use it for the name of the file. Should be pretty easy, if you already worked with gulp.
If you don't want to use the global version (version entry) of your package.json, you could add an own entry for your bundle version. Or even use a different file than package.json. You could even use that as config for which files should be bundled, to have everything in one place:
{
"bundle": {
"version": "1.0.1",
"files": [
"path/to/file-one.js",
"another/file.js",
"..."
]
}
}
Just a quick example:
var pkg = require("./package.json");
var gulp = require("gulp");
var rename = require("gulp-rename");
gulp.src(pkg.bundle.files)
.concat("bundle.js")
.pipe(uglify())
.pipe(rename(function(path) {
path.extname = "-" . pkg.bundle.version + "-min" + path.extname;
}))
.pipe(gulp.dest("./"));
Note: instead of rename you can just set the concat name, but I like to split this. But just to be complete:
.concat("bundle-" + pkg.bundle.version + "-min.js")
About the second parts of your question, to replace things in your files:
This would be possible if you build your html pages too, and replace/inject the relevant path into it. You could use the version of the package.json again, to build it and replace. Or use tools like gulp-inject. That simple tool can add js and css files into your html templates. Just create an area where they should be placed in the html file, like: <!-- inject:js --><!-- endinject -->. Afterwards it is a simple gulp taks too:
var pkg = require("./package.json");
var gulp = require("gulp");
var inject = require("gulp-inject");
gulp.src("dev/index.html")
.pipe(inject("bundle-" + pkg.bundle.version + "-min.js"))
.pipe(gulp.dest("prod/"));

How to give an Order to the files compiled with coffeebar

I would like to be able to include the file with a given order while compiling my coffeescript files into js with coffeebar.
I would like to have the files settings.coffee, constants.coffee included first
--
|-- settings.coffee
|-- constants.coffee
|-- page1.coffee
|-- page2.coffee
Code Snippet
fs = require 'fs'
{exec, spawn} = require 'child_process'
util = require 'util'
task 'watch', 'Coffee bar Combine and build', ->
coffee = spawn 'coffeebar', ['-w','-o','./../js/main/kc.js', './']
coffee.stdout.on 'data', (data) ->
console.log data.toString().trim()
invoke 'minify'
task 'minify', ' Minify JS File', ->
file = "./../js/main/kc"
util.log "Minifiying #{file}.js"
exec "uglifyjs #{file}.js > #{file}.min.js", (err,stdout,stderr) ->
if err
util.log "Error minifiying file"
util.log err
else
util.log "Minified to #{file}.min.js"
util.log '----------------------------'
For now the script is only compiling the whole thing together according to its own logic.
I would appreciate any help on this.

It seems like you have 3 potential solutions, but all of them not so elegant:
I'm not sure, but try to set inputPaths argument of coffeebar(inputPaths, [options]) as explicit array of paths with file names, where you can set order of array elements as you need
try to rename files with num prefixes like 01_settiings.coffee and so on, in order what you need, so coffeebar will process it in this order
you can use extra plugin, like rigger to include all files you need in desired sequence in one root file, and process this file with coffeebar

have make build/minimize JS files that have changed

I'm trying to learn Make and building a Makefile into my app to help me with building and minimizing my .js files for use of a combo loader server application later on.
What I'm trying to accomplish is that when I run make, it'll copy over to the build directory only the .js files that have changed since the last run, and then minify that file and generate a -min.js copy. Finally I need to always make sure I generate a new meta.js file.
I've pasted what I have working below, the trouble with this is that it's not picking only the changed .js files, but each file on each run. I'm missing something in how to get Make to pick only changed files in this instance.
BOOKIE_JS = bookie/static/js/bookie
JS_BUILD_PATH = bookie/static/js/build
JS_META_SCRIPT = scripts/js/generate_meta.py
jsbuild: $(JS_BUILD_PATH)/bookie/meta.js
clean_js:
rm -rf $(JS_BUILD_PATH)/*
$(JS_BUILD_PATH)/bookie/meta.js: $(BOOKIE_JS)/y*-min.js
$(JS_META_SCRIPT) -n YUI_MODULES -s $(BOOKIE_JS)/y* -o $(JS_BUILD_PATH)/bookie/meta.js
$(BOOKIE_JS)/y*-min.js: $(BOOKIE_JS)/y*.js
scripts/js/jsmin_all.py $(JS_BUILD_PATH)/bookie
# this is the part that runs for each .js file and I'd like it to only run for the *modified* files
$(BOOKIE_JS)/y*.js: $(JS_BUILD_PATH)/bookie
cp $# $(JS_BUILD_PATH)/bookie/
$(JS_BUILD_PATH)/bookie:
mkdir $(JS_BUILD_PATH)/bookie
clean: clean_js
.PHONE: clean clean_js
Current output:
cp bookie/static/js/bookie/yapi.js bookie/static/js/build/bookie/
cp bookie/static/js/bookie/ymodel.js bookie/static/js/build/bookie/
cp bookie/static/js/bookie/ytagcontrol.js bookie/static/js/build/bookie/
cp bookie/static/js/bookie/yview.js bookie/static/js/build/bookie/
scripts/js/jsmin_all.py bookie/static/js/build/bookie
scripts/js/generate_meta.py -n YUI_MODULES -s bookie/static/js/bookie/y* -o bookie/static/js/build/bookie/meta.js
I'd like to see only the cp of the changed files.

I think you intended to make a pattern rule but used the wrong syntax. For example, this:
$(BOOKIE_JS)/y*-min.js: $(BOOKIE_JS)/y*.js
scripts/js/jsmin_all.py $(JS_BUILD_PATH)/bookie
means each of the $(BOOKIE_JS)/y*-min.js files depends on the $(BOOKIE_JS)/y*.js files -- all of them, not just the one with a similar name. If you do this:
$(BOOKIE_JS)/y%-min.js: $(BOOKIE_JS)/y%.js
scripts/js/jsmin_all.py $(JS_BUILD_PATH)/bookie
then the % must be replaced with the same string on each side, so for example $(BOOKIE_JS)/yapi-min.js depends only on $(BOOKIE_JS)/yapi.js