quickstart to the spin wasm build

• Org shortcuts
• Setup
  • 1: Install
  • 2: Using templates
• Creating the App
  • Spin new
  • Manifest file
• Build the application
  • Install the node modules
  • Build the spin app
  • Run the application
• Deploy the application
  • Login
  • Running the app in the cloud

#+date:[2023-11-16 Thu]

Org shortcuts

create footnote

C-c C-x f

jump to the footnote ref

C-c C-c

Setup

1: Install

  spin -V

spin 2.0.1 (1d72f1c 2023-11-10)

If it is not installed, curl the shell file. Make sure to install it in your path, something like /usr/local/bin.

  curl -fsSL https://developer.fermyon.com/downloads/install.sh | bash
  sudo mv ./spin /usr/local/bin/spin

2: Using templates

The shell script in first step installs the template. If this is missing, use spin.

  # Rust templates
  spin templates install --git https://github.com/fermyon/spin --update
  rustup target add wasm32-wasi
  # Typescript to Wasm
  spin plugins update
  spin plugins install js2wasm --yes
  spin templates install --git https://github.com/fermyon/spin-js-sdk --update

Creating the App

Spin new

We use spin new with the http-ts template to create the skeleton of a new Spin application

  spin new -t http-ts		# We can do http-js for pure javascript

When prompted, enter:

name

hi

description

says hi

path

/hi

A new folder has been created with the name of the application.

  cd hi/
  tree

.
├── package.json
├── README.md
├── spin.toml
├── src
│   └── index.ts
├── tsconfig.json
└── webpack.config.js
2 directories, 6 files

Manifest file

The spin.toml is the manifest for the application. It tells spin what events should trigger what components

  spin_manifest_version = 2

  [application]
  authors = ["haqadosch"]
  description = "says hi"
  name = "hi"
  version = "0.1.0"

  [[trigger.http]]
  route = "/hi"
  component = "hi"

  [component.hi]
  source = "target/hi.wasm"
  exclude_files = ["**/node_modules"]
  [component.hi.build]
  command = "npm run build"

We can see that the app is configured to trigger the component "hi" at the route "/hi". Any other routes will be ignored.

Build the application

Install the node modules

Since this is a typesccript app, we need to npm install everything. This is no different than any other node app, in the same folder as package.json, the root folder, do the install.

  npm install

Build the spin app

To run the build instruction for all the components defined is the manifest file,

  spin build

The spin build command is a shortcut of the build command in the manifest

  [component.hi.build]
  command = "npm run build"

That means you can directly type npm run build in the root folder instead of spin build.

Run the application

You can spin up the application by running the following command

  cd hi
  spin up

Logging component stdio to .spin/logs/
Serving http://127.0.0.1:3000
Available Routes:
hi: http://127.0.0.1:3000/hi

Visiting the URL http://localhost:3000/hi will display the message "Hello from TS-SDK".

You can log the activity of the app by setting the environment variable RUST_LOG. This variable is independent of the template used for the app.

  export RUST_LOG=spin=trace
  spin up

By visiting the same URL as before, you can see the following logs

  2023-11-16T21:46:59.858033Z DEBUG spin_loader::cache: using cache root directory .cache/spin/registry
  2023-11-16T21:46:59.859288Z TRACE spin_cli::commands::up: Running trigger executor: SPIN_LOCAL_APP_DIR="" SPIN_LOCKED_URL="file:///tmp/spinup-Chh8Cn/spin.lock" SPIN_WORKING_DIR="/tmp/spinup-Chh8Cn" "/usr/local/bin/spin" "trigger" "http"
  Logging component stdio to ".spin/logs/"
  2023-11-16T21:47:00.272884Z TRACE spin_trigger_http: Constructed router for application hi: [(Exact("/hi"), "hi")]    

  Serving http://127.0.0.1:3000
  2023-11-16T21:47:00.273007Z  INFO spin_trigger_http: Serving http://127.0.0.1:3000    
  Available Routes:
    hi: http://127.0.0.1:3000/hi
  2023-11-16T21:47:07.785975Z  INFO spin_trigger_http: Processing request for application hi on URI http://localhost:3000/hi    
  2023-11-16T21:47:07.786012Z TRACE spin_trigger_http::handler: Executing request using the Spin executor for component hi
  2023-11-16T21:47:07.790199Z  INFO spin_trigger_http::handler: Request finished, sending response with status code 200 OK
  2023-11-16T21:47:07.887633Z  INFO spin_trigger_http: Processing request for application hi on URI http://localhost:3000/favicon.ico

Deploy the application

Login

Make sure you're logged in with Github first. Once done the deployment process can start.

  spin deploy

Copy your one-time code:

djqIipGu

…and open the authorization page in your browser:

https://cloud.fermyon.com/device-authorization

Waiting for device authorization… Device authorized! Uploading hi version 0.1.0 to Fermyon Cloud… Deploying… Waiting for application to become ready………… ready Available Routes: hi: https://hi-7tx.fermyon.app/hi

Running the app in the cloud

Now visiting https://hi-7tx.fermyon.app/hi will display the same message. The Fermyon Cloud has a dashboard for your app.