This is an example microfrontend repo demonstrating how to use single-spa. You can see the code running at https://react.microfrontends.app.
This repository is a javascript project that creates a javascript bundle that is an in-browser javascript module (explanation on youtube / bilibili). The currently deployed version of the in-browser module can be seen at https://react.microfrontends.app/importmap.json.
This project uses React and was created with the create-single-spa CLI. It uses webpack and babel.
Whenever a pull request is merged to master, CircleCI builds and deploys the project. The "workflows" view (pictured below) can be seen if you are logged into CircleCI. Deployments for this in-browser module are completely independent of deployments for any other module.
Tutorial video: youtube / bilibili
There are two ways to do local development. It is preferred to do one module at a time, whenever possible.
cd navbar
pnpm install
pnpm start -- --https --port 9001Note that you may use whichever port you would like to. Go to https://localhost:9001/react-mf-navbar.js and verify that you are able to load the file without any SSL problems. To solve SSL problems, see these instructions.
Now, go to https://react.microfrontends.app. In the browser console, run the following:
localStorage.setItem("devtools", true);Refresh the page. Click on the tan / beige rectangle:
Set an import map override to 9001.
Refresh the page. Your local code for this module will now be running on https://react.microfrontends.app. You may make changes locally and refresh the page to see them.
Run the root-config project locally:
cd root-config
pnpm install
pnpm start
Now follow the steps above for "One module at a time" for each of the modules you wish to work on.
Feel free to fork and modify any files you would like when doing a proof of concept for your organization. When it's time to actually create / adapt your organization's projects, consider using create-single-spa instead of forking this repository.
