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.

Prerequisites:

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

Deploying a Static Website:

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

Accessing and Debugging the Website:

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

Deploying a Complex Website with Vue.js:

Clone the “Tractor web” example project from Avnet Embedded GitHub
Build the project using NPM build command
Replace the demo static website with the generated files
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.