Qiankun is a powerful framework for building micro-frontends, which allows you to write independently deployed applications that work seamlessly together. In this blog post, we’ll walk you through the process of setting up a micro-frontend project using Qiankun with both React and Vue applications.

Getting Started

Before you begin, ensure that you have Node.js and npm (or Yarn) installed on your machine. Here’s a step-by-step guide to set everything up for both React and Vue applications.

Step 1: Setting Up Your Main Application

Your main application will serve as the host for the micro-frontends.

• For a React application, create a new app using the create-react-app command:

npx create-react-app main_react

• Then, navigate into the project directory and install Qiankun:

yarn add qiankun

npm i qiankun -S

• In the `src/App.js` file, you will integrate Qiankun.

Step 2: Setting Up Your Micro-Frontend Applications

You can create two micro-frontend applications: one for React and one for Vue.

For React:

• Create a new React app:

npx create-react-app react_eject

• Navigate into the project and configure it to work with Qiankun:

react-app-rewired npm install react-app-rewired --save-dev

• Modify your `package.json` scripts to use react-app-rewired:

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
}

• Configure `config-overrides.js` for your React app.

For Vue:

• Create your Vue app using vue-cli:

vue-cli create main_vue

• Navigate to your Vue app directory and install Qiankun:

yarn add qiankun

npm i qiankun -S

• Integrate Qiankun in `src/main.js`.

Understanding the Code Structure: An Analogy

Think of your main application as a theater that hosts various performances (micro-frontends) that can be either plays (React) or concerts (Vue). The Qiankun framework acts like a stage manager that ensures everything runs smoothly.

When a new play (micro-frontend) is introduced, it comes with its set of scripts (application code) and props (dependencies). Qiankun assures all these elements can coexist without interference while also ensuring that the audience (user) has a seamless experience.

Troubleshooting Your Setup

If you run into issues during integration, here are some troubleshooting tips to help you out:

• Ensure that all dependencies for both React and Vue applications are installed correctly. You might need to run npm install or yarn install in each project directory.
• Check for any naming conflicts in the `package.json` files of your micro-frontends. Make sure the names are unique and correctly referenced.
• If you encounter problems with loading the micro-frontends, examine the configuration settings in files like webpack.config.js and webpackDevServer.config.js.
• Be mindful of CORS headers if your micro-frontends are hosted on different domains. The headers need to allow cross-origin requests.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

With Qiankun, setting up micro-frontends becomes an organized process that allows your applications to grow independently while working in harmony. At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.