Setting up the theme with remote M2 server
Last updated
Last updated
ScandiPWA theme is run by wepack-dev-server
All /graphql
requests are sent to your remote server
There is an Nginx routing the requests
Note:
it is impossible to test the website in production mode (of the webpack build). This is the main downside of this approach.
Note:
the https://scandipwa.local
wont be available. The PWA features will not function.
In code examples, you might stumble across such declaration:
Note:
the <YOUR GITHUB USERNAME>
is not a literal text to keep, but the “template” to replace with the real value.
If you plan to make changes to the theme make sure to , or into existing one.
Make sure you have a SSH key assigned to your GitHub account, and you current machine has the same key. Read .
Make sure to fork . Read .
Make sure your remote server has ScandiPWA installed on it
The Magento theme could be different, but ScandiPWA modules should be installed and enabled. Read more how to install the ScandiPWA on existing Magento 2 server .
In case you do not have the ScandiPWA instance yet, try completing this setup using our instances: demo.scandipwa.com
or scandipwapmrev.indvp.com
. You can also request your own cloud instance by composing a mail to hello@scandipwa.com.
Make sure you have node
available on you machine. To test this, run:
The theme can be developed in two modes - as contribution into core theme, or as custom theme development on top of core theme. Let’s review each one:
Get the copy of base-theme
- clone your fork, or clone the original repository.
Note:
sometimes, after the repository is cloned, the git chooses the master
branch as default. This is the legacy (incorrect) default branch in case of base-theme
. Please make sure you are using 3.x-stable
. You can do it using following command:
If any other output has been returned, execute the following command to checkout the correct branch:
Later, for development purposes any new branch created from 3.x-stable
can be used.
2. Add following key to package.json
:
Note:
Do not commit this change, if planning to use with docker.
3. From the cloned theme folder, execute following:
Note:
initial setup must happen on real instance. After the bootstrapped theme is committed to the repository, you can proceed with this installation
Inside, clone your already bootstrapped scandipwa-base
package with theme already bootstrapped. The theme file should be present in <REPO SOURCE>/src/app/design/frontend/<VENDOR>/<THEME>/
.
3. Add following key to package.json
, located in your theme’s folder (<REPO SOURCE>/src/app/design/frontend/<VENDOR>/<THEME>/package.json
):
Note:
Do not commit this change, if planning to use with docker.
4. From the custom theme theme folder, execute following:
Open your favorite browser, i.e. Google Chrome
Note:
in case you are getting CORS issues printed out in console, make sure to run chrome with disabled web-security flag set.
Follow this simple algorithm:
Note:
the Docker setup related issues are also mentioned in this document.
In case this command resulted in error, install node using the . Prefer nvm
installation to get NODE version 10 specifically.
2. Then, get matching scandipwa/source
package version from (lookup the required version in src/composer.lock
, lookup scandipwa/source
package) and clone it to vendor folder. Make sure the folder is present.
Open un-secure domain
Refer to the . It most probably already has the solution to your problem.
If the issue still persists, , and feel free to ask questions in #pwa_tech
public channel.
Alternatively - however, the response time there will be a little-bit longer than in community Slack.