Building for Production

Hey Mesut,

Hm, are you talking about running on this command in this project? Like, did you download the course code, go to start/ directory and try to build the assets for production? Or are you trying to build assets for your private project? Because this course is a bit outdated and we have a new version of this course, you can check it out here: https://symfonycasts.com/sc...

Anyway, regarding your question, it depends on what Node JS version you have I suppose. If you have the latest, most probably you would need to upgrade your JS dependencies, in particular, at least the "caniuse-lite browserslist".

Also, did you try to install the "fs" package as suggested in the second output? It seems this packages is used but missing in your dependencies. I suppose you use Yarn, then it should be: "yarn add fs --dev", and then "yarn upgrade caniuse-lite browserslist". Let me know where you stuck in this process.

I hope this helps!

Cheers!

Hello Mesut and Victor,

I have exactly the same problem here on win10 and did "yarn add fs --dev" and "yarn upgrade caniuse-lite browserlist".
The commands ran well but always the same error when running "yarn encore dev --watch"

Hey Jules,

Thank you for confirming running those 2 commands helped you! Probably fs is not a required dependency of a package, so you have to install it yourself, not sure exactly why so. Btw, here's a possible workaround I suppose: https://github.com/webpack-...

I hope it helps!

Cheers!

Hey Zorpen!

Hmm, there's nothing that I'm aware of specifically, though depending on your CI environment, this should be possible. Basically, most CI environments have the ability to cache directories, so it's very easy to cache your public/build directory. However, the tricky part is knowing when you need to invalidate this cache. In theory, if you got a "checksum" if your entire assets/ directory, you could use that as the "cache key" for caching your public/build directory. Then, if any files change, the checksum would change, and the assets would rebuild.

Sorry I can't give you a more specific answer. We use CircleCI, and they do allow for cache keys like this. Anyways, it's a very interesting idea! Let me know what you find out.

Cheers!

Hi weaverryan
Sorry for bothering you, but i have another question ;)
I was able to cache assets on circleCI this way:

# assets cache
- run: git log --pretty=format:'%H' -n 1 -- assets/ > assets_checksum
- run: echo "$(cat assets_checksum)"
- restore_cache:
keys:
- project-{{ .Branch }}-{{ checksum "./assets_checksum" }}-v1
- run: ls -la public/build #here i can see that public/build directory was downloaded from cache

- run: yarn run encore production
- save_cache:
key: project-{{ .Branch }}-{{ checksum "./assets_checksum" }}-v1
paths:
- public/build

I can see that when build is ran for the first time, everything is cached like i want to, but on the next runs `- run: yarn run encore production` is always triggered. Soooo how can i check if cache was hit? I mean something like "if assets were downloaded from cache then skip yarn run encore production step"? Hope you understand what i mean :)

Hey Zorpen,

Hm, interesting question! Well, most of the time we neglect it because saving a few seconds in your entire build is not a huge performance improvement. But if you want to optimize things more - I think it's possible, but be aware of some weird edge cases, like when you upgraded webpack encore library but your assets wasn't changed and you'll have a blind spot where the new version of Encore won't be changed :) So, it's always tricky with some edge cases, so my point of view is do not complicate things much and it's not a big deal to re-build your assets every time. Though, if you have a lot of assets and you know you can save a good time with this strategy - why not, go fo it.

I quickly look at CircleCI docs and didn't find anything they would suggest for this. But I bet you can easily do it yourself - just check if "public/build/" directory is empty and only then execute "yarn run encore production" command. I think it's possible to do with one-line command, but you probably also can create a separate shell script and put all the logic there. Unfortunately, my knowledge of Unix commands are limited, so I can't quickly give you a complete command, but I think if you google - you can find commands you can use for this.

Cheers!

Hey victor
Thanks, that is exactly the thing i have done. I mean checking public/build directory :)

Hey Zorpen,

Yeah, so probably this is the best way to implement it, at least I can't think about alternative solutions :)

Cheers!

Thanks weaverryan
I'll dig into cache idea :)

Hey Cédric G.!

You're right! And I did it to myself :p. We released the new Webpack Encore version 3 days ago, which uses Webpack 4 where the shared entry is no longer the "recommended" solution. We will upgrade this tutorial, but I'm not sure exactly when - I want to make sure we're done with big changes inside of Encore before we do that. Until then, we would be happy to answer any questions about the new "split chunks" feature. And, the shared entry will not go away any time soon - it's still a valid solution.

Cheers!

Hey Eric

Hmm, interesting, makes me wonder if you run `yarn build` instead of `npm run build` would cause any difference. Also try updating your node & yarn version

If nothing changes, let us know!

Cheers!

Hi MolloKhan

Thank you for the speedy reply. I updated everything I could think of (node, npm, yarn) and error still shows up when I navigate to the file directly. I am not sure why Chrome is showing the error. I was going to update Chrome as well but it says I am already on the latest version.

My versions of packages are:
node: v10.9.0
npm: 6.2.0
yarn: 1.9.4

Running yarn build instead of npm run build yields the same result as well. I downloaded Firefox and cant see any error or anything. Maybe something with Chrome on mac? I've tried searching online for the error but have not come up with anything concrete. Very odd.

Indeed it's odd, I don't have that problem on Chrome but I'm on Windows. You said that the site works correctly, right? Probably a Chrome's plugin that you have installed is causing this weird behavior, just for curiosity, try disabling them all and open a new window in "incognito" mode.

Welp... you are right. Tried an incognito window and it showed no error. Then I started toggling the plugins for Chrome one-by-one and the culprit was the "JSONView" plugin. Totally forgot I had that plugin installed. My apologies for the wild goose chase! But thank you for helping me figure it out!

NP man, you are welcome!

Hey Matt,

So there're a few strategies:
- Deploy changes to prod and build assets on the prod server, such tools as Ansistrano allow you to do so in a background, i.e. your website won't be totally style-broken when you re-build your assets.
- Or build assets locally and just push them to production, so you even do not need to have NodeJS installed on production. And once again, Ansistrano handles it well.

In case your wondering about Ansistrano deploy tool, we have a screencast about it here: https://knpuniversity.com/s...

> What about just committing your build files?

That's another, 3rd and good strategy... but have some disadvantages, but mostly depends on your configuration. Here's a one of them which I do not like a lot: If you use a hash strategy to solve the cache assets problem (like file's names as main_9foiwhf.js), each build the same files will have a totally different names which means Git unable to manually understand that it was just renaming, and Git will think you removed old file and created a totally new file, and as a result, your Git repository will be slowly bloated. Btw, sometimes you want to handle some images with Encore which will copy to the build directory that also will bloat your Git repo.

So, I think 3rd strategy is not a good one, so I'd recommend to choose between those 2 I mentioned in the beginning.

Cheers!

Hey Cesar,

I think somehow the command returns not a 0 code that's why Ansible thinks it fails... Could you double check it? On the prod server run the command manually and then check its status:

./node_modules/.bin/encore production
echo $?

Does it return 0 or a different number? Because that's weird that you can run this command successfully manually, but not with Ansible :/

Btw, had you upgraded your Ansible before that error occurred?

Cheers!

Hi Victor,

I was working with ansible 2.4 and I had the error. Now, I upgrade to ansible 2.5 and I have the same error.

I run the command manually in my server and it works fine (I run it in the current directory). Also, it returns 0.

Do you have any idea what the problem can be?

Cesar

Hey Cesar,

Hm, 0 is good here, ok, could you show this entire Ansible task to us? Probably the problem in it. Also, do you use command Ansible module? If so, try to replace it with shell module and try again. Or do the reverse if you use shell module.

Cheers!

Hey Victor,

This is task and it's located in after_symlink_shared.yml

- name: Install Webpack Encore Assets
  command: './node_modules/.bin/encore production'
  args:
     chdir: '{{ ansistrano_release_path.stdout }}'
`</pre >
Your proposal is to change command for shell?

Please, let me know.

Hey Cesar,

Hm, your task looks valid, let's try to change it slightly, try to run encore via "nodejs":

- name: Install Webpack Encore Assets
  command: nodejs ./node_modules/.bin/encore production
  args:
     chdir: '{{ ansistrano_release_path.stdout }}'
  environment:
    NODE_ENV: production

And probably setting NODE_ENV env var could help here. If not, try to change command module to shell one and try again.

Cheers!

Hi Victor,

It's not working from Ansible in any way. Neither with command, shell or via nodes that you told me.

But, I was trying to do it manually in the current directory in my server and sometimes it didn't work and it was giving me an exit code 137. I was looking in the internet about that and, apparently, it's related to memory. However, I don't understand how is that possible because I check my server and it was fine in terms of memory and I am trying in a pre-production environment.

Have you ever had this error?

Cesar

Hey Cesar,

OK, great job to find the root of your problem, well done! Well, I haven't heard about this problem before, so nothing much I can tell you about solutions, probably better to google for a good advices in your case. But if you won't find any working solution on the internet I do see a few solutions for you:

- Increase memory, looks like you really need just a bit more memory to make it working;
- Or stop installing deps and building assets on your prod server. Instead, install and build them locally, then just use synchronize Ansible module to *rsync* the built assets to your prod server. This way you even do not need to have NodeJS on your server

Cheers!

Thanks Victor. I didn't want to increase the memory because is a server of pre-production. I have followed your second recommendation and it's working well and the deploy it's much faster.

Cheers!

Hey Cesar,

Glad you find a working solution for you. And actually many devs lean to this deploy strategy because do not want to install NodeJS on their production server at all. So I even do not consider this as a workaround. Anyway, if it works for you - that's awesome!

Cheers!

Hey Andrea

The "manifest.json" file is only generated when you execute Encore, when the process finishes, then you will see all your assets and the manifest file inside your build folder

Cheers!

Sorry, i'm talking about manifest.js and not manifest.json (the second one is correctly inside the build folder, the first one not.).

Hey Andrea,

OK, what is manifest.js then? :) Because IIRC we do not talk about manifest.js file but manifest.json instead. Does it your custom JS file? If so, probably some name conflicts? Could you try to rename this file into a different file name?

Cheers!

I'm talking about the file named in this tutorial, this is the link: https://knpuniversity.com/s...
Maybe i missed something?

Hey Andrea,

Ah, sorry, I totally missed it! Yes, you're right, we do have manifest.js file here due to the shared entry. So, did you change the line for layout.js to:

Encore
    .createSharedEntry('layout', './assets/js/layout.js')

Keep in mind, you don't have to have any other line related to "layout.js" except this one in your webpack.config.js.

And another important condition: You need to restart the Encore, i.e. stop watching files and re-run that command again:

yarn run encore dev --watch

Unless you restart the Encore, you won't see that manifest.js file in the build/ directory.

Cheers!

Ok, now i've understood. Thanks

Haha, cheers buddy! :)