Development Guide

Last Updated on : 2023-09-06 02:57:10download

This chapter describes the structure, necessary files, and parameters of a microapp project. The core directory structure of a microapp consists of _locales, manifest.json, micro.config.js, mock, and src. After the general frontend project directory is removed, the following structure describes the directories of core files:

├── _locales // Multilingual UI text for microapp description, corresponding to "lang.{key}" in the manifest.json file.
├── manifest.json // Description and core configuration file of the microapp.
├── micro.config.js // The configuration file of Webpack and webpack-dev-server as well as the data for debugging.
├── mock // Files for the Mock feature.
├── src // Content development of the microapp.
│   ├── App.css
│   ├── App.tsx // The homepage component of the project.
│   ├── index.css
│   ├── index.tsx // The entry file of the project.
│   ├── api // Functions to make API requests.
│   ├── assets // Assets such as images and fonts.
│   ├── components // Development components.
│   ├── lang // The multilingual UI text to run the microapp.
│   ├── pages // The page components.
│   ├── public-path.js // Injects global variables.
│   └── styles // Configuration files for theme colors. You can toggle between the dark mode and light mode.
│   ...
│   ..
│   .
  • _locals and src/lang contain multilingual UI text, and their specific purpose differs as follows:

    • Multilingual text in _locals is not used when the microapp is running, but only supplements multilingual information to describe the microapp.

    • Multilingual text in src/lang is used when the microapp is running.

  • Default page src/App.tsx:

    After a project is created, it contains only one page by default, that is src/App.tsx. We recommend you aggregate the functionalities of the microapp on the same page. Currently, the multi-page development capability is unavailable.