It’s been one week since we started using magepack on a select few magento sites and I was a bit frustrated how there seemed to be a lack of an ultimate getting started guide to it. So I hope this helps.
High Level Initial Setup Overview Steps
- Install the magepack magento module to the project.
- Download docker container to your dev machine and production machines.
- Decide on three urls to have magepack scan. A CMS Page, a Product Page, and a Category url.
- Add the magepack.config.js to projects version tracking (git).
- Verify the magepack-bundle.js is in the view source of the page and is not a 404.
Understanding difference between MagePack generate and bundle commands
Installing Magento Module to Fresh Project
The github repo is here.
Essentially, all you need to do here is:
composer require creativestyle/magesuite-magepack php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento setup:static-content:deploy -f php bin/magento cache:clean php bin/magento cache:flush
And then make sure magento’s deprecated stuff is turned off:
bin/magento config:set dev/js/merge_files 0 bin/magento config:set dev/js/enable_js_bundling 0
There are a few command line switches to make note of:
Enable Magento Magepack Module (Don’t do this until you are ready at the end of this article):
bin/magento config:set dev/js/enable_magepack_js_bundling 1 bin/magento cache:clean bin/magento cache:flush redis-cli flushall
If you ever need to disable magepack the below commands will do:
bin/magento config:set dev/js/enable_magepack_js_bundling 0 bin/magento cache:clean bin/magento cache:flush redis-cli flushall
Download and configure docker container
We assume you already have podman or docker installed. On RHEL8 flavors,
yum install podman -y
I chose to build the image from the repo instead of dockerhub so I can always make sure I have the latest.
As root or user of choice:
cd ~ git clone https://github.com/udovicic/magepack-docker.git cd magepack-docker make build
Set up some custom aliases on dev so the docker feels more native.
echo "" >> /etc/profile.d/custom.sh echo "alias magepack='sudo docker run --rm -u \`/usr/bin/id -u\`:\`/usr/bin/id -g\` -v \`pwd\`:/source udovicic/magepack \"magepack\$@\"'" >> /etc/profile.d/custom.sh
You will probably need to log out and back in for the above aliases to work. Note: this is for BASH on RHEL flavors. Other shells and operating systems you will need to make applicable changes.
Decide on three urls to have magepack scan
magepack generate command and pass these three urls.
While I am not sure if you can run magepack against a url that has already been magepack, for our use we will use staging urls where magepack is not enabled.
Run the magepack generate command
Below is an example (urls omitted for security).
magepack generate --skip-checkout --cms-url="" --category-url="" --product-url=""
We are skipping the checkout
--skip-checkout since we have seen some issues with checkout being bundled. (It was more that chrome couldn’t add products to the cart due to product options not being selected by default, rather than checkout issues. Magepack tries to add the product to the cart and go through that process.)
Add the magepack.config.js to projects version tracking (git).
git add magepack.config.js git commit -m "Adding Magepack Config JS"
So in a normal magento world, this means inserting the command after setup:static-content:deploy. We pass
-m to it so terser is used for minification (a super strong minifier).
php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento setup:static-content:deploy -f magepack bundle -m php bin/magento cache:clean php bin/magento cache:flush
Here you want to make sure the magepack module is enabled.
bin/magento config:show dev/js/enable_magepack_js_bundling
If you see a 1, it is enabled. If you see a 0, you need to enable (see first section of article).
Verify the magepack-bundle.js is in the view source of the page and is not a 404.
Go to the live site, view source and look for