#React + Rspack + Nx

1nvm use 20

#Setup

#1. Create an Nx workspace

Run below commands:

1npx [email protected] my-workspace

And select from these options:

1? Which stack do you want to use? None. 
2? Package-based monorepo, integrated monorepo, or standalone project? Integrated Monorepo. 
3? Which CI provider would you like to use? skip 
4? Would you like remote caching to make your build faster? No

#2. Add hosts and remote

In your terminal, run:

1npx nx add @nx/react
2npx nx g @nx/react:host host --remotes=remote1,remote2 --bundler=rspack --directory=apps/host

In the terminal select from below answers:

1? Which stylesheet format would you like to use? - css 
2? Which E2E test runner would you like to use? - cypress 
3? What should be the project name and where should it be generated? 
4❯ As provided:
5    Name: host
6    Root: apps/host

Your Nx application's initial setup is complete! If you run:

1npx nx run-many -t build --parallel=1 --skip-nx-cache --verbose -p host remote1 remote2
2# Or alternatively only serve host 
3npx nx run host:serve

You can see your application in the browser.

#3. Naming each components

To understand why these configuration are necessary - Read the complete checklist to deploy Micro-Frontend with Zephyr.

Open the new directory in your selected editor and add package.json as a structure below:

1- apps 
2-- host 
3--- package.json 
4-- remote1 
5--- package.json 
6-- remote2 
7--- package.json

In host's package.json, add below field (minimal example):

1{
2  "name": "host",
3  "version": "0.0.0"
4}

In remote1's package.json, add below field:

1{
2  "name": "remote1",
3  "version": "0.0.0"
4}

In remote2's package.json, add below field:

1{
2  "name": "remote2",
3  "version": "0.0.0"
4}

#4. Create your first commit

#5. Adding configuration for Zephyr

#6. Rollback to previous version

The first option in the dropdown menu under Version is the latest deployment of your app. In the dropdown menu you will see more previous version of your app.

But if you want to rollback to the previous version of your deployed application, you can click on one of the options and that version will show up in the browser, once you confirm that you want to push it to production you can click on Publish updates at the bottom of the side panel.

#6. Chrome Extension

You can check the application you just deployed in our chrome extension.

Head to Chrome Web Store to install our chrome extension - Zephyr Mission Control. Click on Add to Chrome and confirm with Add extension. After you finish remember to pin the extension by clicking on on extension management tab to provide you a quicker access to Zephyr's side panel.

Once you click on the Chrome Extension, a login page will pop up and prompt you to log in (if you are using Microsoft Edge you will need to click on Open Side Panel).

1rm rf ~/.zephyr

Now you have created an account and the side panel is empty - hold up! We will get into how to use our dashboard in a bit. Let's deploy an app through Zephyr so you can see a live example of how to use our side panel.

#7. Dashboard

If you want to see all your projects and their versions, sign in on dashboard and you will see all your projects and their dependencies.

A more detailed explaination on how to use our dashboard is coming soon.