Update from Forestry.io

Jacob Ebey updated src/posts/get-started.md

Author: jacob-ebey

src/posts/get-started.md

@@ -3,8 +3,8 @@ title: Getting Started With Federated Modules
 secondary_title: get up and running in 15 minutes
 author: Jacob Ebey
 date: 2020-03-29T16:04:26.000+00:00
----
 
+---
 # A Little Background
 
 If you've worked as a developer long enough, you've ran into the inevitable problem of sharing components between teams. Let's be real here, how often does this lead to a good experience for anyone?
@@ -15,14 +15,13 @@ I think [Zack Jackson](https://indepth.dev/webpack-5-module-federation-a-game-ch
 
 If you would like to learn more about Webpack Module Federation, you can head over to the [Learn More](/learn-more) page.
 
-
 # What We Are Building
 
 We are going to build out two separate Single Page Applications (SPA) that use Module Federation to share components during runtime.
 
 `Application A` will contain a `SayHelloFromA` component that will be consumed by `Application B` while `Application B` will contain a `SayHelloFromB` component that will be consumed by `ApplicationA`. This looks like:
 
-<Image alt="architecture diagram" size="large" src={getStartedDiagram} style={{ margin: "2rem auto" }} />
+![](/static/get-started-diagram.svg "Architecture Diagram")
 
 This architecture will allow each SPA to be developed and deployed independantly along with instantly recieving updates from other federated applications with zero deployments.
 
@@ -39,87 +38,27 @@ Start by creating a new project folder with the following `package.json` to allo
 **package.json**
 
 <SyntaxHighlighter language="json" style={ghcolors}>
-  {`{
-  "name": "federation-example",
-  "private": true,
-  "workspaces": [
-    "packages/*"
-  ],
-  "scripts": {
-    "start": "wsrun --parallel start",
-    "build": "yarn workspaces run build",
-    "dev": "wsrun --parallel dev"
-  },
-  "devDependencies": {
-    "wsrun": "^5.2.0"
-  }
-}`}
+{`{ "name": "federation-example", "private": true, "workspaces": [ "packages/*" ], "scripts": { "start": "wsrun --parallel start", "build": "yarn workspaces run build", "dev": "wsrun --parallel dev" }, "devDependencies": { "wsrun": "^5.2.0" } }`}
 </SyntaxHighlighter>
 
 We will now create two folders for our SPAs to live in under a new `packages` directory called `application-a` and `application-b`, these will respectively contain the following `package.json` files:
 
 **packages/application-a/package.json**
 
 <SyntaxHighlighter language="json" style={ghcolors}>
-  {`{
-  "name": "application-a",
-  "version": "1.0.0",
-  "private": true,
-  "scripts": {
-    "start": "serve dist -p 3001",
-    "build": "webpack --mode production",
-    "dev": "concurrently \\"webpack --watch\\" \\"serve dist -p 3001\\""
-  },
-  "dependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.8.6",
-    "@babel/preset-react": "^7.8.3",
-    "babel-loader": "^8.0.6",
-    "concurrently": "^5.1.0",
-    "html-webpack-plugin": "git://github.com/ScriptedAlchemy/html-webpack-plugin#master",
-    "serve": "^11.3.0",
-    "webpack": "git://github.com/webpack/webpack.git#dev-1",
-    "webpack-cli": "^3.3.11"
-  }
-}`}
+{`{ "name": "application-a", "version": "1.0.0", "private": true, "scripts": { "start": "serve dist -p 3001", "build": "webpack --mode production", "dev": "concurrently \\"webpack --watch\\" \\"serve dist -p 3001\\"" }, "dependencies": { "react": "^16.13.1", "react-dom": "^16.13.1" }, "devDependencies": { "@babel/core": "^7.8.6", "@babel/preset-react": "^7.8.3", "babel-loader": "^8.0.6", "concurrently": "^5.1.0", "html-webpack-plugin": "git://github.com/ScriptedAlchemy/html-webpack-plugin#master", "serve": "^11.3.0", "webpack": "git://github.com/webpack/webpack.git#dev-1", "webpack-cli": "^3.3.11" } }`}
 </SyntaxHighlighter>
 
 **packages/application-b/package.json**
 
 <SyntaxHighlighter language="json" style={ghcolors}>
-  {`{
-  "name": "application-b",
-  "version": "1.0.0",
-  "private": true,
-  "scripts": {
-    "start": "serve dist -p 3002",
-    "build": "webpack --mode production",
-    "dev": "concurrently \\"webpack --watch\\" \\"serve dist -p 3002\\""
-  },
-  "dependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.8.6",
-    "@babel/preset-react": "^7.8.3",
-    "babel-loader": "^8.0.6",
-    "concurrently": "^5.1.0",
-    "html-webpack-plugin": "git://github.com/ScriptedAlchemy/html-webpack-plugin#master",
-    "serve": "^11.3.0",
-    "webpack": "git://github.com/webpack/webpack.git#dev-1",
-    "webpack-cli": "^3.3.11"
-  }
-}`}
+{`{ "name": "application-b", "version": "1.0.0", "private": true, "scripts": { "start": "serve dist -p 3002", "build": "webpack --mode production", "dev": "concurrently \\"webpack --watch\\" \\"serve dist -p 3002\\"" }, "dependencies": { "react": "^16.13.1", "react-dom": "^16.13.1" }, "devDependencies": { "@babel/core": "^7.8.6", "@babel/preset-react": "^7.8.3", "babel-loader": "^8.0.6", "concurrently": "^5.1.0", "html-webpack-plugin": "git://github.com/ScriptedAlchemy/html-webpack-plugin#master", "serve": "^11.3.0", "webpack": "git://github.com/webpack/webpack.git#dev-1", "webpack-cli": "^3.3.11" } }`}
 </SyntaxHighlighter>
 
 Install the dependancies with:
 
 <SyntaxHighlighter language="bash" style={ghcolors}>
-  {`> yarn`}
+{`> yarn`}
 </SyntaxHighlighter>
 
 ## Bootstrap The SPAs
@@ -129,57 +68,49 @@ Next up is bootstraping our SPA React applications. We need to create a `src` di
 **packages/application-{a,b}/src/index.js**
 
 <SyntaxHighlighter language="javascript" style={ghcolors}>
-  {`import('./bootstrap');`}
+{`import('./bootstrap');`}
 </SyntaxHighlighter>
 
 **packages/application-{a,b}/src/bootstrap.jsx**
 
 <SyntaxHighlighter language="javascript" style={ghcolors}>
-  {bootstrapCodeSample}
+{bootstrapCodeSample}
 </SyntaxHighlighter>
 
 We also need a `public` directory in each of the packages with the the following html template that we will modify per SPA later:
 
 **packages/application-{a,b}/public/index.html**
 
 <SyntaxHighlighter language="html" style={ghcolors}>
-  {`<!DOCTYPE html>
-<html lang="en">
-  <head>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
-`}
+{`<!DOCTYPE html> <html lang="en"> <head> </head> <body> <div id="root"></div> </body> </html>`}
 </SyntaxHighlighter>
 
 Now we can implement our two `app.jsx` files for each application that will house our shared components:
 
 **packages/application-a/src/app.jsx**
 
 <SyntaxHighlighter language="javascript" style={ghcolors}>
-  {appACodeSample}
+{appACodeSample}
 </SyntaxHighlighter>
 
 **packages/application-b/src/app.jsx**
 
 <SyntaxHighlighter language="javascript" style={ghcolors}>
-  {appBCodeSample}
+{appBCodeSample}
 </SyntaxHighlighter>
 
 And now finally, we'll add our base `webpack.config.js` for each application:
 
 **packages/application-{a,b}/webpack.config.js**
 
 <SyntaxHighlighter language="javascript" style={ghcolors}>
-  {baseWebpackConfig}
+{baseWebpackConfig}
 </SyntaxHighlighter>
 
 From the root of the application, you should now be able to access your two SPAs on [http://localhost:3001](http://localhost:3001) and [http://localhost:3002](http://localhost:3002) when runing:
 
 <SyntaxHighlighter language="bash" style={ghcolors}>
-  {`> yarn dev`}
+{`> yarn dev`}
 </SyntaxHighlighter>
 
 # Start Federating
@@ -191,7 +122,7 @@ We'll start by adding the `ModuleFederationPlugin` to `Application A`, this will
 **packages/application-a/webpack.config.js**
 
 <SyntaxHighlighter language="javascript" style={ghcolors}>
-  {federationPluginA}
+{federationPluginA}
 </SyntaxHighlighter>
 
 This specifies that `Application A` exposese it's App component to the world as a Federated Module called `SayHelloFromA`, while whenever you import from `application_b`, those modules should come from `Application B` at runtime.
@@ -201,27 +132,21 @@ We will do the same thing fro `Applicaiton B`, specifying that it exposes it's A
 **packages/application-b/webpack.config.js**
 
 <SyntaxHighlighter language="javascript" style={ghcolors}>
-  {federationPluginB}
+{federationPluginB}
 </SyntaxHighlighter>
 
 The last step before we can start to utilize the exposed components is to specify for the runtime where the Remote Entries for the Containers you wish to consume are located. We do this by simply adding a script tag to the HTML template of the remotes you wish to consume.
 
 **packages/application-a/public/index.html**
 
 <SyntaxHighlighter language="html" style={ghcolors}>
-  {`<head>
-  <!-- The remote entry for Application B -->
-  <script src="http://localhost:3002/remoteEntry.js"></script>    
-</head>`}
+{`<head> <!-- The remote entry for Application B --> <script src="http://localhost:3002/remoteEntry.js"></script> </head>`}
 </SyntaxHighlighter>
 
 **packages/application-b/public/index.html**
 
 <SyntaxHighlighter language="html" style={ghcolors}>
-  {`<head>
-  <!-- The remote entry for Application A -->
-  <script src="http://localhost:3001/remoteEntry.js"></script>    
-</head>`}
+{`<head> <!-- The remote entry for Application A --> <script src="http://localhost:3001/remoteEntry.js"></script> </head>`}
 </SyntaxHighlighter>
 
 The remote entry files are tiny mappings for webpack to resolve the individually imported modules without trasfering unnessesary info. They are also responsible for enabling the sharing of libraries that the packages use, in this case, when `Application A` requests `Application B`'s SayHelloFromB component, we do not send the React or ReactDOM over the wire as `Application A` already has a copy of it.
@@ -235,15 +160,15 @@ Starting with `Application A`, we can render the `SayHelloFromB` component like
 **packages/application-a/src/bootstrap.jsx**
 
 <SyntaxHighlighter language="javascript" style={ghcolors}>
-  {applicationAConsumesB}
+{applicationAConsumesB}
 </SyntaxHighlighter>
 
 `Application B` will look very similar, just importing from `application_a` instead:
 
 **packages/application-b/src/bootstrap.jsx**
 
 <SyntaxHighlighter language="javascript" style={ghcolors}>
-  {applicationBConsumesA}
+{applicationBConsumesA}
 </SyntaxHighlighter>
 
 # A Few Notes
@@ -256,4 +181,4 @@ Visiting `Application B` for the first time, you'll notice we have already cache
 
 <Image alt="'Application B' network log" size="large" src={bNetworkLog} style={{ margin: "2rem auto" }} />
 
-**You have just created your first Webpack 5 Federated projects. Now go out and build something awesome!**
+**You have just created your first Webpack 5 Federated projects. Now go out and build something awesome!**