Skip to main content

Local Development Mode

Local Development Mode allows you to use your preferred local IDE (e.g., vscode) to edit the code of WeDa applications. The local code is synchronized in real-time to the browser side, enabling you to preview your changes in real-time using the WeDa editor.

Of course, configuration or code modifications on the browser side are also synchronized in real-time to local files. Therefore, it is recommended to develop the application interface on the browser side, enabling you to leverage the WeDa editor's efficient drag-and-drop interface development functionality.

Usage​

  1. Click the "Local Development" menu, select "Enable", and click "OK".

Note:

  1. Please do not forget to click the [OK] button in the bottom-right corner of the pop-up.
  2. Please carefully read the steps and install the tcb command-line tool in advance

  1. Start the local command-line tool

Please ensure the tcb version is >= 2.1.0. It is recommended to update to the latest version.
If tcb prompts that you are not logged in or authorized, please run tcb login to complete Tencent Cloud login authorization.

$ tcb lowcode watch
  1. Open the application's local code directory using your local IDE and make modifications

You can locate the code directory path through the command line logs

Local modifications are synchronized to the browser side in real time, and modifications on the browser side are also synchronized to the local environment in real time.

By default, the local directory is located in $HOME/.weda-workspaces/{evnId}, which contains locally editable content within the environment.

If you wish to customize the local path, you can specify the local project path using tcb lowcode watch --path xxxx.

Code Conflict Resolution​

Code conflicts occur during the code merging phase (when multiple parties modify the same code file).

For example, without running tcb lowcode watch, you modified the global lifecycle code both on the browser side and the local side. Assume the following:

// Browser Side
...
  onAppLaunch(launchOpts) {
    console.log('>>>>>>>>>>>> [browser] LifeCycle onAppLaunch.', launchOpts)
  },
...
// Local Side
...
  onAppLaunch(launchOpts) {
    console.log('>>>>>>>>>>>> [local] LifeCycle onAppLaunch.', launchOpts)
  },
...

When you run tcb lowcode watch with local development mode enabled, the CLI tool first attempts to merge the code from the browser side and the local side. If conflicts occur, it will prompt you as shown in the figure:

At this point, you can perform three operations:

1. Resolve Manually

You can view the conflicting files in the command line output logs, as shown in the figure below

Then directly open the file to resolve conflicts. The figure below shows an example of opening a conflicting file in vscode:

After all conflicts are resolved, the merge conflict reminder popup will automatically disappear.

2. Auto Resolve - Prioritize Browser Side Code

Auto-resolving conflicts in this way will prioritize the browser-side code.

In the above example, the result after auto-resolving conflicts is:

...
  onAppLaunch(launchOpts) {
    console.log('>>>>>>>>>>>> [browser] LifeCycle onAppLaunch.', launchOpts)
  },
...

3. Auto Resolve - Prioritize Local Code

Auto-resolving conflicts in this way will prioritize the local code.

In the above example, the result after auto-resolving conflicts is:

...
  onAppLaunch(launchOpts) {
    console.log('>>>>>>>>>>>> [local] LifeCycle onAppLaunch.', launchOpts)
  },
...

Local Environment Development Preview​

Locally developed code projects support offline development preview.

That is, you can start the development service in your local code project without opening the WeDa Editor in the browser, and modify local code for development and debugging.

Note:

  1. Existing application code needs to be resynchronized once using the latest online WeDa Editor.
  2. Please ensure the tcb version is >= 2.3.11. It is recommended to update to the latest version.

H5 Local Development Preview​

$ cd <path-to-your-local-app-dir>
$ npm run preview:web # or yarn preview:web

Mini Program Local Development Preview​

$ cd <path-to-your-local-app-dir>
$ npm run preview:mp # or yarn preview:mp