Home Explore Help
Sign In
mirrors
/
docker-magento
mirror of https://github.com/markshust/docker-magento
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Documentation and build image for Grunt + LiveReload support #430

Mark Shust 2 years ago
parent
b207dd6acd
commit
fc9c758372
4 changed files with 72 additions and 4 deletions
Unified View Show Diff Stats
  1. 1 1
      .github/workflows/build-nginx.yml
  2. 5 0
      CHANGELOG.md
  3. 64 1
      README.md
  4. 2 2
      compose/docker-compose.yml

+ 1 - 1
.github/workflows/build-nginx.yml
View File 

@@ -31,4 +31,4 @@ jobs:
 
           push: true
 
           push: true
 
           tags: |
 
           tags: |
 
             markoshust/magento-nginx:1.18
 
             markoshust/magento-nginx:1.18
 
-            markoshust/magento-nginx:1.18-7
 
+            markoshust/magento-nginx:1.18-8

+ 5 - 0
CHANGELOG.md
View File 

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 
 
+## [43.1.0] - 2022-09-13
 
+
 
+### Added
 
+- Support for Grunt + LiveReload [#430](https://github.com/markshust/docker-magento/issues/430).
 
+
 
 ## [43.0.0] - 2022-05-26
 
 ## [43.0.0] - 2022-05-26
 
 
 
 ### Added
 
 ### Added

+ 64 - 1
README.md
View File 

@@ -28,7 +28,7 @@
 
 View Dockerfiles for the latest tags:
 
 View Dockerfiles for the latest tags:
 
 
 
 - [markoshust/magento-nginx (Docker Hub)](https://hub.docker.com/r/markoshust/magento-nginx/)
 
 - [markoshust/magento-nginx (Docker Hub)](https://hub.docker.com/r/markoshust/magento-nginx/)
 
-  - [`1.18`, `1.18-7`](https://github.com/markshust/docker-magento/tree/master/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/)
 
 - [markoshust/magento-php (Docker Hub)](https://hub.docker.com/r/markoshust/magento-php/)
 
   - [`8.1-fpm`, `8.1-fpm-1`](https://github.com/markshust/docker-magento/tree/master/images/php/8.1)
 
   - [`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)
 
   - [`7.4-fpm`, `7.4-fpm-15`](https://github.com/markshust/docker-magento/tree/master/images/php/7.4)
 
@@ -488,6 +488,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.
 
 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
 
 ## Credits
 
 
 
 ### M.academy
 
 ### M.academy

+ 2 - 2
compose/docker-compose.yml
View File 

@@ -1,7 +1,7 @@
 
 ## Mark Shust's Docker Configuration for Magento
 
 ## Mark Shust's Docker Configuration for Magento
 
 ## (https://github.com/markshust/docker-magento)
 
 ## (https://github.com/markshust/docker-magento)
 
 ##
 
 ##
 
-## Version 43.0.0
 
+## Version 43.1.0
 
 
 
 ## To use SSH, see https://github.com/markshust/docker-magento#ssh
 
 ## To use SSH, see https://github.com/markshust/docker-magento#ssh
 
 ## Linux users, see https://github.com/markshust/docker-magento#linux
 
 ## Linux users, see https://github.com/markshust/docker-magento#linux
 
@@ -14,7 +14,7 @@ version: "3"
 
 
 
 services:
 
 services:
 
   app:
 
   app:
 
-    image: markoshust/magento-nginx:1.18-7
 
+    image: markoshust/magento-nginx:1.18-8
 
     ports:
 
     ports:
 
       - "80:8000"
 
       - "80:8000"
 
       - "443:8443"
 
       - "443:8443"