Demo Rust / VueJS+element-plus

Overview

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 in webui/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/ or webui/src/ the command cargo 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.

You might also like...
A lightning fast version of tmux-fingers written in Rust, copy/pasting tmux like vimium/vimperator
A lightning fast version of tmux-fingers written in Rust, copy/pasting tmux like vimium/vimperator

tmux-thumbs A lightning fast version of tmux-fingers written in Rust for copy pasting with vimium/vimperator like hints. Usage Press ( prefix + Space

A command-line tool collection to assist development written in RUST

dtool dtool is a command-line tool collection to assist development Table of Contents Description Usage Tips Installation Description Now dtool suppor

Rust mid-level IR Abstract Interpreter

MIRAI MIRAI is an abstract interpreter for the Rust compiler's mid-level intermediate representation (MIR). It is intended to become a widely used sta

Migrate C code to Rust
Migrate C code to Rust

C2Rust helps you migrate C99-compliant code to Rust. The translator (or transpiler) produces unsafe Rust code that closely mirrors the input C code. T

C to Rust translator

Corrode: Automatic semantics-preserving translation from C to Rust This program reads a C source file and prints an equivalent module in Rust syntax.

Astronomical algorithms in Rust

astro-rust Contents API Docs About Usage Contributing References About astro-rust is a library of advanced astronomical algorithms for the Rust progra

A Rust library for calculating sun positions

sun A rust port of the JS library suncalc. Install Add the following to your Cargo.toml [dependencies] sun = "0.2" Usage pub fn main() { let unixti

Macro for Python-esque comprehensions in Rust

Cute Macro for Python-esque list comprehensions in Rust. The c! macro implements list and hashmap comprehensions similar to those found in Python, all

Language Integrated Query in Rust.

Linq in Rust Language Integrated Query in Rust (created by declarative macros). Inspired by LINQ in .NET. What's LINQ This project is under developmen

Owner
Frank Rehberger
Frank Rehberger
A mostly drop-in replacement for mercantile written w/ rust, plus several other util(e)ities.

utiles utiles = utils + tiles A mostly drop-in replacement for mercantile written w/ rust, plus several other util(e)ities. Installation pip install u

jesse 5 Jun 20, 2023
Demo Terraform Provider in Rust

terraform-provider-helloworld Welcome to a large pile of hacks masquerading as a PoC. This repository proves that it's possible to write a Terraform P

Tom Parker-Shemilt 25 Sep 15, 2022
Demo for Arduboy written in rust

arduboy-hello-rs Install Install Rust with rustup https://www.rust-lang.org/en-US/install.html Install Arduino IDE https://www.arduino.cc/en/Main/Soft

Itoh Shimon 21 Jul 21, 2022
An example app in Rust for CircleCI's Dynamic Config demo

circleci-dynamic-config-example An example app in Rust for CircleCI's dynamic config demo. Dynamic config allows you to dynamically generate CircleCI'

yujiosaka 2 Oct 6, 2022
This is a small demo to accompany the Tauri + Yew tutorial

Tauri + Yew Demo This is a small demo to accompany the Tauri + Yew tutorial

Steve Pryde 94 Jan 2, 2023
Demo provider, source code for the Provider tutorial.

Fiberplane "Catnip" (tutorial) provider This repository contains the final code of the provider built within the "Create a Provider" tutorial. It reli

Fiberplane 4 Feb 15, 2023
k-mer counter in Rust using the rust-bio and rayon crates

krust is a k-mer counter written in Rust and run from the command line that will output canonical k-mers and their frequency across the records in a f

null 14 Jan 7, 2023
Experimental Rust tool for generating FFI definitions allowing many other languages to call Rust code

Diplomat is an experimental Rust tool for generating FFI definitions allowing many other languages to call Rust code. With Diplomat, you can simply define Rust APIs to be exposed over FFI and get high-level C, C++, and JavaScript bindings automatically!

null 255 Dec 30, 2022
Aws-sdk-rust - AWS SDK for the Rust Programming Language

The AWS SDK for Rust This repo contains the new AWS SDK for Rust (the SDK) and its public roadmap. Please Note: The SDK is currently released as a dev

Amazon Web Services - Labs 2k Jan 3, 2023
Rust + Yew + Axum + Tauri, full-stack Rust development for Desktop apps.

rust-yew-axum-tauri-desktop template Rust + Yew + Axum + Tauri, full-stack Rust development for Desktop apps. Crates frontend: Yew frontend app for de

Jet Li 54 Dec 23, 2022