The Prod Environment
Keep on Learning!
If you liked what you've learned so far, dive in! Subscribe to get access to this tutorial plus video, code and script downloads.
With a Subscription, click any sentence in the script to jump to that part of the video!
Login SubscribeOpen the .env file in the root of our project and change this dev environment variable to prod.
| // ... lines 1 - 17 | |
| APP_ENV=prod | |
| // ... lines 19 - 20 |
Tip
In your dev environment, a listener serves our assets dynamically. But in prod,
you have to compile them manually by running:
php bin/console asset-map:compile
If you don't see styles in prod, or if you deploy the website to users - this is required.
When switching back to the dev environment, you'll need to delete the public/assets/ directory in
order to start serving assets dynamically again. See
Symfony docs
for more details.
To see what changed, back at our browser, refresh. And... hey! Look at that! The web debug toolbar is gone. Now, let's try to change something in one of our templates. Open templates/main/homepage.html.twig and, at the bottom, let's change Time to Updated at so it's more descriptive.
| // ... lines 1 - 4 | |
| {% block body %} | |
| <main class="flex flex-col lg:flex-row"> | |
| // ... lines 7 - 54 | |
| <div> | |
| // ... lines 56 - 57 | |
| <p>Updated At: {{ issData.timestamp|date }}</p> | |
| // ... lines 59 - 62 | |
| </div> | |
| // ... line 64 | |
| </main> | |
| {% endblock %} |
Clearing the prod Cache
If we head back and refresh...nothing changed. Why? For performance reasons, templates are cached. We made our change after the template was cached, so our browser can't see it yet. To fix this, we need to manually clear our cache. At your terminal, run:
bin/console cache:clear
To specify the environment cache we want to clear, we can add the --env= option with the name of the environment we want to clear the cache for to the end of this command, like --env=prod, for example:
bin/console cache:clear --env=prod
This can be helpful when you need to run a command in a specific environment that's different from the one you're currently working in. Since we're already developing in the prod environment, this part of the command isn't necessary. If we run that... nice! The prod environment cache was cleared successfully.
Okay, if we head back over and refresh the page again... ta da! We see "Updated at". Awesome. If you're ever working in the prod environment and you don't see changes you've made to your templates, config files, etc. reflected in the browser, you may need to manually clear your cache.
Changing the Cache Adapter for prod Only
Right now, we're using cache.adapter.array, which is kind of like a fake cache. We can see that in the config/packages/cache.yaml file. A fake cache is fine for development, but when we're working in the prod environment, we really want to use cache.adapter.filesystem instead. Since we now know about the when@ syntax, let's leverage that. Below, say when@, but this time, we need to set it to our prod environment with when@prod:. Below that, we'll repeat the same structure we see above - framework, cache, and app - followed by cache.adapter.filesystem.
| // ... lines 1 - 23 | |
| when@prod: | |
| framework: | |
| cache: | |
| app: cache.adapter.filesystem |
Okay, to see this in action, we need to clear the cache again (since we're still in the prod environment) with:
bin/console cache:clear
Back at our browser, if you watch closely, you'll see that our data is cached for about five seconds, and then... new data! It works. In our .env file, let's change APP_ENV=prod back to dev. If we go back and refresh again... after every refresh... we see an HTTP request.
Next: Let's learn more about services.
7 Comments
Well, after changing from dev to prod I ended up with "Hey look at that: No CSS :("...
I think since asset mapper we have to manually build our assets in prod right?
Hey @elkuku ,
Did you try to clear the cache? Did you run all the required commands from the README file before start working with the start/ directory of the downloaded course code?
Cheers!
I doubt that clearing the cache would create the missing files but yes I ran the commands from the readme file (even the updated one...)
I am not sure what magic you have running on your end but as far as I understand the new asset mapper component it will only compile your assets in the dev environment while you have to run
bin/console asset-map:compileto have your assets available in prod.So.... What (the
F) am I missing here??Hey @elkuku ,
Sorry for confusing, I mean clear the browser cache, in Google Chrome you can do or while the Chrome dev tools panel is open, and you can press and hold the refresh browser button, then choose "Empty cache and hard reload". Though clearing the app cache is also a good idea, especially in prod as it may has some cached templates that were changed and so this may not include some necessary CSS files, etc. So I would recommend you both actually.
But once again, the steps you should do to boot the project with styles correctly:
composer installbin/console tailwind:build- this command is exactly the one that responsible for your styles look good, no matter of the Symfony env you're loading your app in.symfony serveorAPP_ENV=prod symfony servein case you want to run it in prodI just re-downloaded the course code myself again, moved to the finish/ dir, and followed all those steps from above. After this, when I load the app in the
prodmode - I do see styles, so no extra steps required for me.Which OS are you on? Are you following this course from the start/ dir? Are you using Symfony built-in dev server to spin the app? If your setup is a different one, probably you may have some misconfiguration.
Btw, you may want to rerun the
composer installcommand, does it fix the problem for you in prod? Becausecomposer.jsonhave some scripts that will be run during the install command. Or you can try to run them manually one by one to see if that will help.I hope this helps!
Cheers!
Hey @Victor,
Thanks for your detailed reply. Very much appreciated. Unfortunately I am still not able the find the error on my side :(
About my environment: I am running on a Linux system with the Symfony binary installed and I did exactly what is recommended in the readme file. Everything works just fine in the
devenvironment.I think I disagree on your point number 4. On my system the command
bin/console tailwind:buildwill build the CSS in/var/tailwind/tailwind.built.csswhich (I think) is somehow served by asset mapper in/public/assets/but only indev...When I switch to
prod(via the.envfile) I get a bunch of 404s trying to load the assets from/public/assetswhich does not exist until I do abin/console asset-map:compileafter which the site loads perfectly.But... I have noticed after several tests that sometimes the browser loads the assets from the cache after switching to
prodand sometimes.. notSooo.... All that I can think of at this point is that maybe your cache has not been cleared?
Please (please) correct me if I'm wrong ;)
Cheers!
Hey @elkuku ,
Ah, you're right, that's my browser's cache actually! I wonder if you're on Chrome too though, because it kinda should continue work well because of the browser cache. But indeed, when you manually clear the cache and do hard reload - the styles are gone. That's because the listener, IIRC
AssetMapperDevServerSubscriber, works only in dev mode. So, for prod, you indeed need to run an extra command:See more detailed information in Symfony docs: https://symfony.com/doc/current/frontend/asset_mapper.html#serving-assets-in-dev-vs-prod
Thanks for pointing it out, we will add a note about it.
Cheers!
I had the same issue!
Thanks for insisting ;-))
"Houston: no signs of life"
Start the conversation!