Restructured the directories a bit

README.md

@@ -1,6 +1,6 @@
 # Micro Frontend with Webpack 5 Module Federation
 
-This is the same pets demo application that I have in other repos, but this one demonstrates [Webpack 5 Module Federation](https://webpack.js.org/concepts/module-federation/). Both `shared/nav` and `shared/pets` are federated modules with the rest being shared libraries. The idea being that the federated modules are features that build up app functionality and require frequent updates. While the rest are libraries that can help build up a federated module (utilities and shared components). The host application that serves these modules is in `apps/cats`. The application also features the concept of injectable redux reducers.
+This is the same pets demo application that I have in other repos, but this one demonstrates [Webpack 5 Module Federation](https://webpack.js.org/concepts/module-federation/). Both `remote/nav` and `remote/pets` are federated modules. The idea being that the federated modules are features that build up app functionality and require frequent updates. While everything in `shared` directory are libraries that can help build up a federated module (utilities and shared components). The host application that serves these modules is in `apps/cats`. The application also features the concept of injectable redux reducers.
 
 I put this all together in a monorepo using NX. I find this to be a better workflow than splitting modules into separate repos. Having both applications and modules living together in the same repo while using some monorepo tooling (Lerna/NX/Rush) to manage it all is a great developer experience in my opinion. Instead of fighting with `npm link`, managing multiple repos, and running multiple commands, just running one command to get started with development is very nice.
 
@@ -17,15 +17,15 @@ npm i pnpm nx -g
 Then in the root directory just run the following commands to start the app and json-server:
 
 ```
-pnpm install && pnpm run start
+pnpm i && pnpm run start
 ```
 
 Then navigate to `http:https://localhost:1337`
 
-If you want to just run a shared module you can do either of these if you have NX installed globally. From the root directory run the following and just replace `shared_nav` or the directory with the module you want to run:
+If you want to just run a shared module you can do either of these if you have NX installed globally. From the root directory run the following and just replace `remote_nav` or the directory with the module you want to run:
 
 ```
-nx run shared_nav:start
+nx run remote_nav:start
 cd shared/nav && pnpm run start
 ```
 

apps/cats-e2e/cypress.json

@@ -1,7 +1,7 @@
 {
  "baseUrl": "http:https://localhost:1337",
  "fileServerFolder": ".",
- "fixturesFolder": "../../tools/fixtures",
+ "fixturesFolder": "../../shared/types/src/fixtures",
  "integrationFolder": "./src/integration",
  "modifyObstructiveCode": false,
  "supportFile": "./src/support/index.ts",

apps/cats-e2e/package.json

@@ -1,5 +1,5 @@
 {
- "name": "host_cats-e2e",
+ "name": "@pet-tracker/cats-e2e",
  "version": "1.0.0",
  "private": true,
  "license": "UNLICENSED",

apps/cats/package.json

@@ -1,5 +1,5 @@
 {
- "name": "host_cats",
+ "name": "@pet-tracker/cats",
  "version": "1.0.0",
  "main": "src/index.tsx",
  "license": "UNLICENSED",

apps/cats/src/app/App.tsx

@@ -8,7 +8,7 @@ import { Providers } from './Providers';
 import { Routes } from './Routes';
 
 const Nav = React.lazy(() =>
- import('shared_nav/features/core/components/Nav').then((module) => ({ default: module.Nav }))
+ import('remote_nav/features/core/components/Nav').then((module) => ({ default: module.Nav }))
 );
 
 export const App: React.FC = () => (

apps/cats/src/app/Providers.tsx

@@ -4,7 +4,9 @@ import { Provider } from 'react-redux';
 import { store } from './store';
 
 const PetsProvider = React.lazy(() =>
- import('shared_pets/features/core/components/PetsProvider').then((module) => ({ default: module.PetsProvider }))
+ import('remote_pets/features/core/components/PetsProvider').then((module) => ({
+ default: module.PetsProvider
+ }))
 );
 
 export const Providers: React.FC = ({ children }) => (

apps/cats/src/app/Routes.tsx

@@ -5,23 +5,25 @@ import { Route, Switch } from 'react-router-dom';
 import { store } from './store';
 
 const EditPet = React.lazy(() =>
- import('shared_pets/features/core/components/EditPet').then((module) => ({ default: module.EditPet }))
+ import('remote_pets/features/core/components/EditPet').then((module) => ({ default: module.EditPet }))
 );
 
 const AddPets = React.lazy(() =>
- import('shared_pets/features/core/components/AddPets').then((module) => ({ default: module.AddPets }))
+ import('remote_pets/features/core/components/AddPets').then((module) => ({ default: module.AddPets }))
 );
 
 const ViewPet = React.lazy(() =>
- import('shared_pets/features/core/components/ViewPet').then((module) => ({ default: module.ViewPet }))
+ import('remote_pets/features/core/components/ViewPet').then((module) => ({ default: module.ViewPet }))
 );
 
 const ViewPets = React.lazy(() =>
- import('shared_pets/features/core/components/ViewPets').then((module) => ({ default: module.ViewPets }))
+ import('remote_pets/features/core/components/ViewPets').then((module) => ({ default: module.ViewPets }))
 );
 
 const PetsProvider = React.lazy(() =>
- import('shared_pets/features/core/components/PetsProvider').then((module) => ({ default: module.PetsProvider }))
+ import('remote_pets/features/core/components/PetsProvider').then((module) => ({
+ default: module.PetsProvider
+ }))
 );
 
 export const Routes: React.FC = () => (

apps/cats/webpack.config.ts

@@ -25,10 +25,10 @@ const webpackConfig = (_env: { production: string; development: string }, argv:
 
  config.plugins = config.plugins?.concat([
  new container.ModuleFederationPlugin({
- name: 'host_cats',
+ name: '@pet-tracker/cats',
  remotes: {
- shared_nav: 'shared_nav@http:https://localhost:3001/remoteEntry.js',
- shared_pets: 'shared_pets@http:https://localhost:3002/remoteEntry.js'
+ remote_nav: 'remote_nav@http:https://localhost:1338/remoteEntry.js',
+ remote_pets: 'remote_pets@http:https://localhost:1339/remoteEntry.js'
  },
  shared: {
  ...dependencies,

nx.json

@@ -17,23 +17,23 @@
  }
  },
  "projects": {
- "host_cats": {
+ "@pet-tracker/cats": {
  "implicitDependencies": []
  },
- "host_cats-e2e": {
+ "@pet-tracker/cats-e2e": {
  "tags": [],
- "implicitDependencies": ["host_cats"]
+ "implicitDependencies": ["@pet-tracker/cats"]
  },
  "@pet-tracker/auth": {
  "implicitDependencies": []
  },
  "@pet-tracker/common-ui": {
  "implicitDependencies": []
  },
- "shared_nav": {
+ "remote_nav": {
  "implicitDependencies": []
  },
- "shared_pets": {
+ "remote_pets": {
  "implicitDependencies": []
  },
  "@pet-tracker/types": {