Merge pull request #1216 from Patternslib/thet-improvements--devserver

Thet improvements  devserver

Author: thet

README.md

@@ -47,6 +47,10 @@ which contains Patterns and all its dependencies:
 
 Alternatively, you can [download a bundle at patternslib.com](http://patternslib.com/download.html).
 
+To start the development server, use `make serve` or `npx yarn start` and access the demo pages via [http://localhost:3001/](http://localhost:3001/).
+The files are watched and the bundle re-built on changes.
+You can access the bundle directly at [http://localhost:3001/bundle.min.js](http://localhost:3001/bundle.min.js).
+
 
 ## Layout
 
@@ -70,7 +74,7 @@ You'll need to have a Sass compiler installed.
 To demo the patterns, simply type `make serve` to install the necessary
 dependencies and to start a simple Node.js HTTP server.
 
-You can then visit http://localhost:4001 to see a site with demos.
+You can then visit http://localhost:3001 to see a site with demos.
 
 Alternatively, patterns can also be demoed through the
 [Patternslib.com](http://patternslib.com) website, which is open-source. The

docs/developer/module-federation.md

@@ -29,8 +29,8 @@ For jQuery the remote bundle is named ``jquery-remote.min.js``.
 
 ```
 import "@patternslib/patternslib/webpack/module_federation";
-// Please not the parentheses for the next import.
-// Kepp them, otherwise we get this error:
+// Please note the parentheses for the next import.
+// Keep them, otherwise we get this error:
 // "Shared module is not available for eager consumption."
 import("./src/patterns");
 ```
@@ -39,8 +39,8 @@ For the jQuery bundle which we will use as remote we create: ``index-jquery.js``
 
 ```
 import "@patternslib/patternslib/webpack/module_federation";
-// Please not the parentheses for the next import.
-// Kepp them, otherwise we get this error:
+// Please note the parentheses for the next import.
+// Keep them, otherwise we get this error:
 // "Shared module is not available for eager consumption."
 import("@patternslib/patternslib/src/globals");
 ```

webpack/webpack.config.js

@@ -83,6 +83,8 @@ module.exports = () => {
 
     if (process.env.NODE_ENV === "development") {
         config.devServer.static.directory = path.resolve(__dirname, "../");
+        config.devServer.watchFiles = ["src/"];
+        config.devServer.port = "3001";
         // Add a strict Content-Security-Policy without 'unsafe-inline' to the dev
         // server for testing CSR issues.
         //config.devServer.headers["Content-Security-Policy"] =