Skip to content

Latest commit

 

History

History
105 lines (76 loc) · 3.74 KB

README.md

File metadata and controls

105 lines (76 loc) · 3.74 KB
Raw

MicroFontEnd Monorepo Demo - 基于 Gatsby Theme + Yarn workspace

Branches using router of 'react-router-dom' v6 are just for demo and the 'cra-app' SPA can not be used independently. This is different to the branches using old 'reach router', which is not compatible with the new 'react-router-dom' v6.

Here are 2 branches:

  1. main-clientonlyroutes-reactrouterv6-with-full-redux-usage: can login under the mode of gatsby develop, by using the backend from react-redux-user-auth repo(mongodb used); Usage of 'process.env.NODE_ENV' is ignored for this simple demo -> ok for gatsby build with added condition of type of window.
  2. main-clientonlyroutes-reactrouterv6: no real backend used and the redux toolkit used partially, demo works under the mode of gatsby build, as the login/localstorage/state etc are not really used.

参考官网的几个 demo,然后整合

  1. default starter: as default landing page https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-default

  2. theme workspace starter: example as /example, gatsby-theme-minimal is empty. https://github.com/gatsbyjs/gatsby-starter-theme-workspace

  3. CRA demo: exported App React component to be imported into Gatsby page. old CRA doc -> demo of redux for user auth, change the server port to 5001 on Mac.

  4. 调整整合到统一的 theme workspace 下.

RUN IT

yarn workspace gatsby-starter-default develop

CHECK IT

http://localhost:8000/page-2a/

Gatsby

Starter for creating a Gatsby Theme workspace 

gatsby new my-theme https://github.com/gatsbyjs/gatsby-starter-theme-workspace
cd my-theme
yarn workspace example develop

Layout

.
├── README.md
├── gatsby-theme-minimal
│   ├── README.md
│   ├── gatsby-config.js
│   ├── index.js
│   └── package.json
├── example
│   ├── README.md
│   ├── gatsby-config.js
│   ├── package.json
│   └── src
├── package.json
└── yarn.lock

3 directories, 10 files

gatsby-theme-minimal

This directory is the theme package itself. You should rename this at some point to be gatsby-theme-{my-theme-name}. Also change the package.json name field and the corresponding dependency in the example directory's package.json/gatsby-config.js to match the chosen name.

  • gatsby-theme-minimal/
    • gatsby-config.js: An empty gatsby-config that you can use as a starting point for building functionality into your theme.
    • index.js: Since themes also function as plugins, this is an empty file that gatsby needs to use this theme as a plugin.
    • package.json: The dependencies that your theme will pull in when people install it. gatsby should be a peerDependency.

example

This is an example usage of your theme. It should look the same as the site of someone who installed and used your theme from npm.

  • example/
    • gatsby-config.js: Specifies which theme to use and any other one-off config a site might need.
    • src/: Source code such as one-off pages or components that might live in a user's site.

You can run the example with:

yarn workspace example develop

🚀 Quick start (Gatsby Cloud)

Deploy this starter with one click on Gatsby Cloud:

Deploy to Gatsby Cloud