User:Flesh

From ArchWiki
User Flesh Page Information Data
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:
  • 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:

Note: Only init and credentials once, after that you only need to git push -u origin master
$ git init 

Checkout master

$ git checkout master

Set up your github account, change USER_NAME, USER_EMAIL and PROJECT name

Note: USER_NAME, USER_EMAIL and PROJECT are from your github account: https://github.com/USER_NAME/PROJECT.git
$ 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.

  1. Open Visual Studio Code IDE.

Now is a good time to install the #Recommended Visual Studio Code IDE Extensions

  1. 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
  1. Copy example project files
$ cp -r /mnt/workspace/wasmrust/Rocket/examples/config /mnt/workspace/wasmrust/Rocket/findAlice
  1. Join workspace

Edit Rockets Cargo.toml and append this to its [workspace], at the bottom of the file:

$ "findAlice/config",
  1. Open Terminal

Terminal -> New Terminal (Ctrl Shift +)

$ cargo build
$ cargo test
$ cargo run
Note: If test fails, fixing it is always fun, but if it runs, it runs, some of the tools fail test, but still work.

Now you can update your git project #Set up git

Note: Only init and credentials once, after that you only need to git push -u origin master

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.

  1. Upload to server

Now ftp this into your server, in a public path, make sure its name and path have no spaces.

  1. 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.

Note: This is a work in progress

Flesh (talk) 22:16, 27 November 2019 (UTC)