Skip to main content

Build a micro app

Before you begin

This tutorial provides an overview of the application development process, helping developers get started quickly and develop application with ideal functionality.

This tutorial will demonstrate the necessary processes and steps for development by implementing a table page.

Before you begin, make sure you have the following environment installed locally:

  • Node.js>=16.14.0
  • yarn
  • docker(for local debugging)

Step 1: Create app

  1. install/update @giteeteam/apps-cli
npm install -g @giteeteam/apps-cli
npm update -g @giteeteam/apps-cli
  1. Use the cli to initialize the application.
giteeteam-apps init
  1. Enter the app name and unique app_key as instructed.

  2. The creation is complete, and the main directory structure is as follows:

apps_demo:
.
├── README.md
├── functions
├── manifest.yml
├── public
├── src
├── tsconfig.json
├── typings.d.ts
├── webpack.config.js
├── package.json
└── yarn.lock

Step 2: Application Development

1. manifest.yml

  • The manifest describes the configuration information of the app and also serves as the navigation for various functional modules. See manifest for details.
    • app: defines the basic information of the app and defines the app version.
    • modules: defines the functions that contain the application logic and the different modules used by the application.
      • adminPage: Add a menu item at the bottom of the system settings sidebar, which, when clicked, takes you to the developed application page. See Admin Page for details.
        • key: The unique ID of the page
        • resource: Specifies the packaged file for the page
        • title: The menu name that links to the page after it is published
        • loadType: The rendering method for the application
    • resource: The resource files used by the page
app:
name: appsDemo
key: appsDemo
version: '0.0.1'
modules:
adminPage:
- key: micro-adminPage
resource: myPage
title: myPage
loadType: Micro
resources:
- key: myPage
path: ./dist/

2. Function Development

  1. Edit the Demo.tsx file and import the required components for table development.
── src
│ ├── App.tsx
│ ├── hooks
│ ├── index.global.less
│ ├── index.tsx
│ ├── lib
│ ├── pages
│ ├── routes
│ └── statics
./src/pages/Demo.tsx
import React from 'react';
import { Table } from 'antd';
import cx from './Demo.less';

const Demo: React.FC = () => {
const columns = [
{
title: 'id',
dataIndex: 'id',
key: 'id',
width: '40%',
ellipsis: true,
},
{
title: 'Operation',
dataIndex: 'operation',
key: 'operation',
width: '40%',
ellipsis: true,
},
];

return (
<div>
<h2 className={cx('title')}>Item Operation Logs</h2>
<a></a>
<Table
rowKey="ID"
columns={columns}
dataSource={[
{ id: '1', operation: 'created' },
{ id: '2', operation: 'deleted' },
]}
/>
</div>
);
};

export default Demo;
tip

The relevant components need to use the encapsulated antd components. For other components, see Custom UI.

Step 3: Package and publish to the online development environment

1. Log in to the debugging environment

Use the login command (for detailed parameters, please refer to Login) to log in to the debugging environment.

giteeteam-apps login

2. Build app

Build app and the output is *.zip

yarn build-app

The build-app command is already defined in package.json.

3. Publish the application to the online development environment

Deploy the application package built in the previous step.(please refer to: Deploy)

giteeteam-apps deploy xxx.zip

4. Subscribe the app for the tenant in the Developer Center

http://demo.com/apps/page/application/developer

developer_page

developer_subscription

Step 4: Local debugging

  1. Use the command to start the front-end project locally.
yarn dev

The dev command is already defined in package.json.

  1. Use the tunnel command (for detailed parameters, please refer to Tunnel) to start local debugging.
giteeteam-apps tunnel
  1. Local page debugging

Log in to the debugging environment, add APPS_ENABLE_LOCAL_DEV=true to LocalStorage, and go to the corresponding extension point page to start debugging.

fontend_debug

Step 5: Online deployment

  1. Open the application center.

apps_market

  1. Create an application and upload the application zip file.

upload_app

  1. Click "Subscribe".

subscribe_app

  1. Enter the system settings, and you can see the page of this application appear in the left system menu bar.

admin_page