Development
Development Guide
Use Git, Yarn, and Node.js 18 for development, matching web/.nvmrc. Check web/package.json and .nvmrc when switching branches. Familiarity with Vue.js, MQTT, and TypeScript is recommended.
For contributions, fork the repository first and use your fork’s URL in the clone command. If you use nvm, run nvm use as shown below; otherwise, select the required Node.js version with your version manager.
# Clone the repository
git clone https://github.com/emqx/MQTTX.git
cd MQTTX/web
nvm use
yarn install
# Compile and hot reload for development
yarn run serve
# Compile and compress to build a production version
yarn run build
# Compiles for production & serve generated files of site locally
yarn run start
# Compiles and prepares for Docker containerization
yarn run build:docker
# Build Docker image
docker build -t mqttx-web .
# Run Docker image
docker run -p 80:80 mqttx-web
After a successful build, the corresponding files of the successful build will appear in the dist directory.
Modify Configuration
If you need to make personalized settings, such as modifying the default connection path, deployment path, or output path, you can make the corresponding modifications in the web/.env or web/.env.docker files. These two files correspond to different packaging requirements, and you can choose to modify them according to your actual situation.
| Configuration Item | Description |
|---|---|
| VUE_APP_PAGE_TITLE | The title is displayed in the browser's title bar |
| VUE_APP_PAGE_DESCRIPTION | A brief page description for SEO purposes |
| VUE_APP_DEFAULT_HOST | The default address of the MQTT broker server connections |
| BASE_URL | The root URL where the application is deployed. Useful for constructing links and routing |
| VUE_APP_OUTPUT_DIR | The directory where the build files will be placed after compilation |
Contributing
Please make sure to read the Contributing Guide before making a pull request.