rust-vue-demo
This project demonstrates the integration of npm/vue into a rust axum web-service. The web-service is self-contained, embedding the webui assets into the binary. The webui creates a websocket being used by the web-service to send data to the webui once per second.
The Vue web framework does not require any template rendering during runtime in the web-service, in contrast to web frameworks such as bootstrap, etc. Vue is based on static HTML/CSS/JS files, being delivered to web-browser as is. Costly DOM tree manipulation is handled by the web-browser.
Avoiding template engines in the web-service (template engines are performing runtime code generation), instead the Vue application and components represent a fixed code snapshot whose state transitions can be tested in the release-process.
Requirements
- npm/nodes toolchain must be available
- rust toolchain must be available
Features
- Vue project code is located in folder
webui/
- The
cargo build
will trigger the vue npm build process ('npm_rs'), the resulting HTML code will be placed inwebui/dist/
- The vue JavaScript assets of
webui/dist/
will be embedded into the Rust code (rust_embed
) - No costly template rendering of web framework within web-service; all asset files are sent to web-brwoser as is. Costly template subsitution is performed during npm compile time and DOM tree manipulation is performed by web-browser.
- No runtime code generation (no template engines), instead using Vue components, achieving testability of frontend code.
- The compact executable will be created from Rust code
- The binary will provide a web-service listening at port 3000 (
axum
) - When connecting with web-browser to service port, eg http://127.0.0.1:3000, a websocket will be established
- The web-service will use the websocket to send data to the webui, cycling once per second.
- The webui provides a button to send data to the webservice.
- If files are modified in
src/
orwebui/src/
the commandcargo build
will update the binary (build.rs
)
Usage
Download the project folder from https://github.com/frehberg/rust-vue-demo
git clone https://github.com/frehberg/rust-vue-demo
Initialize the npm dependencies of the webui frontend
cd rust-vue-demo/webui; npm install
Build the project
cd rust-vue-demo/
cargo build
Set up the vcan0 device
sudo modprobe vcan
sudo ip link add vcan0 type vcan
sudo ip link set vcan0 up
Start the web-service
cd rust-vue-demo/
CANDEV="vcan0" cargo run
Start the CAN bus dump tool
candump vcan0
Connect with web-browser to http://127.0.0.1:3000
The Web-page will open in browser and will establish a websocket connection to ws://127.0.0.1:3000/ws. This websocket is used to send data updates between webui and web-service.
Developing the Vue Web Frontend
Generate the assets from Vue templates
cd rust-vue-demo/webui
npm install; npm run build
Start the web-service locally listening at port 8080
cd rust-vue-demo/webui
npm run serve
Connect with web-browser to http://localhost:8080
Any time the files in folder rust-vue-demo/webui/src/
are modified, the npm-build-process will be triggered and the browser will perform a reload.