User:Flesh
Detail | Description |
---|---|
Name | Jeffrey Scott Flesher |
Role | ArchWiki:Contributing |
Education | PhD in Physics |
Website | Trinary Universe |
Languages | English, Basic, Bash, asm, Machine Code, C, C++, Rust, Java, JavaScript... |
Topic | Rust using Rocket and WebAssembly |
Computer Programming Background
- Computer Programmer since 1969
- Military: United States Air Force 1985 to 1999 Medically Retired Disabled Gulf War Vet
- Military Duties:
- (E)F-111 Computer Test Station Electronic Engineer & Computer Programmer
- Helicopter Crew Chief: MH-60 Air Rescue & MH-53 Special Operations
- EPA 2000: Computer Programmer
- SDG 2001: Computer Programmer Database Administrator
- BLM 2002: Computer Programmer
- Medically Retired in 2004
Computer Background
- Unix 1969
- Windows (The Lost Years)
- Linux (Before it was called Linux)
- Server: Arch Linux (Since Alpha)
- Desktop: Arch Linux Manjaro (Since first update that crashed my system)
Rust using Rocket and WebAssembly
This is a tutorial on Rust using Rocket and WebAssembly, I will try to fully explain how to install, set up, and write a program that will run in a Web Browser, it will use a Database, and have a Login, more details will be given in that section when complete.
If you are interested in Rust AKA Rust-Lang, and WebAssembly, you might be interested in Rocket, this page will talk about how to get started using it.
I will use Visual Studio Code IDE, it is not mandatory, it just works good with Rust.
VPN
First you need a VPN, I only run Arch Linux for my VPN server, the tutorial will assume you have one. You do not need anything loaded on the Server for this tutorial, you only need to update the executable, and be able to access it from a URL in any Web Browser that supports WebAssembly, which most all major browsers do.
Tools
To use Rust, you need to install it with some tools, for the IDE I will use VSCode, and I will show one way to install it.
snap is becoming the preferred method (by Microsoft) for the installation of VSCode, and snap just makes it easy to install and update.
Make sure your system is up to date
$ sudo pacman -Suy --noconfirm --needed;
Some basic programming tools
$ sudo pacman --noconfirm --needed -S base-devel wget rsync yay flatpak $ sudo pacman --noconfirm --needed -S nano fontconfig parallel git $ sudo pacman --noconfirm --needed -S gedit gedit-plugins libxcomposite $ sudo pacman --noconfirm --needed -S net-tools inetutils pulseaudio $ sudo pacman --noconfirm --needed -S gcc autoconf automake make cmake $ sudo pacman --noconfirm --needed -S python ruby libxml2 ninja perl $ sudo pacman --noconfirm --needed -S clang lib32-clang llvm binaryen $ sudo pacman --noconfirm --needed -S mesa lib32-mesa at-spi2-atk $ sudo pacman --noconfirm --needed -S double-conversion llvm libxss $ sudo pacman --noconfirm --needed -S maven bison flex gperf icu $ sudo pacman --noconfirm --needed -S libcap libxtst libpulse $ sudo pacman --noconfirm --needed -S libxslt libxcursor nodejs $ sudo pacman --noconfirm --needed -S alsa-lib gstreamer atk wayland $ sudo pacman --noconfirm --needed -S libcups pciutils nss libxtst $ sudo pacman --noconfirm --needed -S libgcrypt libdrm zstd dbus-x11 $ sudo pacman --noconfirm --needed -S lib32-openssl openssl libxrandr $ sudo pacman --noconfirm --needed -S harfbuzz harfbuzz-icu libxdamage $ sudo pacman --noconfirm --needed -S libxcb xcb-proto libpciaccess $ sudo pacman --noconfirm --needed -S xcb-util xcb-util-image libgudev $ sudo pacman --noconfirm --needed -S xcb-util-wm libxi xcb-util-keysyms
Visual Studio Code IDE for Rust
There are two versions of Visual Studio Code: open-source OSS has a flatpak, and Microsoft vscode has a snap package.
For VSCode see https://snapcraft.io/code see below on how to install snap.
For OSS see https://flathub.org/apps/details/com.visualstudio.code.oss
Installation of Flatpak: Make sure to follow the setup guide before installing
$ sudo pacman --noconfirm --needed -S flatpak $ flatpak install flathub com.visualstudio.code.oss
Run:
$ flatpak run com.visualstudio.code.oss
AUR
snap is currently only in AUR, to install from AUR you need a utility like yay, to install it:
$ sudo pacman --noconfirm --needed -S yay
Make sure your system is up to date
$ yay -Suyya
snap
snap has a stable release
$ yay --noconfirm --needed -S snapd
or the git release that may be newer
$ yay --noconfirm --needed -S snapd-git
To get it to run using AppArmor
$ sudo systemctl enable --now apparmor.service
To get it to automatically update snap packages
$ sudo systemctl enable --now snapd.apparmor.service
Visual Studio Code IDE snap Installation
To list all vscode packages
$ sudo snap find vscode Name Version Publisher Notes Summary code 8795a988 vscode✓ classic Code editing. Redefined. code-insiders a747d264 vscode✓ classic Code editing. Redefined.
To install Visual Studio Code
$ sudo snap install code --classic
or to install Visual Studio Code Insiders
$ sudo snap install code-insiders --classic
Recommended Visual Studio Code IDE Extensions
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. You can type in ext for extension, install and the name of the package, or just search for extensions, Ctrl-Shift-X
Rust (rls) by rust-lang.rust: https://github.com/rust-lang/rls-vscode
$ ext install rust-lang.rust
Better TOML: https://github.com/toml-lang/toml
$ ext install bungcip.better-toml
Code Runner: https://github.com/formulahendry/vscode-code-runner
$ ext install formulahendry.code-runner
Code Spell Checker: https://github.com/streetsidesoftware/vscode-spell-checker
$ ext install streetsidesoftware.code-spell-checker
crates: https://github.com/serayuzgur/crates
$ ext install serayuzgur.crates
GitLens — Git supercharged: https://github.com/eamodio/vscode-gitlens
$ ext install eamodio.gitlens
Tera Syntax Highlighting: https://github.com/karuna/tera-vscode
$ ext install karunamurti.tera
Rust Installation
If you go to Rustup https://rustup.rs/ you will see a link to install Rust, it will curl a bash to sh to execute, you can download the code and inspect it first, I did, then I ran it as per their site on this date, so check to make sure it has not changed:
Inspect rustup.sh, set it to executable, then install it
$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs > rustup.sh $ chmod +x rustup.sh $ ./rustup.sh
or run
$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
Other Installation Methods: https://github.com/rust-lang/rustup#other-installation-methods
Rocket Installation
There are many ways to install any github project, for this tutorial I will create a mount folder:
$ mkdir -P /mnt/workspace/wasmrust/Rocket $ cd /mnt/workspace/wasmrust/Rocket
The first way to use a github project is to just download the project as a Zip:
$ wget https://github.com/SergioBenitez/Rocket/archive/master.zip
Extract the zip into a folder and you are ready to compile it.
A better way is to use git and clone it
$ git clone git://github.com/SergioBenitez/Rocket.git
And an even better way, is to Fork it, I did, just go to https://github.com/SergioBenitez/Rocket and login, and click fork, if you go to my github account https://github.com/Light-Wizzard/Rocket you will see it, so I would use my account like this:
$ git clone git://github.com/Light-Wizzard/Rocket.git
You would change Light-Wizzard to your account name.
To compile and test
$ cd /mnt/workspace/wasmrust/Rocket/Rocket/core $ cd lib && cargo build; cd .. $ cd codegen && cargo build; cd ..; cd .. $ cd contrib && cargo build --all-features; cd .. $ ./scripts/test.sh
I copy my project into the root of Rocket at the core level, I edit Rockets Cargo.toml file, and under [workspace] I add the name of my Project, so I can join its workspace.
Set up git
To setup github repository for your new project:
$ git init
Checkout master
$ git checkout master
Set up your github account, change USER_NAME, USER_EMAIL and PROJECT name
$ git config --global user.name "USER_NAME" $ git config --global user.email "USER_EMAIL" $ git config --global credential.helper cache $ git config --global credential.helper 'cache --timeout=36000000' $ git remote add origin https://github.com/USER_NAME/PROJECT.git
Now push your update to your master
$ git push -u origin master
if you have any issues on the first push try:
$ git push -f origin master
Add an upstream to Rocket so you can update your Fork
$ git remote add upstream git://github.com/SergioBenitez/Rocket.git
sync upstream with fork
$ git pull upstream master && git push origin master
If error fatal: refusing to merge unrelated histories
$ git pull upstream master --allow-unrelated-histories && git push origin master
That is it for installing Rocket.
WebAssembly or WASM
There are many ways to install any github project,
sudo pacman --noconfirm --needed -S rustup emscripten
for this tutorial I will create a mount folder on another drive called workspace, you can put it where ever you want, I call the root WASM for WebAssembly and Rust, first we need to install the emscripten, it is a compiler, see https://emscripten.org/
$ mkdir -P /mnt/workspace/wasmrust/EMS $ cd /mnt/workspace/wasmrust/EMS
$ git clone https://github.com/emscripten-core/emsdk.git $ cd emsdk
Install Latest EM SDK
$ ./emsdk install latest $ ./emsdk activate latest
To install Release Kit for publishing
$ ./emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit $ ./emsdk activate --build=Release sdk-incoming-64bit binaryen-master-64bit
Set Debug Environment
$ source ./emsdk_env.sh
Set Release Environment
$ source ./emsdk_env.sh --build=Release
Rust Rocket WebAssembly Application
Now: How to write and publish your first Rust Rocket WebAssembly Application.
- Open Visual Studio Code IDE.
Now is a good time to install the #Recommended Visual Studio Code IDE Extensions
- Open Folder
File -> Open Folder (Ctrl KO)
Navigate to the Rocket/examples and choose an example project, for this tutorial I will pick config, and look at the code in it, and base our first project off of what we learn from this example, so add a folder to your Rocket installation, if you have not already done the #Rocket Installation, if you have you should have a Rocket folder somewhere, for this tutorial we will make a project called findAlice or find_alice, or any name you want,
$ mkdir -P /mnt/workspace/wasmrust/Rocket/findAlice $ cd /mnt/workspace/wasmrust/Rocket/findAlice
- Copy example project files
$ cp -r /mnt/workspace/wasmrust/Rocket/examples/config /mnt/workspace/wasmrust/Rocket/findAlice
- Join workspace
Edit Rockets Cargo.toml and append this to its [workspace], at the bottom of the file:
$ "findAlice/config",
- Open Terminal
Terminal -> New Terminal (Ctrl Shift +)
$ cargo build $ cargo test $ cargo run
Now you can update your git project #Set up git
If you set up the repository correctly, you will need to update both the source, and your project from time to time, the git extension will help with that, making sure your upstream is rocket, and you are in its workspace, so you have access to all its tools, and you can decide what branch you want to work from.
- Upload to server
Now ftp this into your server, in a public path, make sure its name and path have no spaces.
- Open project you uploaded in Web Browser
If it works, you have made your first Rust Rocket WebAssembly Application. This config is just a starting point, from here we add to it, by looking at the next example, and as we learn more about Rust and Rocket, we can focus on finding Alice on the Moon, and why we need a Rocket to get this Application to run in any browsers using WASM.
These instructions are for Arch Linux or Manjaro, but can be used for any supported Operating System, including all Linux Distributions, as well as Windows and MAC, simply by changing the names of the installation package manager.
This Tutorial covered installing most of the tools you will need, setting up Visual Studio Code IDE and Extensions, building or compiling, testing, and running the WebAssembly Application, I will go into more details at my WeBook project as I make progress.
Finding Alice is all about setting up the correct environment for Rust Programming, and Finding Alice on the Moon is the Goal, as if anyone has actually landed on the Moon, and lived to talk about it, not even the Cow, that was a joke, having the right tools to program with is not. To Find Alice, you must finish this app, after trying all the examples, you should have a working app that does something.
If you need help, submit an issue at WeBook, that is where I will continue this tutorial.
Next
Follow my Rocket WebAssembly Application called WeBook, Pronounced Web-Book https://github.com/Light-Wizzard/webook
I will create an application that has login, creates a database, and allows you to add books, chapters to the book, paragraphs to the chapters in the book, and make it easy to move around, and create output for HTML, CSS, and JavaScript, as well as PDF and ePub.