Chapters

13 Chapters | 1:23:35 |

01

Installing Encore

8:51
02

Our First Encore

8:02
03

Require Outside Libraries

5:46
04

Component Organization

5:01
05

Multiple Pages / Entries

4:38
06

jQuery Plugins / Bootstrap

6:45
07

Require CSS!?

9:19
08

Handling Images with the CopyPlugin

6:30
09

Sass & Sourcemaps

5:30
10

Integrating FOSJsRoutingBundle

4:31
11

ES6 Import & Export

6:00
12

Building for Production

6:44
13

Asset Versioning & Cache Busting

6:01

This tutorial has a new version, check it out!

> Webpack Encore: A Party for your Assets

Buy Access to Course

02.

Our First Encore

|

Autoplay

Previous Chapter

Next Chapter

Login or register to check out the script

35 Comments

Sort By

Login or Register to join the conversation

Vince Liem 8 years ago

"./node_modules/.bin/encore dev" command line doesn't work in windows.
neither does "node_modules/bin/encore dev".

You can run "yarn run encore dev" instead

39 |

Victor SFCASTS Vince Liem 8 years ago

Hey Vince,

Thanks for sharing it with others! That's probably because Windows has permissions problem. I think you can try to add "node" in front of "./node_modules/.bin/encore", i.e.:

node ./node_modules/.bin/encore dev

In order to execute this file though Node. This way it should work. But I'd recommend to use "yarn run encore dev" which is a nice shortcut.

Cheers!

|

Xi Wang Victor 8 years ago

IMHO I would just use 'Git Bash' instead of 'Command Prompt' - it saves you from headaches of inconsistency issues and feels very close of using a native bash. (for those of us stuck with windows ;))

|

Victor SFCASTS Xi Wang 8 years ago

Hey Xi,

Yeah, "Git Bash" is very cool - it has most unix commands out of the box! I used to like it a lot when using Windows :)

Cheers!

|

megdev 7 years ago

Hello , does not work form me

when i compile with : ./node_modules/.bin/encore dev

throw new Error(`Encore.${prop}() cannot be called yet because the runtime environment doesn't appear to be configured. Make sure you're using the encore executable or call Encore.configureRuntimeEnvironment()

Any ideas
Thx

1 |

megdev megdev 7 years ago

ok !

add
.configureRuntimeEnvironment('dev-server') in the webpack.config.js
it's work like a charm :)

|

MolloKhan SFCASTS megdev 7 years ago edited

Hey megdev

I believe you only have to run it like this ./node_modules/.bin/encore dev-server (dev-server)
instead of specifying in the code on which environment you want it to run

Cheers!

|

Csaba B. 7 years ago

"Stop this whenever you want with Ctrl+C"

Its not works on Windows if you use git-bash:
The Ctrl+c combination will show somthing that the process was exited, BUT NOT!
Not the whole process tree killed and some things just running hidden in the background.

so, if you get a lot of weird errors, like:
yarn error "ENOTEMPTY: directory not empty, rmdir" or "“EACCESS: permission denied, scandir" and/or you can't delete the
build directory and contents because of a weird non-existed app.js/main.js or css .files...

Switch from git-bash to another terminal (like cmder).
Another solution (not tested): reinstall the git-bash with "Run Git from the Windows Command Prompt" option.

(I hope it saves a lot of debugging..)

1 |

Victor SFCASTS Csaba B. 7 years ago

Hey El,

Thanks for sharing it with others! It's good to know for Windows OS users.

Cheers!

|

Stas_Gidlevsky 7 years ago edited

Hi weaverryan ! I am trying to run the last version of Webpack (0.240) and I can't do it. When I run the command "yarn encore dev" I've got an error:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.context: The provided value "/Volumes/Data/_Servers/!Examples/symfony-vue-tutorial" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.<br />-> The base directory (absolute path!) for resolving the entry option. If output.pathinfo` is set, the included pathinfo is shortened to this directory.

configuration.output.path: The provided value "/Volumes/Data/_Servers/!Examples/symfony-vue-tutorial/public/build" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
-> The output directory as absolute path (required).`

My Webpack.config.js is
`var Encore = require('@symfony/webpack-encore');
Encore

.setOutputPath('public/build/')
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.autoProvidejQuery()
.enableVersioning()
.addEntry('js/app', './assets/js/app.js')
.enableSingleRuntimeChunk()

;

module.exports = Encore.getWebpackConfig();`

Could you suggest smth how to fix it?

|

Stas_Gidlevsky Stas_Gidlevsky 7 years ago

@weaverryan, never mind. It was my fault. I have an "!" symbol in my path, so it was an error. So I changed it to /Volumes/Data/_Servers/Examples/symfony-vue-tutorial and it runs.

|

MolloKhan SFCASTS Stas_Gidlevsky 7 years ago

Easy peasy then :)

|

Alexandr S. 7 years ago

I'm doing what you said. But, i`ve this erorr:
jquery-3.1.1.min.js:2 Uncaught ReferenceError: RepLogApp is not defined
at HTMLDocument.<anonymous> (lift:226)
at j (jquery-3.1.1.min.js:2)
at k (jquery-3.1.1.min.js:2)

|

Victor SFCASTS Alexandr S. 7 years ago

Hey Alexandr,

Could you give us a bit more context? What exactly are you doing when see this error? We would be happy to help you.

Cheers!

|

Alexandr S. Victor 7 years ago

Hi Victor! I found a solution for this error. If wasn`t use .enableSingleRuntimeChunk() or .disableSingleRuntimeChunk() in webpack.config.js, we was received messages
DEPRECATION Either the Encore.enableSingleRuntimeChunk() or Encore.disableSingleRuntimeChunk() method should be called.
DEPRECATION The recommended setting is Encore.enableSingleRuntimeChunk().
DEPRECATION After calling Encore.enableSingleRuntimeChunk(), a new "runtime.js" will be output and should be included on your page before any other script tags for Encore files.

.
but, if setting .enableSingleRuntimeChunk(),I had a mistake that I mentioned before.
but if I setting .disableSingleRuntimeChunk(), and PERFECT! not any mistakes

1 |

Mehul-J Alexandr S. 5 years ago

thankyou so much. even i struck here

|

Victor SFCASTS Alexandr S. 7 years ago

Hey Alexandr,

I'm glad you found a solution for you!

Cheers!

|

Aircury 7 years ago

Oops! I think something has gone wrong with the icons on the video around 00:36

|

Victor SFCASTS Aircury 7 years ago

Hey Jose,

Oh, I see! Thank you for this report! We'll fix it and re-upload the video soon.

Cheers!

|

Galen S. 7 years ago

I followed the instructions from the first video to this one as close as possible (I'm not sure if I accidentally missed something), but I ended up with the following error after attempting to run ./node_modules/.bin/encore dev

/home/user/git/Webpack Encore A Party for your Assets/node_modules/@babel/core/lib/config/files/plugins.js:152
throw e;
^
Error: Cannot find module 'babel-preset-env' from '/home/user/git/Webpack Encore A Party for your Assets'
- Did you mean "@babel/env"?
at Function.module.exports [as sync] (/home/user/git/Webpack Encore A Party for your Assets/node_modules/resolve/lib/sync.js:43:15)

I ran the command: yarn add babel-preset-env --dev

Thinking that might help but it made another error trying to run the encore command again:

$ ./node_modules/.bin/encore dev
Running webpack ...

DEPRECATION Either the Encore.enableSingleRuntimeChunk() or Encore.disableSingleRuntimeChunk() method should be called.
DEPRECATION The recommended setting is Encore.enableSingleRuntimeChunk().
DEPRECATION After calling Encore.enableSingleRuntimeChunk(), a new "runtime.js" will be output and should be included on your page before any other script tags for Encore files.
ERROR Failed to compile with 1 errors 2:26:18 PM

error in ./public/assets/js/RepLogApp.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'bindings' of null

I'm stuck at the current moment, I'll go back and try the tutorial again and see if I missed something.

|

Martin B. Galen S. 7 years ago

Remove .babelrc file.

1 |

weaverryan SFCASTS Martin B. 7 years ago edited

Hey Martin B. !

Ah, sorry about the issues! Encore got a brand new release only 5 days ago, so there are a few changes. We're working on adding some notes now to point those differences out in the tutorial :). However, I don't think you should have such a catastrophic failure this early!

First, yes, delete that .babelrc file Martin B. is 100% correct. We actually delete that in a little while in this tutorial - but until the recent upgrade, it didn't cause any issues.

Second, you can ignore the deprecation warnings from Encore. Those are referring to some new features we added in the latest version. It's cool stuff - but not important for following along with this tutorial successfully.

If you have any other questions, please let us know! We want Encore to be a smooth process - which is why we're adding some notes right now!

Cheers!

|

Andrea 8 years ago

Hi, when i run "node ./node_modules/.bin/encore dev" i've got this error:

C:\..........\node_modules\.bin\encore:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
^^^^^^^

SyntaxError: missing ) after argument list
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:616:28)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Function.Module.runMain (module.js:693:10)
at startup (bootstrap_node.js:188:16)
at bootstrap_node.js:609:3

Can you help me?

|

MolloKhan SFCASTS Andrea 8 years ago edited

Hey Andrea

Have you tried running it without the word "node"? i.e `./node_modules/.bin/encore dev`

Cheers!

|

Andrea MolloKhan 8 years ago

Yes, but i'm on windows system, so without "node" it doesn't works at all.

|

MolloKhan SFCASTS Andrea 8 years ago

Hmm, maybe if you try running it through "npm" or "yarn"?

|

Andrea MolloKhan 8 years ago

Unfortunally i tried both with same result.
The last one is yarn.

|

MolloKhan SFCASTS Andrea 8 years ago

Ok, I have one last idea. Try using back slashes ".\node_modules\.bin\encore dev"
If that doesn't work either, I'll ping Ryan to give it a check (it may take some time)

|

Andrea MolloKhan 8 years ago

Thanks for the advice but... nothing, same error. :(

|

Andrea MolloKhan 8 years ago

Don't ask me why but running
> yarn run encore dev
It works!

|

MolloKhan SFCASTS Andrea 8 years ago

Yes, finally!
It must to be something about paths, but I'm not 100% sure. Anyways I'm glad that you could fix your problem :)

Cheers!

|

Shaun T. 8 years ago

When I try to run ./node_modules/.bin/encore dev I get the following error:

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

|

Victor SFCASTS Shaun T. 8 years ago

Hey Shaun,

What Webpack version installed do you have? It may be related to the new Webpack 4, probably downgrade it to v3 wil lfix this issue. If not, can you give us a bit more context about what file threw this error, it would be good to see stack traces below the error

Cheers!

|

weaverryan SFCASTS Victor 8 years ago

Hey Shaun!

Victor is right... though it’s a bit mysterious, because Encore should kick your Webpack at v3. Could you post your package.json and webpack.config.js file?

Cheers!

|

Shaun T. weaverryan 7 years ago

Sure, here you go!

// package.json
{
"devDependencies": {
"@symfony/webpack-encore": "^0.19.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"node-sass": "^4.8.3",
"sass-loader": "^6.0.7",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.13",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production"
},
"dependencies": {
"babel-core": "6",
"babel-loader": "^7.1.4",
"bootstrap": "4.1.3",
"jquery": "3.3.1",
"popper.js": "1.14.3"
}
}

// webpack.config.js
var Encore = require('@symfony/webpack-encore');

Encore
// the project directory where compiled assets will be stored
.setOutputPath('public/build/')

// public path used by the web server to access the output path
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.autoProvidejQuery()
.addEntry('js/app', [
'./node_modules/jquery/dist/jquery.slim.js',
'./node_modules/popper.js/dist/popper.min.js',
'./node_modules/bootstrap/dist/js/bootstrap.min.js'
])
.addStyleEntry('css/app', [
'./node_modules/bootstrap/dist/css/bootstrap.min.css'
])
;

module.exports = Encore.getWebpackConfig();

This is the full error I am getting:

vagrant@my-project:~/code/my-project$ ./node_modules/.bin/encore dev

Running webpack ...

(node:27168) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

/home/vagrant/code/my-project/node_modules/webpack/lib/Chunk.js:468

throw new Error(

^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

at Chunk.get (/home/vagrant/code/my-project/node_modules/webpack/lib/Chunk.js:468:9)

at /home/vagrant/code/my-project/node_modules/@symfony/webpack-encore/node_modules/extract-text-webpack-plugin/dist/index.js:176:48

at Array.forEach (<anonymous>)

at /home/vagrant/code/my-project/node_modules/@symfony/webpack-encore/node_modules/extract-text-webpack-plugin/dist/index.js:171:18

at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/vagrant/code/my-project/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)

at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/home/vagrant/code/my-project/node_modules/webpack/node_modules/tapable/lib/Hook.js:35:21)

at Compilation.seal (/home/vagrant/code/my-project/node_modules/webpack/lib/Compilation.js:896:27)

at hooks.make.callAsync.err (/home/vagrant/code/my-project/node_modules/webpack/lib/Compiler.js:479:17)

at _done (eval at create (/home/vagrant/code/my-project/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:9:1)

at _err1 (eval at create (/home/vagrant/code/my-project/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:32:22)

at _addModuleChain (/home/vagrant/code/my-project/node_modules/webpack/lib/Compilation.js:764:12)

at processModuleDependencies.err (/home/vagrant/code/my-project/node_modules/webpack/lib/Compilation.js:703:9)

at _combinedTickCallback (internal/process/next_tick.js:131:7)

at process._tickCallback (internal/process/next_tick.js:180:9)

vagrant@my-project:~/code/my-project$

|

Symfony 4 Encore 0.19

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.2.0",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "doctrine/doctrine-bundle": "^1.6", // 1.8.1
        "doctrine/doctrine-cache-bundle": "^1.2", // 1.3.2
        "doctrine/doctrine-fixtures-bundle": "~3.0", // 3.0.2
        "doctrine/doctrine-migrations-bundle": "^1.2", // v1.3.1
        "doctrine/orm": "^2.5", // v2.7.2
        "friendsofsymfony/jsrouting-bundle": "^2.2", // 2.2.0
        "friendsofsymfony/user-bundle": "dev-master", // dev-master
        "sensio/framework-extra-bundle": "^5.1", // v5.1.5
        "symfony/asset": "^4.0", // v4.0.4
        "symfony/console": "^4.0", // v4.0.4
        "symfony/flex": "^1.0", // v1.17.6
        "symfony/form": "^4.0", // v4.0.4
        "symfony/framework-bundle": "^4.0", // v4.0.4
        "symfony/lts": "^4@dev", // dev-master
        "symfony/monolog-bundle": "^3.1", // v3.1.2
        "symfony/polyfill-apcu": "^1.0", // v1.7.0
        "symfony/serializer-pack": "^1.0", // v1.0.1
        "symfony/swiftmailer-bundle": "^3.1", // v3.1.6
        "symfony/twig-bundle": "^4.0", // v4.0.4
        "symfony/validator": "^4.0", // v4.0.4
        "symfony/yaml": "^4.0", // v4.0.4
        "twig/twig": "2.10.*" // v2.10.0
    },
    "require-dev": {
        "symfony/debug-pack": "^1.0", // v1.0.4
        "symfony/dotenv": "^4.0", // v4.0.4
        "symfony/phpunit-bridge": "^4.0", // v4.0.4
        "symfony/web-server-bundle": "^4.0" // v4.0.4
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.19.0", // 0.19.0
        "bootstrap": "3", // 3.3.7
        "copy-webpack-plugin": "^4.4.1", // 4.4.1
        "font-awesome": "4", // 4.7.0
        "jquery": "^3.3.1", // 3.3.1
        "node-sass": "^4.7.2", // 4.7.2
        "sass-loader": "^6.0.6", // 6.0.6
        "sweetalert2": "^7.11.0", // 7.11.0
        "webpack-notifier": "^1.5.1" // 1.5.1
    }
}

Previous Chapter

Next Chapter