Topics covered in this tutorial:
First, let’s open up the terminal and navigate to the project’s directory.
cd ~/Myproject/scandipwa-base/ls -la # confirm that we're in the right place
Previously, in the Linux Docker set-up we already created aliases for
docker-compose commands. Here’s a little refresher:
# use `dc` to start without `frontend` containeralias dc="docker-compose -f docker-compose.yml -f docker-compose.local.yml -f docker-compose.ssl.yml"# use `dcf` to start with `frontend` containeralias dcf="docker-compose -f docker-compose.yml -f docker-compose.local.yml -f docker-compose.ssl.yml -f docker-compose.frontend.yml"# use `inapp` to quickly get inside of the app containeralias inapp="docker-compose -f docker-compose.yml -f docker-compose.local.yml -f docker-compose.ssl.yml -f docker-compose.frontend.yml exec -u user app"# use `infront` to quickly get inside of the frontend containeralias infront="docker-compose -f docker-compose.yml -f docker-compose.local.yml -f docker-compose.ssl.yml -f docker-compose.frontend.yml exec -w /var/www/public/app/design/frontend/Scandiweb/pwa/ frontend"# use `applogs` to quickly see the last 100 lines of app container logsalias applogs="docker-compose logs -f --tail=100 app"# use `frontlogs` to quickly see the last 100 lines of frontend container logsalias frontlogs="docker-compose -f docker-compose.yml -f docker-compose.local.yml -f docker-compose.ssl.yml -f docker-compose.frontend.yml logs -f --tail=100 frontend"
We can also look for a specific alias by piping:
If we want to contribute we run:
docker-compose -f docker-compose.yml -f docker-compose.local.yml -f docker-compose.ssl.yml -f docker-compose.core.yml
Instead of the
docker-compose.frontend.yml we use
core stands for contribution.
Before this, though, we need to make sure that we’ve cloned our theme in the correct place.
Let’s make a new folder in the
scandipwa-base/src folder. We’ll use this later for composer packages in order to locally connect to them.
Next, we need to fork the ScandiPWA base theme and clone it in the
After returning to the
scandipwa-base folder we need to run one of our previously aliased commands in order to recreate the docker set-up without front-end:
dc up -d
You can read more about the
docker-compose up command here.
Next, we use
applogs to check-out the last 100 lines of app container logs.
If you see the
Connection to Redis failed error, you need to force-recreate:
dc up -d --force-recreate
Next we run the
inapp alias to get inside of the app container and execute an interactive
bash shell in it:
Let’s go to the
localmodules/base-theme/ folder and run
npm ci to get a clean install of the necessary dependencies.
cd localmodules/base-theme/npm ci
After installing the modules we can
exit the app for now. Now, back in the
scandipwa-base folder run the following to compose the core contribution file:
dc -f docker-compose.core.yml up -d
docker-compose.frontend.yml files are the same except for the command
pm2-watch, which in the
core file is replaced by
frontend the vendor folders are mapped, however, in
core only the
base-theme is mapped.
This is because a fall-back mechanism is not needed when you’re contributing - every file in the theme is present.
frontlogs to see if
core has compiled and type
scandipwa.local in your browser to check-out if everything is working.
Next, using whatever text editor you fancy, open the folder
src/local-modules/base-theme and start customising!
Note that any contributions must be made to the stable branch, which at this point is
The standard sequence after making changes:
git stash savegit branch <stable-branch-name> HEADgit checkout -b <your-branch-name> # add a descriptive branch namegit stash pop
Check-out the git reference here.
After doing this you can commit as usual:
git add <file-name>git commit -m "your-message"git pushgit push origin <your-branch-name>
After this you should see in your GitHub account and create a pull request. Then the pull request will be reviewed by our fabulous maintainers and either be approved or closed.
Clone the repo the same way as previously, you can choose e.g.
If you want to contribute to one of the back-end features, you have to select a one patch number higher than that of the available ones.
So if the latest release is 1.0.2, yours will be 1.0.3
First we need to find out which version we currently have, so let’s enter the container:
inapp bashcomposer info scandipwa/store-graphql
At this current time latest version is 1.0.2
composer config repo.<your-name> path <your/path>
Or in this specific case:
composer config repo.store path localmodules/store-graphql/cat composer.json # check that there's a store module
So now we need to make sure that store is installed on our local system as a higher version.
Using a text editor open
composer.json file and specify a new version, in this case
Next, let’s update:
composer update scandipwa/store-graphql
After this the
src/localmodules/store-graphql will be symlinked with the vendor folders. This way any change you perform on the origin folder will be reflected in Magento.
After making changes,
exit the container and go to the
We can check out if our changes are registered by using
git status, in fact can use
git status any time to see what the state of our commit is.
After this we can use a similar sequence as previously:
git checkout -b feature-branch-1git add src # add the whole foldergit commit -m "Some message"git pushgit push origin feature-branch-1
After this we can go to our GitHub account and open a pull request.