This is an example microfrontend repo demonstrating how to use single-spa. You can see the code running at https://vue.microfrontends.app.

Full article

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://vue.microfrontends.app/importmap.json.

This project uses Vue 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.

Full documentation

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 root-config
yarn install
yarn start --https

Go to https://localhost:9000/vue-mf-root-config.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://vue.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 9000.

Refresh the page. Your local code for this module will now be running on https://vue.microfrontends.app. You may make changes locally and refresh the page to see them.

Run the root-config project locally:

cd root-config
yarn install
yarn 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.

• Video: Deploying Microfrontends Part 1 - Import Map Deployer
• Video: Deploying Microfrontends Part 2 - CI for in-browser modules

Setup a CircleCI context with the following variables configured

• BUCKET_NAME
• CF_PUBLIC_URL
• DEPLOYER_ENV
• DEPLOYER_HOST
• DEPLOYER_PASSWORD
• DEPLOYER_USERNAME
• GOOGLE_APPLICATION_CREDENTIALS_JSON

To deploy new releases of micro frontends, you will need to use import-map-deployer On GCP, you can use either:

• Cloud Run (managed service)
• Kubernetes cluster

Go to Cloud Run and follow instructions to deploy an image.

Create a new cluster

Set Nodes count to ` (don't set auto-scaling!)

Grant access to write to Storage (similar to S3 bucket)

You need to give the cluster either Read and Write or Full access to Storage

Create the cluster

Select Create bucket

Name bucket

Select Region

Grant Uniform access

Click Create

• Install docker
• Install minikube

$ minikube status
$ minikube start
🎉  minikube 1.7.3 is available! Download it: https://github.com/kubernetes/minikube/releases/tag/v1.7.3
💡  To disable this notice, run: 'minikube config set WantUpdateNotification false'

🙄  minikube v1.7.2 on Darwin 10.15.3
✨  Using the hyperkit driver based on existing profile
⌛  Reconfiguring existing host ...
🔄  Starting existing hyperkit VM for "minikube" ...
🐳  Preparing Kubernetes v1.17.2 on Docker 19.03.5 ...
🚀  Launching Kubernetes ... 
🌟  Enabling addons: default-storageclass, storage-provisioner
🏄  Done! kubectl is now configured to use "minikube"

Also install gcloud the Google Cloud CLI

Alternatively use the Google Cloud shell from the browser

Interactive gcloud download

Run $ gcloud components update to get latest gcloud updates

import-map-deployer is available on DockerHub as singlespa/import-map-deployer

To push any local image to Container Registry, you need to first tag it with the registry name and then push the image

You can specify a container image with a tag (ie. gcr.io/my-project/my-image:latest)

Choose a hostname, which specifies location where you will store the image:

• us.gcr.io hosts image in data centers in the United States
• eu.gcr.io hosts the images in the European Union
• asia.gcr.io hosts images in data centers in Asia

Combine the hostname, your Google Cloud Console project ID, and image name:

[HOSTNAME]/[PROJECT-ID]/[IMAGE]

Configure gcloud for docker

$ gcloud auth configure-docker
After update, the following will be written to your Docker config file
 located at /Users/[username]/.docker/config.json:
 {
  "credHelpers": {
    "gcr.io": "gcloud",
    "marketplace.gcr.io": "gcloud",
    "eu.gcr.io": "gcloud",
    "us.gcr.io": "gcloud",
    "staging-k8s.gcr.io": "gcloud",
    "asia.gcr.io": "gcloud"
  }
}

Now clone the import-map-deployer repo

$ git clone [email protected]:single-spa/import-map-deployer.git

Build the docker image

$ docker build .
# ...
Successfully built 5047af9771ae

Tag it correctly according to the Google Cloud specification

$ docker tag 5047af9771ae us.gcr.io/micro-frontend-app/importmap-deployer:dev

Push the tagged image to Google Cloud

$ docker push us.gcr.io/micro-frontend-app/importmap-deployer:dev
The push refers to repository [us.gcr.io/micro-frontend-app/importmap-deployer:dev]
320b46caf779: Pushed
acbc324f81b2: Pushed
d32c38cd5689: Pushed
3fc64803ca2d: Layer already exists
latest: digest: sha256:ae8fa7dd5aecfe7c6c565b1d3453e665e4300140a6f8ae9f8c99163311f5123d size: 1162

Go to GCP clusters. See cluster details. Click Deploy button in action bar

On the Create Deployment select New container image and click Select to select it

Select the image to deploy by clicking down arrow on image tag name

Then select the image version to deploy

The selected image should now be displayed

Click Done and Continue to enter the Configuration

Enter an application name, then scroll to the bottom and click Deploy

In case you get deployment errors...

Deployment Error

Deployment Details

Mac OS Troubleshoot: Can't connect to Docker daemon

Make sure the docker whale icon is visible in the top status bar. If not, go to Applications and activate the Docker app whale icon to start Docker.