이어서 할 곳

GitHub - fc-micro-frontends/career-up at step13

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

job 워크스페이스 생성

➜ cd apps

➜ pnpm create mf-app
? Pick the name of your app: job
? Project Type: Application
? Port number: 3004
? Framework: react
? Language: typescript
? CSS: CSS

➜ cd ..

➜ code .

// career-up/career-up.code-workspace

{
  "folders": [
    {
      "name": "shell",
      "path": "apps/shell"
    },
    {
      "name": "posting",
      "path": "apps/posting"
    },
    {
      "name": "edu",
      "path": "apps/edu"
    },
    {
      "name": "network",
      "path": "apps/network"
    },
    **{
      "name": "job",
      "path": "apps/job"
    },**
    {
      "name": "shell-router",
      "path": "packages/shell-router"
    },
    {
      "name": "ui-kit",
      "path": "packages/ui-kit"
    },
    {
      "name": "server",
      "path": "server"
    },
    {
      "name": "monorepo",
      "path": "."
    }
  ],
  "settings": {
    "typescript.tsdk": "monorepo/node_modules/typescript/lib"
  }
}

{
  **"name": "@career-up/job",**
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "build:start": "cd dist && PORT=3004 npx serve",
    "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",**
    "autoprefixer": "^10.1.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.3.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": {
    **"@career-up/shell-router": "workspace:*",
    "@career-up/ui-kit": "workspace:*",**
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

➜ pnpm i

➜ pnpm --filter @career-up/job add react-router-dom @auth0/auth0-spa-js @babel/runtime

➜ pnpm --filter @career-up/job add dotenv-webpack @types/node eslint eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

// career-up/apps/job/.eslintrc.js

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
  ],
  ignorePatterns: ["dist", ".eslintrc.js", "webpack.config.js"],
  parser: "@typescript-eslint/parser",
};

// career-up/apps/job/webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
**const Dotenv = require("dotenv-webpack");**

const deps = require("./package.json").dependencies;
module.exports = (_, argv) => ({
  output: {
    publicPath: "<http://localhost:3004/>",
  },
  resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
  },
  devServer: {
    port: 3004,
    historyApiFallback: true,
  },
  module: {
    rules: [
      {
        test: /\\.m?js/,
        type: "javascript/auto",
        resolve: {
          fullySpecified: false,
        },
      },
      {
        test: /\\.(css|s[ac]ss)$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  plugins: [
    **new Dotenv({
      path: "../../.env",
    }),**
    new ModuleFederationPlugin({
      name: "job",
      filename: "remoteEntry.js",
      remotes: {},
      exposes: {
        **"./injector": "./src/injector.tsx",**
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
        **"@career-up/shell-router": {
          singleton: true,
        },
        "@career-up/ui-kit": {
          singleton: true,
        },**
      },
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
  ],
});

// career-up/apps/job/src/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>job</title>
</head>

<body>
  **<div id="app-job"></div>**
</body>

</html>

// career-up/apps/job/src/index.ts

import("./bootstrap");

// career-up/apps/job/src/bootstrap.tsx

import inject from "./injector";

inject({
  routerType: "browser",
  rootElement: document.getElementById("app-job")!,
});

// career-up/apps/job/src/injector.tsx

import { injectFactory } from "@career-up/shell-router";
import { routes } from "./routes";

const inject = injectFactory({
  routes,
});

export default inject;

// career-up/apps/job/src/routes.tsx

import React from "react";
import { type RouteObject } from "react-router-dom";
import { AppRoutingManager } from "@career-up/shell-router";
import Auth0ClientProvider from "./providers/auth0-client-provider";

export const routes: RouteObject[] = [
  {
    path: "/",
    element: (
      <Auth0ClientProvider>
        <AppRoutingManager type="app-job" />
      </Auth0ClientProvider>
    ),
    errorElement: <div>App Job Error</div>,
    children: [
      {
        index: true,
        element: <div>job home</div>,
      },
    ],
  },
];

// career-up/apps/job/src/providers/auth0-client-provider.tsx

import React from "react";
import { Auth0Client } from "@auth0/auth0-spa-js";

export const Auth0ClientContext = React.createContext<Auth0Client | null>(null);

const Auth0ClientProvider: React.FC<React.PropsWithChildren> = ({
  children,
}) => {
  const domain = process.env.REACT_APP_AUTH0_DOMAIN!;
  const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID!;
  const redirectUri = process.env.REACT_APP_AUTH0_CALLBACK_URL!;

  const auth0Client = new Auth0Client({
    domain,
    clientId,
    authorizationParams: {
      redirect_uri: redirectUri,
    },
  });

  return (
    <Auth0ClientContext.Provider value={auth0Client}>
      {children}
    </Auth0ClientContext.Provider>
  );
};

export default Auth0ClientProvider;

// career-up/apps/job/src/hooks/use-auth0-client.ts

import { useContext } from "react";
import { Auth0ClientContext } from "../providers/auth0-client-provider";

export default function useAuth0Client() {
  const auth0Client = useContext(Auth0ClientContext);

  if (auth0Client === null) {
    throw new Error("useAuth0Client must be used within Auth0ClientProvider");
  }

  return auth0Client;
}

// career-up/apps/shell/webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const Dotenv = require("dotenv-webpack");

const deps = require("./package.json").dependencies;
module.exports = (_, argv) => ({
  output: {
    publicPath: "<http://localhost:3000/>",
  },

  resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
  },

  devServer: {
    port: 3000,
    historyApiFallback: true,
  },

  module: {
    rules: [
      {
        test: /\\.m?js/,
        type: "javascript/auto",
        resolve: {
          fullySpecified: false,
        },
      },
      {
        test: /\\.(css|s[ac]ss)$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },

  plugins: [
    new Dotenv({
      path: "../../.env",
    }),
    new ModuleFederationPlugin({
      name: "shell",
      filename: "remoteEntry.js",
      remotes: {
        posting: "posting@<http://localhost:3001/remoteEntry.js>",
        edu: "edu@<http://localhost:3002/remoteEntry.js>",
        netework: "network@<http://localhost:3003/remoteEntry.js>",
        **job: "job@<http://localhost:3004/remoteEntry.js>",**
      },
      exposes: {},
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
        "@career-up/shell-router": {
          singleton: true,
        },
        "@career-up/ui-kit": {
          singleton: true,
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
  ],
});

➜ pnpm dev