Effortless Web Application development on Avnet Embedded SMARC Modules Using SimpleSwitch and VS Code

In this epsiode, we’ll delve into the process of deploying and debugging web applications directly on i.MX8M Plus SMARC modules using SimpleSwitch and VS Code. This streamlined approach facilitates the seamless testing and refinement of HMIs on embedded devices.

Embedded Software Sessions

Embedded Software Sessions
Learn More

Prerequisites:

  1. i.MX8M Plus SMARC module with SimpleSwitch installed
  2. RDP client for remote desktop access
  3. VS Code with SimpleSwitch plug-in

Deploying a Static Website:

  1. Open VS Code and connect to the board using SimpleSwitch plug-in
  2. Create a new project using the “Browser Template”
  3. Copy the static website files into the project directory
  4. Package the project using SimpleSwitch
  5. Deploy the packaged project to the module

Accessing and Debugging the Website:

  1. Connect to the board using an RDP client
  2. Open the browser application on the remote desktop
  3. Access the website URL
  4. To debug the website, press F5 in VS Code

Deploying a Complex Website with Vue.js:

  1. Clone the “Tractor web” example project from Avnet Embedded GitHub
  2. Build the project using NPM build command
  3. Replace the demo static website with the generated files
  4. Package and deploy the project to the board

Conclusion:

SimpleSwitch proves to be a valuable tool for effortlessly deploying and debugging web applications on compatible SMARC modules. This approach not only streamlines the testing process but also enhances productivity by reducing the time required to iterate and refine HMIs. Additionally, the use of COG, a lightweight web browser optimized for embedded devices, ensures smooth performance and minimal impact on the device’s resources.