|
@@ -5,7 +5,7 @@
|
|
|
<img src="https://img.shields.io/badge/magento-2.X-brightgreen.svg?logo=magento&longCache=true" alt="Supported Magento Versions" />
|
|
|
<a href="https://hub.docker.com/r/markoshust/magento-php/" target="_blank"><img src="https://img.shields.io/docker/pulls/markoshust/magento-php.svg?label=php%20docker%20pulls" alt="Docker Hub Pulls - PHP" /></a>
|
|
|
<a href="https://hub.docker.com/r/markoshust/magento-nginx/" target="_blank"><img src="https://img.shields.io/docker/pulls/markoshust/magento-nginx.svg?label=nginx%20docker%20pulls" alt="Docker Hub Pulls - Nginx" /></a>
|
|
|
- <a href="https://GitHub.com/Naereen/StrapDown.js/graphs/commit-activity" target="_blank"><img src="https://img.shields.io/badge/maintained%3F-yes-brightgreen.svg" alt="Maintained - Yes" /></a>
|
|
|
+ <a href="https://github.com/markshust/docker-magento/graphs/commit-activity" target="_blank"><img src="https://img.shields.io/badge/maintained%3F-yes-brightgreen.svg" alt="Maintained - Yes" /></a>
|
|
|
<img src="https://img.shields.io/badge/apple%20silicon%20support-yes-brightgreen" alt="Apple Silicon Support" />
|
|
|
<a href="https://opensource.org/licenses/MIT" target="_blank"><img src="https://img.shields.io/badge/license-MIT-blue.svg" /></a>
|
|
|
</div>
|
|
@@ -25,44 +25,19 @@
|
|
|
|
|
|
## Docker Hub
|
|
|
|
|
|
-View Dockerfiles:
|
|
|
+View Dockerfiles for the latest tags:
|
|
|
|
|
|
- [markoshust/magento-nginx (Docker Hub)](https://hub.docker.com/r/markoshust/magento-nginx/)
|
|
|
- - 1.18
|
|
|
- - [`1.18`, `1.18-7`](https://github.com/markshust/docker-magento/tree/master/images/nginx/1.18)
|
|
|
- - [`1.18-6`](https://github.com/markshust/docker-magento/tree/41.0.2/images/nginx/1.18)
|
|
|
- - [`1.18-5`](https://github.com/markshust/docker-magento/tree/41.0.1/images/nginx/1.18)
|
|
|
- - [`1.18-4`](https://github.com/markshust/docker-magento/tree/39.1.0/images/nginx/1.18)
|
|
|
- - [`1.18-3`](https://github.com/markshust/docker-magento/tree/34.0.0/images/nginx/1.18)
|
|
|
- - [`1.18-2`](https://github.com/markshust/docker-magento/tree/33.0.0/images/nginx/1.18)
|
|
|
- - [`1.18-1`](https://github.com/markshust/docker-magento/tree/31.0.1/images/nginx/1.18)
|
|
|
- - [`1.18-0`](https://github.com/markshust/docker-magento/tree/31.0.0/images/nginx/1.18)
|
|
|
+ - [`1.18`, `1.18-8`](https://github.com/markshust/docker-magento/tree/master/images/nginx/1.18)
|
|
|
- [markoshust/magento-php (Docker Hub)](https://hub.docker.com/r/markoshust/magento-php/)
|
|
|
- - 8.1 (available for alpha testing)
|
|
|
- - [`8.1-fpm-develop`](https://github.com/markshust/docker-magento/tree/master/images/php/8.1)
|
|
|
- - 7.4
|
|
|
- - [`7.4-fpm`, `7.4-fpm-13`](https://github.com/markshust/docker-magento/tree/master/images/php/7.4)
|
|
|
- - [`7.4-fpm-12`](https://github.com/markshust/docker-magento/tree/41.0.2/images/php/7.4)
|
|
|
- - [`7.4-fpm-11`](https://github.com/markshust/docker-magento/tree/41.0.1/images/php/7.4)
|
|
|
- - [`7.4-fpm-10`](https://github.com/markshust/docker-magento/tree/40.0.2/images/php/7.4)
|
|
|
- - [`7.4-fpm-9`](https://github.com/markshust/docker-magento/tree/39.1.0/images/php/7.4)
|
|
|
- - [`7.4-fpm-8`](https://github.com/markshust/docker-magento/tree/39.0.2/images/php/7.4)
|
|
|
- - [`7.4-fpm-7`](https://github.com/markshust/docker-magento/tree/39.0.0/images/php/7.4)
|
|
|
- - [`7.4-fpm-6`](https://github.com/markshust/docker-magento/tree/38.0.0/images/php/7.4)
|
|
|
- - [`7.4-fpm-5`](https://github.com/markshust/docker-magento/tree/37.0.2/images/php/7.4)
|
|
|
- - [`7.4-fpm-4`](https://github.com/markshust/docker-magento/tree/36.0.2/images/php/7.4)
|
|
|
- - [`7.4-fpm-3`](https://github.com/markshust/docker-magento/tree/36.0.1/images/php/7.4)
|
|
|
- - [`7.4-fpm-2`](https://github.com/markshust/docker-magento/tree/34.2.0/images/php/7.4)
|
|
|
- - [`7.4-fpm-1`](https://github.com/markshust/docker-magento/tree/34.1.0/images/php/7.4)
|
|
|
- - [`7.4-fpm-0`](https://github.com/markshust/docker-magento/tree/33.0.0/images/php/7.4)
|
|
|
+ - [`8.1-fpm`, `8.1-fpm-1`](https://github.com/markshust/docker-magento/tree/master/images/php/8.1)
|
|
|
+ - [`7.4-fpm`, `7.4-fpm-15`](https://github.com/markshust/docker-magento/tree/master/images/php/7.4)
|
|
|
- [markoshust/magento-elasticsearch (Docker Hub)](https://hub.docker.com/r/markoshust/magento-elasticsearch/)
|
|
|
- - 7
|
|
|
- - [`7.9`, `7.9.3-1`](https://github.com/markshust/docker-magento/tree/master/images/elasticsearch/7.9)
|
|
|
- - [`7.9.3-0`](https://github.com/markshust/docker-magento/tree/39.1.0/images/elasticsearch/7.9)
|
|
|
- - [`7.7`, `7.7.1-0`](https://github.com/markshust/docker-magento/tree/master/images/elasticsearch/7.7)
|
|
|
- - [`7.6`, `7.6.2-2`](https://github.com/markshust/docker-magento/tree/35.0.0/images/elasticsearch/7.6)
|
|
|
- - [`7.6.2-1`](https://github.com/markshust/docker-magento/tree/32.0.0/images/elasticsearch/7.6)
|
|
|
- - [`7.6.2-0`](https://github.com/markshust/docker-magento/tree/31.0.2/images/elasticsearch/7.6)
|
|
|
+ - [`7.16`, `7.16-0`](https://github.com/markshust/docker-magento/tree/master/images/elasticsearch/7.16)
|
|
|
+- [markoshust/magento-rabbitmq (Docker Hub)](https://hub.docker.com/r/markoshust/magento-rabbitmq/)
|
|
|
+ - [`3.9`, `3.9-0`](https://github.com/markshust/docker-magento/tree/master/images/rabbitmq/3.9)
|
|
|
+- [markoshust/ssh (Docker Hub)](https://hub.docker.com/r/markoshust/magento-ssh/)
|
|
|
+ - [`latest`](https://github.com/markshust/docker-magento/tree/master/images/ssh)
|
|
|
|
|
|
## Free Course
|
|
|
|
|
@@ -77,7 +52,7 @@ A free screencast course is available (which was fully refreshed in December 202
|
|
|
Set Up a Magento 2 Development Environment with Docker
|
|
|
</a>
|
|
|
|
|
|
-### Course Curriculm
|
|
|
+### Course Curriculum
|
|
|
|
|
|
#### Intro
|
|
|
|
|
@@ -152,10 +127,10 @@ mkdir -p ~/Sites/magento
|
|
|
cd $_
|
|
|
|
|
|
# Run this automated one-liner from the directory you want to install your project.
|
|
|
-curl -s https://raw.githubusercontent.com/markshust/docker-magento/master/lib/onelinesetup | bash -s -- magento.test 2.4.3-p1
|
|
|
+curl -s https://raw.githubusercontent.com/markshust/docker-magento/master/lib/onelinesetup | bash -s -- magento.test 2.4.5-p1 community
|
|
|
```
|
|
|
|
|
|
-The `magento.test` above defines the hostname to use, and the `2.4.3-p1` defines the Magento version to install. Note that since we need a write to `/etc/hosts` for DNS resolution, you will be prompted for your system password during setup.
|
|
|
+The `magento.test` above defines the hostname to use, and the `2.4.5-p1` defines the Magento version to install. Note that since we need a write to `/etc/hosts` for DNS resolution, you will be prompted for your system password during setup.
|
|
|
|
|
|
After the one-liner above completes running, you should be able to access your site at `https://magento.test`.
|
|
|
|
|
@@ -183,10 +158,12 @@ cd $_
|
|
|
curl -s https://raw.githubusercontent.com/markshust/docker-magento/master/lib/template | bash
|
|
|
|
|
|
# Download the version of Magento you want to use with:
|
|
|
-bin/download 2.4.3-p1
|
|
|
+bin/download 2.4.5-p1 community
|
|
|
+# You can specify the version and type (community, enterprise, or mageos).
|
|
|
+# If no arguments are passed, "2.4.5-p1" and "community" are the default values used.
|
|
|
|
|
|
# or for Magento core development:
|
|
|
-# docker-compose -f docker-compose.yml up -d
|
|
|
+# bin/start --no-dev
|
|
|
# bin/setup-composer-auth
|
|
|
# bin/cli git clone git@github.com:magento/magento2.git .
|
|
|
# bin/cli git checkout 2.4-develop
|
|
@@ -216,7 +193,7 @@ cp -R ~/Sites/existing src
|
|
|
# or: git clone git@github.com:myrepo.git src
|
|
|
|
|
|
# Start some containers, copy files to them and then restart the containers:
|
|
|
-docker-compose -f docker-compose.yml up -d
|
|
|
+bin/start --no-dev
|
|
|
bin/copytocontainer --all ## Initial copy will take a few minutes...
|
|
|
|
|
|
# Import existing database:
|
|
@@ -251,6 +228,7 @@ It is recommended to keep your root docker config files in one repository, and y
|
|
|
|
|
|
## Custom CLI Commands
|
|
|
|
|
|
+- `bin/analyse`: Run `phpstan analyse` within the container to statically analyse code, passing in directory to analyse. Ex. `bin/analyse app/code`
|
|
|
- `bin/bash`: Drop into the bash prompt of your Docker container. The `phpfpm` container should be mainly used to access the filesystem within Docker.
|
|
|
- `bin/cache-clean`: Access the [cache-clean](https://github.com/mage2tv/magento-cache-clean) CLI. Note the watcher is automatically started at startup in `bin/start`. Ex. `bin/cache-clean config full_page`
|
|
|
- `bin/cli`: Run any CLI command without going into the bash prompt. Ex. `bin/cli ls`
|
|
@@ -262,10 +240,12 @@ It is recommended to keep your root docker config files in one repository, and y
|
|
|
- `bin/cron`: Start or stop the cron service. Ex. `bin/cron start`
|
|
|
- `bin/dev-urn-catalog-generate`: Generate URN's for PhpStorm and remap paths to local host. Restart PhpStorm after running this command.
|
|
|
- `bin/devconsole`: Alias for `bin/n98-magerun2 dev:console`
|
|
|
-- `bin/download`: Download specific Magento version from Composer to the container, with an optional type of either "community" (default) or "enterprise". Ex. `bin/download 2.4.3-p1 enterprise`
|
|
|
+- `bin/docker-compose`: Support V1 (`docker-compose`) and V2 (`docker compose`) docker compose command, and use custom configuration files, such as `compose.yml` and `compose.dev.yml`
|
|
|
+- `bin/download`: Download specific Magento version from Composer to the container, with optional arguments of the version (2.4.5-p1 [default]) and type ("community" [default], "enterprise", or "mageos"). Ex. `bin/download 2.4.5-p1 enterprise`
|
|
|
- `bin/fixowns`: This will fix filesystem ownerships within the container.
|
|
|
- `bin/fixperms`: This will fix filesystem permissions within the container.
|
|
|
- `bin/grunt`: Run the grunt binary. Ex. `bin/grunt exec`
|
|
|
+- `bin/install-php-extensions`: Install PHP extension in the container. Ex. `bin/install-php-extensions sourceguardian`
|
|
|
- `bin/magento`: Run the Magento CLI. Ex: `bin/magento cache:flush`
|
|
|
- `bin/mftf`: Run the Magento MFTF. Ex: `bin/mftf build:project`
|
|
|
- `bin/mysql`: Run the MySQL CLI with database config from `env/db.env`. Ex. `bin/mysql -e "EXPLAIN core_config_data"` or`bin/mysql < magento.sql`
|
|
@@ -273,6 +253,9 @@ It is recommended to keep your root docker config files in one repository, and y
|
|
|
- `bin/n98-magerun2`: Access the [n98-magerun2](https://github.com/netz98/n98-magerun2) CLI. Ex: `bin/n98-magerun2 dev:console`
|
|
|
- `bin/node`: Run the node binary. Ex. `bin/node --version`
|
|
|
- `bin/npm`: Run the npm binary. Ex. `bin/npm install`
|
|
|
+- `bin/phpcbf`: Auto-fix PHP_CodeSniffer errors with Magento2 options. Ex. `bin/phpcbf <path-to-extension>`
|
|
|
+- `bin/phpcs`: Run PHP_CodeSniffer with Magento2 options. Ex. `bin/phpcs <path-to-extension>`
|
|
|
+- `bin/phpcs-json-report`: Run PHP_CodeSniffer with Magento2 options and save to `report.json` file. Ex. `bin/phpcs-json-report <path-to-extension>`
|
|
|
- `bin/pwa-studio`: (BETA) Start the PWA Studio server. Note that Chrome will throw SSL cert errors and not allow you to view the site, but Firefox will.
|
|
|
- `bin/redis`: Run a command from the redis container. Ex. `bin/redis redis-cli monitor`
|
|
|
- `bin/remove`: Remove all containers.
|
|
@@ -297,6 +280,28 @@ It is recommended to keep your root docker config files in one repository, and y
|
|
|
|
|
|
## Misc Info
|
|
|
|
|
|
+### Install fails because project directory is not empty
|
|
|
+
|
|
|
+The most common issue with a failed docker-magento install is getting this error:
|
|
|
+
|
|
|
+```
|
|
|
+Project directory "/var/www/html/." is not empty error
|
|
|
+```
|
|
|
+
|
|
|
+This message occurs when _something_ fails to execute correctly during an install, and a subsequent install is re-attempted. Unfortunately, when attempting a second (or third) install, it's possible the `src` directory is no longer empty. This prevents Composer from creating the new project because it needs to create new projects within an empty directory.
|
|
|
+
|
|
|
+The workaround to this is that once you have fixed the issue that was initially preventing your install from completing, you will need to completely remove the assets from the previously attempted install before attempting a subsequent install.
|
|
|
+
|
|
|
+You can do this by running:
|
|
|
+
|
|
|
+```
|
|
|
+bin/removeall
|
|
|
+cd ..
|
|
|
+rm -rf yourproject
|
|
|
+```
|
|
|
+
|
|
|
+Then, create your new project directory again so you can attempt the install process again. The `bin/removeall` command removes all previous Docker containers & volumes related to the specific project directory you are within. You can then attempt the install process again.
|
|
|
+
|
|
|
### Caching
|
|
|
|
|
|
For an improved developer experience, caches are automatically refreshed when related files are updated, courtesy of [cache-clean](https://github.com/mage2tv/magento-cache-clean). This means you can keep all of the standard Magento caches enabled, and this script will only clear the specific caches needed, and only when necessary.
|
|
@@ -305,7 +310,7 @@ To disable this functionality, uncomment the last line in the `bin/start` file t
|
|
|
|
|
|
### Database
|
|
|
|
|
|
-The hostname of each service is the name of the service within the `docker-compose.yml` file. So for example, MySQL's hostname is `db` (not `localhost`) when accessing it from within a Docker container. Elasticsearch's hostname is `elasticsearch`.
|
|
|
+The hostname of each service is the name of the service within the `compose.yaml` file. So for example, MySQL's hostname is `db` (not `localhost`) when accessing it from within a Docker container. Elasticsearch's hostname is `elasticsearch`.
|
|
|
|
|
|
To connect to the MySQL CLI tool of the Docker instance, run:
|
|
|
|
|
@@ -342,7 +347,7 @@ Copy `src/auth.json.sample` to `src/auth.json`. Then, update the username and pa
|
|
|
|
|
|
### Email / Mailcatcher
|
|
|
|
|
|
-View emails sent locally through Mailcatcher by visiting [http://{yourdomain}:1080](http://{yourdomain}:1080). During development, it's easiest to test emails using a third-party module such as [https://github.com/mageplaza/magento-2-smtp](Mageplaza's SMTP module). Set the mailserver host to `mailcatcher` and port to `1080`.
|
|
|
+View emails sent locally through Mailcatcher by visiting [http://{yourdomain}:1080](http://{yourdomain}:1080). During development, it's easiest to test emails using a third-party module such as [Mageplaza's SMTP module](https://github.com/mageplaza/magento-2-smtp). In order to use mailcatcher, set the mailserver host to `mailcatcher` and set port to `1025`. Note that this port is different from the mailcatcher interface to read the emails.
|
|
|
|
|
|
### Redis
|
|
|
|
|
@@ -366,12 +371,71 @@ You may also monitor Redis by running: `bin/redis redis-cli monitor`
|
|
|
|
|
|
For more information about Redis usage with Magento, <a href="https://devdocs.magento.com/guides/v2.4/config-guide/redis/redis-session.html" target="_blank">see the DevDocs</a>.
|
|
|
|
|
|
+### PhpMyAdmin
|
|
|
+
|
|
|
+PhpMyAdmin is built into the `compose.dev.yaml` file. Simply open `http://localhost:8080` in a web browser.
|
|
|
+
|
|
|
### Xdebug & VS Code
|
|
|
|
|
|
Install and enable the PHP Debug extension from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug).
|
|
|
|
|
|
Otherwise, this project now automatically sets up Xdebug support with VS Code. If you wish to set this up manually, please see the [`.vscode/launch.json`](https://github.com/markshust/docker-magento/blame/master/compose/.vscode/launch.json) file.
|
|
|
|
|
|
+### Xdebug & VS Code in a WSL2 environment
|
|
|
+
|
|
|
+Install and enable the PHP Debug extension from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug).
|
|
|
+
|
|
|
+Otherwise, this project now automatically sets up Xdebug support with VS Code. If you wish to set this up manually, please see the [`.vscode/launch.json`](https://github.com/markshust/docker-magento/blame/master/compose/.vscode/launch.json) file.
|
|
|
+
|
|
|
+1. In VS Code, make sure that it's running in a WSL window, rather than in the default window.
|
|
|
+2. Install the [`PHP Debug`](https://marketplace.visualstudio.com/items?itemName=xdebug.php-debug) extension on VS Code.
|
|
|
+3. Create a new configuration file inside the project. Go to the `Run and Debug` section in VS Code, then click on `create a launch.json file`.
|
|
|
+4. Attention to the following configs inside the file:
|
|
|
+ * The port must be the same as the port on the xdebug.ini file.
|
|
|
+ ```bash
|
|
|
+ bin/cli cat /usr/local/etc/php/php.ini
|
|
|
+ ```
|
|
|
+ ```bash
|
|
|
+ memory_limit = 4G
|
|
|
+ max_execution_time = 1800
|
|
|
+ zlib.output_compression = On
|
|
|
+ cgi.fix_pathinfo = 0
|
|
|
+ date.timezone = UTC
|
|
|
+
|
|
|
+ xdebug.mode = debug
|
|
|
+ xdebug.client_host = host.docker.internal
|
|
|
+ xdebug.idekey = PHPSTORM
|
|
|
+ xdebug.client_port=9003
|
|
|
+ #You can uncomment the following line to force the debug with each request
|
|
|
+ #xdebug.start_with_request=yes
|
|
|
+
|
|
|
+ upload_max_filesize = 100M
|
|
|
+ post_max_size = 100M
|
|
|
+ max_input_vars = 10000
|
|
|
+ ```
|
|
|
+ * The pathMappings should have the same folder path as the project inside the Docker container.
|
|
|
+ ```json
|
|
|
+ {
|
|
|
+ "version": "0.2.0",
|
|
|
+ "configurations": [
|
|
|
+ {
|
|
|
+ "name": "Listen for XDebug",
|
|
|
+ "type": "php",
|
|
|
+ "request": "launch",
|
|
|
+ "port": 9003,
|
|
|
+ "pathMappings": {
|
|
|
+ "/var/www/html": "${workspaceFolder}"
|
|
|
+ },
|
|
|
+ "hostname": "localhost"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ```
|
|
|
+5. Run the following command in the Windows Powershell. It allows WSL through the firewall, otherwise breakpoints might not be hitten.
|
|
|
+ ```powershell
|
|
|
+ New-NetFirewallRule -DisplayName "WSL" -Direction Inbound -InterfaceAlias "vEthernet (WSL)" -Action Allow
|
|
|
+ ```
|
|
|
+
|
|
|
### Xdebug & PhpStorm
|
|
|
|
|
|
1. First, install the [Chrome Xdebug helper](https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc). After installed, right click on the Chrome icon for it and go to Options. Under IDE Key, select PhpStorm from the list to set the IDE Key to "PHPSTORM", then click Save.
|
|
@@ -384,7 +448,7 @@ Otherwise, this project now automatically sets up Xdebug support with VS Code. I
|
|
|
* Create a new interpreter from the `From Docker, Vagrant, VM...` list.
|
|
|
* Select the Docker Compose option.
|
|
|
* For Server, select `Docker`. If you don't have Docker set up as a server, create one and name it `Docker`.
|
|
|
- * For Configuration files, add both the `docker-compose.yml` and `docker-compose.dev.yml` files from your project directory.
|
|
|
+ * For Configuration files, add both the `compose.yaml` and `compose.dev.yaml` files from your project directory.
|
|
|
* For Service, select `phpfpm`, then click OK.
|
|
|
* Name this CLI Interpreter `phpfpm`, then click OK again.
|
|
|
|
|
@@ -417,7 +481,7 @@ Otherwise, this project now automatically sets up Xdebug support with VS Code. I
|
|
|
|
|
|
Since version `40.0.0`, this project supports connecting to Docker with SSH/SFTP. This means that if you solely use either PhpStorm or VSCode, you no longer need to selectively mount host volumes in order to gain bi-directional sync capabilities from host to container. This will enable full speed in the native filesystem, as all files will be stored directly in the `appdata` container volume, rather than being synced from the host. This is especially useful if you'd like to sync larger directories such as `generated`, `pub` & `vendor`.
|
|
|
|
|
|
-Copy `docker-compose.dev-ssh.yml` to `docker-compose.dev.yml` before installing Magento to take advantage of this setup. Then, create an SFTP connection at Preferences -> Build, Execution, Deployment -> Deployment. Connect to `localhost` and use `app` for the username & password. You can set additional options for working with Magento in PhpStorm at Preferences -> Build, Execution, Deployment -> Deployment -> Options.
|
|
|
+Copy `compose.dev-ssh.yaml` to `compose.dev.yaml` before installing Magento to take advantage of this setup. Then, create an SFTP connection at Preferences -> Build, Execution, Deployment -> Deployment. Connect to `localhost` and use `app` for the username & password. You can set additional options for working with Magento in PhpStorm at Preferences -> Build, Execution, Deployment -> Deployment -> Options.
|
|
|
|
|
|
Note that you must use your IDE's SSH/SFTP functionality, otherwise changes will not be synced. To re-sync your host environment at any time, run:
|
|
|
|
|
@@ -429,13 +493,13 @@ bin/copyfromcontainer --all
|
|
|
|
|
|
Running Docker on Linux should be pretty straight-forward. Note that you need to run some [post install commands](https://docs.docker.com/install/linux/linux-postinstall/) as well as [installing Docker Compose](https://docs.docker.com/compose/install/) before continuing. These steps are taken care of automatically with Docker Desktop, but not on Linux.
|
|
|
|
|
|
-Copy `docker-compose.dev-linux.yml` to `docker-compose.dev.yml` before installing Magento to take advantage of this setup.
|
|
|
+Copy `compose.dev-linux.yaml` to `compose.dev.yaml` before installing Magento to take advantage of this setup.
|
|
|
|
|
|
#### The host.docker.internal hostname
|
|
|
|
|
|
The `host.docker.internal` hostname is used on Docker for Mac/Windows to reference the Docker daemon. On Linux, this hostname does not exist.
|
|
|
|
|
|
-This hostname is [hard-coded in the php.ini file](https://github.com/markshust/docker-magento/blob/master/images/php/7.4/conf/php.ini#L8). To make this hostname resolve, add `"host.docker.internal:172.17.0.1"` to the `app.extra_hosts` parameter of `docker-compose.yml`, replacing `172.17.0.1` with the result of:
|
|
|
+This hostname is [hard-coded in the php.ini file](https://github.com/markshust/docker-magento/blob/master/images/php/7.4/conf/php.ini#L8). To make this hostname resolve, add `"host.docker.internal:172.17.0.1"` to the `app.extra_hosts` parameter of `compose.yaml`, replacing `172.17.0.1` with the result of:
|
|
|
|
|
|
```
|
|
|
docker run --rm alpine ip route | awk 'NR==1 {print $3}'
|
|
@@ -481,10 +545,10 @@ Finally, restart the containers with `bin/restart`. After doing so, everything i
|
|
|
|
|
|
### MFTF
|
|
|
|
|
|
-To work with MFTF you will need to first enable the `selenium` image in the `docker-compose.dev.yml` file. Then, you will need to run the following.
|
|
|
+To work with MFTF you will need to first enable the `selenium` image in the `compose.dev.yaml` file. Then, you will need to run the following.
|
|
|
|
|
|
1. Run mftf build process `bin/mftf build:project`. This should build the basic setup for mftf in your project.
|
|
|
-2. Update the `extra_host` values to match your Magento URL and IP in `docker-compose.dev.yml`.
|
|
|
+2. Update the `extra_host` values to match your Magento URL and IP in `compose.dev.yaml`.
|
|
|
3. Update the values in `src/dev/tests/acceptance/.env`, including adding the new line `SELENIUM_HOST=selenium` to define the host Codeception should connect to.
|
|
|
4. Run a sample test `bin/mftf run:test AdminLoginSuccessfulTest`.
|
|
|
5. Update your `nginx.conf` file to allow access to the dev section with the following, before the final `deny all` section:
|
|
@@ -508,6 +572,69 @@ For debugging, you can connect to the selenium image using a VCN client.
|
|
|
|
|
|
Find more info [here](https://devdocs.magento.com/mftf/docs/getting-started.html) about mftf configuration.
|
|
|
|
|
|
+### Grunt + LiveReload for Frontend Development
|
|
|
+
|
|
|
+#### Create a new theme and make it active
|
|
|
+
|
|
|
+Create your new theme at `app/design/frontend/VendorName/theme-name`, with the related `composer.json`, `registration.php` and `theme.xml` files.
|
|
|
+
|
|
|
+Make your new theme active at Admin > Content > Design > Configuration. Click the Edit button next to Global Scope, and set the Applied Theme to your new theme name, and click Save Configuration.
|
|
|
+
|
|
|
+#### Load the LiveReload client file
|
|
|
+
|
|
|
+To create a connection to LiveReload, you'll need to insert the LiveReload script into your theme. You can do this by creating a file in your theme at `Magento_Theme/layout/default_head_blocks.xml` with the contents:
|
|
|
+
|
|
|
+```xml
|
|
|
+<?xml version="1.0"?>
|
|
|
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
|
|
|
+ <head>
|
|
|
+ <script defer="true" src="/livereload.js?port=443" src_type="url"/>
|
|
|
+ </head>
|
|
|
+</page>
|
|
|
+```
|
|
|
+
|
|
|
+The "?port=443" parameter is important, otherwise the `livereload.js` script won't work.
|
|
|
+
|
|
|
+While we're at it, let's also create an initial LESS file so we have something to test. Create a new file in your theme at `web/css/source/_extend.less` with the contents:
|
|
|
+
|
|
|
+```css
|
|
|
+body {
|
|
|
+ background: white;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+You'll need to clear the Magento cache to enable your module, and make sure this layout XML update is properly loaded.
|
|
|
+
|
|
|
+Your new theme should now be active at `https://yourdomain.test`. Since this is a new theme, it should appear the same as the parent theme defined in your theme.xml file, which is usually Blank.
|
|
|
+
|
|
|
+#### Set up Grunt
|
|
|
+
|
|
|
+Run `bin/setup-grunt`. This will set up the Grunt configuration files for your new theme. It's important to run this step after setting up your new theme, not before.
|
|
|
+
|
|
|
+#### Start the Grunt watcher
|
|
|
+
|
|
|
+Grunt can watch for filesystem changes by running `bin/grunt watch`. You can optionally pass in the `--verbose` or `-v` flag to toggle verbose mode on. This will let you know what's going on under the hood, so you can be sure it is compiling & watching the correct files, and updating them as changes are made.
|
|
|
+
|
|
|
+#### LiveReload Browser extension
|
|
|
+
|
|
|
+Running the `grunt watch` process also spawns the LiveReload server. Your browser needs to connect to this server, and this is done by installing the [LiveReload browser extension](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en).
|
|
|
+
|
|
|
+In your browser, be sure to also open the Google Chrome Dev Tools, go to the Network tab, and click "Disable cache". This will ensure the browser does not long-cache static file assets, such as JavaScript & CSS files, which is important during development.
|
|
|
+
|
|
|
+Ensure the LiveReload browser icon has been toggled on, and refresh the page. We can confirm the LiveReload script is loaded by going to the Network tab and ensuring the `livereload.js` file is loaded, and that it also spawns off a new websocket request to `/livereload`.
|
|
|
+
|
|
|
+#### Test LiveReload
|
|
|
+
|
|
|
+Since this is all set, let's update the CSS file to a different background color:
|
|
|
+
|
|
|
+```css
|
|
|
+body {
|
|
|
+ background: blue;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+Upon saving this file, we will see the Grunt watcher detect the changes, and your browser should automatically load the new style without you needing to refresh the page, and without a full browser refresh.
|
|
|
+
|
|
|
## Credits
|
|
|
|
|
|
### M.academy
|