GitHub - fc-micro-frontends/career-up at step20
REACT_APP_AUTH0_DOMAIN=dev-vcrmf0xuep020tri.us.auth0.com
REACT_APP_AUTH0_CLIENT_ID=27LLb4I9cIjiiQNSjbNIX9sQM1KECUfk
REACT_APP_AUTH0_CALLBACK_URL=http://localhost:3000
➜ pnpm i
➜ pnpm build
{
"name": "@career-up/monorepo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "turbo start:live",
"build": "turbo build",
**"build:packages": "turbo build --filter=shell-router --filter=ui-kit",**
"serve": "turbo build:start"
},
"keywords": [],
"author": "",
"license": "ISC",
"packageManager": "[email protected]+sha1.77d568bacf41eeefd6695a7087c1282433955b5c",
"devDependencies": {
"turbo": "^1.11.1",
"typescript": "5.2.2"
}
}
➜ pnpm -w build:packages
{
"name": "@career-up/shell",
"version": "1.0.0",
"scripts": {
"build": "**pnpm -w build:packages &&** webpack --mode production",
"build:dev": "**pnpm -w build:packages &&** webpack --mode development",
"build:start": "cd dist && PORT=3000 npx serve -s",
"start": "webpack serve --open --mode development",
"start:live": "webpack serve --open --mode development --live-reload --hot"
},
"license": "MIT",
"author": {
"name": "Jack Herrington",
"email": "[email protected]"
},
"devDependencies": {
"@babel/core": "^7.15.8",
"@babel/plugin-transform-runtime": "^7.15.8",
"@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.10.4",
"@types/node": "^20.10.5",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"autoprefixer": "^10.1.0",
"babel-loader": "^8.2.2",
"css-loader": "^6.3.0",
"dotenv-webpack": "^8.0.1",
"html-webpack-plugin": "^5.3.2",
"postcss": "^8.2.1",
"postcss-loader": "^4.1.0",
"style-loader": "^3.3.0",
"typescript": "5.2.2",
"webpack": "^5.57.1",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.3.1"
},
"dependencies": {
"@auth0/auth0-react": "^2.2.4",
"@babel/runtime": "^7.23.6",
"@career-up/shell-router": "workspace:*",
"@career-up/ui-kit": "workspace:*",
"@module-federation/utilities": "^3.0.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.1"
}
}
{
"name": "@career-up/posting",
"version": "1.0.0",
"scripts": {
"build": "**pnpm -w build:packages &&** webpack --mode production",
"build:dev": "**pnpm -w build:packages &&** webpack --mode development",
"build:start": "cd dist && PORT=3001 npx serve **-s**",
"start": "webpack serve --open --mode development",
"start:live": "webpack serve --open --mode development --live-reload --hot"
},
"license": "MIT",
"author": {
"name": "Jack Herrington",
"email": "[email protected]"
},
"devDependencies": {
"@babel/core": "^7.15.8",
"@babel/plugin-transform-runtime": "^7.15.8",
"@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.10.4",
"@types/node": "^20.10.7",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"autoprefixer": "^10.1.0",
"babel-loader": "^8.2.2",
"css-loader": "^6.3.0",
"dotenv-webpack": "^8.0.1",
"eslint": "^8.55.0",
"eslint-plugin-react-hooks": "^4.6.0",
"html-webpack-plugin": "^5.3.2",
"postcss": "^8.2.1",
"postcss-loader": "^4.1.0",
"style-loader": "^3.3.0",
"typescript": "5.2.2",
"webpack": "^5.57.1",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.3.1"
},
"dependencies": {
"@auth0/auth0-spa-js": "^2.1.3",
"@babel/runtime": "^7.23.6",
"@career-up/shell-router": "workspace:*",
"@career-up/ui-kit": "workspace:*",
"@module-federation/utilities": "^3.0.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-error-boundary": "^4.0.12",
"react-router-dom": "^6.21.1"
}
}
{
"name": "@career-up/edu",
"version": "1.0.0",
"scripts": {
"build": "**pnpm -w build:packages &&** webpack --mode production",
"build:dev": "**pnpm -w build:packages &&** webpack --mode development",
"build:start": "cd dist && PORT=3002 npx serve **-s**",
"start": "webpack serve --open --mode development",
"start:live": "webpack serve --open --mode development --live-reload --hot"
},
"license": "MIT",
"author": {
"name": "Jack Herrington",
"email": "[email protected]"
},
"devDependencies": {
"@babel/core": "^7.15.8",
"@babel/plugin-transform-runtime": "^7.15.8",
"@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.10.4",
"@types/node": "^20.10.8",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"autoprefixer": "^10.1.0",
"babel-loader": "^8.2.2",
"css-loader": "^6.3.0",
"dotenv-webpack": "^8.0.1",
"eslint": "^8.55.0",
"eslint-plugin-react-hooks": "^4.6.0",
"html-webpack-plugin": "^5.3.2",
"postcss": "^8.2.1",
"postcss-loader": "^4.1.0",
"style-loader": "^3.3.0",
"typescript": "5.2.2",
"webpack": "^5.57.1",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.3.1"
},
"dependencies": {
"@auth0/auth0-spa-js": "^2.1.3",
"@babel/runtime": "^7.23.6",
"@career-up/shell-router": "workspace:*",
"@career-up/ui-kit": "workspace:*",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"jotai": "^2.6.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.1"
}
}
{
"name": "@career-up/network",
"version": "1.0.0",
"scripts": {
"build": "**pnpm -w build:packages &&** webpack --mode production",
"build:dev": "**pnpm -w build:packages &&** webpack --mode development",
"build:start": "cd dist && PORT=3003 npx serve **-s**",
"start": "webpack serve --open --mode development",
"start:live": "webpack serve --open --mode development --live-reload --hot"
},
"license": "MIT",
"author": {
"name": "Jack Herrington",
"email": "[email protected]"
},
"devDependencies": {
"@babel/core": "^7.15.8",
"@babel/plugin-transform-runtime": "^7.15.8",
"@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.10.4",
"@types/node": "^20.10.8",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"autoprefixer": "^10.1.0",
"babel-loader": "^8.2.2",
"css-loader": "^6.3.0",
"dotenv-webpack": "^8.0.1",
"eslint": "^8.55.0",
"eslint-plugin-react-hooks": "^4.6.0",
"html-webpack-plugin": "^5.3.2",
"postcss": "^8.2.1",
"postcss-loader": "^4.1.0",
"style-loader": "^3.3.0",
"tailwindcss": "^2.0.2",
"typescript": "5.2.2",
"webpack": "^5.57.1",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.3.1"
},
"dependencies": {
"@auth0/auth0-spa-js": "^2.1.3",
"@babel/runtime": "^7.23.6",
"@career-up/shell-router": "workspace:*",
"@career-up/ui-kit": "workspace:*",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.1",
"recoil": "^0.7.7"
}
}
{
"name": "@career-up/fragment-recommend-connections",
"version": "1.0.0",
"scripts": {
"build": "**pnpm -w build:packages &&** webpack --mode production",
"build:dev": "**pnpm -w build:packages &&** webpack --mode development",
"build:start": "cd dist && PORT=5001 npx serve **-s**",
"start": "webpack serve --open --mode development",
"start:live": "webpack serve --open --mode development --live-reload --hot"
},
"license": "MIT",
"author": {
"name": "Jack Herrington",
"email": "[email protected]"
},
"devDependencies": {
"@babel/core": "^7.15.8",
"@babel/plugin-transform-runtime": "^7.15.8",
"@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.10.4",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"autoprefixer": "^10.1.0",
"babel-loader": "^8.2.2",
"css-loader": "^6.3.0",
"eslint": "^8.55.0",
"eslint-plugin-react-hooks": "^4.6.0",
"html-webpack-plugin": "^5.3.2",
"postcss": "^8.2.1",
"postcss-loader": "^4.1.0",
"style-loader": "^3.3.0",
"typescript": "5.2.2",
"webpack": "^5.57.1",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.3.1"
},
"dependencies": {
"@auth0/auth0-spa-js": "^2.1.3",
"@babel/runtime": "^7.23.6",
"@career-up/shell-router": "workspace:*",
"@career-up/ui-kit": "workspace:*",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.1"
}
}
REACT_APP_AUTH0_DOMAIN=dev-vcrmf0xuep020tri.us.auth0.com
REACT_APP_AUTH0_CLIENT_ID=27LLb4I9cIjiiQNSjbNIX9sQM1KECUfk
REACT_APP_AUTH0_CALLBACK_URL=http://localhost:3000
REACT_APP_MICROAPP_POSTING=http://localhost:3001
REACT_APP_MICROAPP_EDU=http://localhost:3002
REACT_APP_MICROAPP_NETWORK=http://localhost:3003
REACT_APP_MICROAPP_JOB=http://localhost:3004
REACT_APP_FRAGMENT_RECOMMEND_CONNECTIONS=http://localhost:5001
REACT_APP_SERVER_URL=http://localhost:4000
// career-up/apps/shell/src/components/app-posting.tsx
import React, { useEffect, useRef } from "react";
import { useLocation } from "react-router-dom";
import { appPostingBasename } from "../constants/prefix";
import { type InjectFuncType, useShellEvent } from "@career-up/shell-router";
import { importRemote } from "@module-federation/utilities";
export default function AppPosting() {
const wrapperRef = useRef<HTMLDivElement>(null);
const location = useLocation();
useShellEvent("app-posting", appPostingBasename);
const isFirstRunRef = useRef(true);
const unmountRef = useRef(() => {});
useEffect(() => {
if (!isFirstRunRef.current) {
return;
}
isFirstRunRef.current = false;
importRemote<{ default: InjectFuncType }>({
**url: process.env.REACT_APP_MICROAPP_POSTING!,**
scope: "posting",
module: "injector",
remoteEntryFileName: `remoteEntry.js`,
})
.then(({ default: inject }) => {
unmountRef.current = inject({
routerType: "memory",
rootElement: wrapperRef.current!,
basePath: location.pathname.replace(appPostingBasename, ""),
});
})
.catch((error) => {
console.log(error);
});
}, [location]);
useEffect(() => unmountRef.current, []);
return <div ref={wrapperRef} id="app-posting" />;
}
// career-up/apps/shell/src/components/app-edu.tsx
import React, { useEffect, useRef } from "react";
import { useLocation } from "react-router-dom";
import { appEduBasename } from "../constants/prefix";
import { type InjectFuncType, useShellEvent } from "@career-up/shell-router";
import { importRemote } from "@module-federation/utilities";
export default function AppEdu() {
const wrapperRef = useRef<HTMLDivElement>(null);
const location = useLocation();
useShellEvent("app-edu", appEduBasename);
const isFirstRunRef = useRef(true);
const unmountRef = useRef(() => {});
useEffect(() => {
if (!isFirstRunRef.current) {
return;
}
isFirstRunRef.current = false;
importRemote<{ default: InjectFuncType }>({
**url: process.env.REACT_APP_MICROAPP_EDU!,**
scope: "edu",
module: "injector",
remoteEntryFileName: `remoteEntry.js`,
})
.then(({ default: inject }) => {
unmountRef.current = inject({
routerType: "memory",
rootElement: wrapperRef.current!,
basePath: location.pathname.replace(appEduBasename, ""),
});
})
.catch((error) => {
console.log(error);
});
}, [location]);
useEffect(() => unmountRef.current, []);
return <div ref={wrapperRef} id="app-edu" />;
}
// career-up/apps/shell/src/components/app-network.tsx
import React, { useEffect, useRef } from "react";
import { useLocation } from "react-router-dom";
import { appNetworkBasename } from "../constants/prefix";
import { type InjectFuncType, useShellEvent } from "@career-up/shell-router";
import { importRemote } from "@module-federation/utilities";
export default function AppNetwork() {
const wrapperRef = useRef<HTMLDivElement>(null);
const location = useLocation();
useShellEvent("app-network", appNetworkBasename);
const isFirstRunRef = useRef(true);
const unmountRef = useRef(() => {});
useEffect(() => {
if (!isFirstRunRef.current) {
return;
}
isFirstRunRef.current = false;
importRemote<{ default: InjectFuncType }>({
**url: process.env.REACT_APP_MICROAPP_NETWORK!,**
scope: "network",
module: "injector",
remoteEntryFileName: `remoteEntry.js`,
})
.then(({ default: inject }) => {
unmountRef.current = inject({
routerType: "memory",
rootElement: wrapperRef.current!,
basePath: location.pathname.replace(appNetworkBasename, ""),
});
})
.catch((error) => {
console.log(error);
});
}, [location]);
useEffect(() => unmountRef.current, []);
return <div ref={wrapperRef} id="app-network" />;
}
// career-up/apps/shell/src/components/app-job.tsx
import React, { useEffect, useRef } from "react";
import { useLocation } from "react-router-dom";
import { appJobBasename } from "../constants/prefix";
import { type InjectFuncType, useShellEvent } from "@career-up/shell-router";
import { importRemote } from "@module-federation/utilities";
export default function AppJob() {
const wrapperRef = useRef<HTMLDivElement>(null);
const location = useLocation();
useShellEvent("app-job", appJobBasename);
const isFirstRunRef = useRef(true);
const unmountRef = useRef(() => {});
useEffect(() => {
if (!isFirstRunRef.current) {
return;
}
isFirstRunRef.current = false;
importRemote<{ default: InjectFuncType }>({
**url: process.env.REACT_APP_MICROAPP_JOB!,**
scope: "job",
module: "injector",
remoteEntryFileName: `remoteEntry.js`,
})
.then(({ default: inject }) => {
unmountRef.current = inject({
routerType: "memory",
rootElement: wrapperRef.current!,
basePath: location.pathname.replace(appJobBasename, ""),
});
})
.catch((error) => {
console.log(error);
});
}, [location]);
useEffect(() => unmountRef.current, []);
return <div ref={wrapperRef} id="app-job" />;
}
// career-up/apps/posting/src/pages/page-home.tsx
import "./page-home.scss";
import React, { Suspense, useEffect, useState } from "react";
import Profile from "../components/profile";
import { PostType } from "../types";
import { createPost, getPosts, removePost } from "../apis";
import Post from "../components/post";
import WritePost from "../components/write-post";
import { useAuth0Client } from "@career-up/shell-router";
import { ErrorBoundary } from "react-error-boundary";
import { importRemote } from "@module-federation/utilities";
const PageHome: React.FC = () => {
const auth0Client = useAuth0Client();
const [posts, setPosts] = useState<PostType[]>([]);
const RecommendConnectionsContainer = React.lazy(() =>
importRemote({
**url: process.env.REACT_APP_FRAGMENT_RECOMMEND_CONNECTIONS!,**
scope: "fragment_recommend_connections",
module: "container",
remoteEntryFileName: `remoteEntry.js?v=${Date.now()}`,
})
);
const RecommendJobsContainer = React.lazy(() =>
importRemote({
**url: process.env.REACT_APP_MICROAPP_JOB!,**
scope: "job",
module: "fragment-recommend-jobs",
remoteEntryFileName: `remoteEntry.js?v=${Date.now()}`,
})
);
useEffect(() => {
(async () => {
try {
const token = await auth0Client.getTokenSilently();
const posts = await getPosts(token);
setPosts(posts);
} catch (error) {
alert(error);
}
})();
}, [auth0Client]);
const deletePostById = async (id: number) => {
try {
const token = await auth0Client.getTokenSilently();
await removePost(token, id);
const posts = await getPosts(token);
setPosts(posts);
} catch (error) {
alert(error);
}
};
const writePost = async (message: string) => {
try {
const token = await auth0Client.getTokenSilently();
await createPost(token, { message });
const posts = await getPosts(token);
setPosts(posts);
} catch (error) {
alert(error);
}
};
return (
<div className="posting--page-home">
<div className="posting--page-home-left">
<Profile />
</div>
<div className="posting--page-home-center">
<WritePost writePost={writePost} />
{posts.map((post) => (
<Post key={post.id} {...post} deletePostById={deletePostById} />
))}
</div>
<div className="posting--page-home-right">
<ErrorBoundary fallback={<div>Error</div>}>
<Suspense fallback={<div>Loading...</div>}>
<RecommendConnectionsContainer />
</Suspense>
</ErrorBoundary>
<ErrorBoundary fallback={<div>Error</div>}>
<Suspense fallback={<div>Loading...</div>}>
<RecommendJobsContainer />
</Suspense>
</ErrorBoundary>
</div>
</div>
);
};
export default PageHome;