Directory Structure

Before you get started with microapp development, you must learn about the directory structure of a microapp project. After the general front-end project directory is removed, the following structure describes the directories of core files.

Project directory structure

.
├── _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.
│   ...
│   ..
│   .