Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(*): migrate examples/templates/tests to Spin manifest v2 #206

Merged
merged 8 commits into from
Oct 30, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ Installed 2 template(s)
Once the templates are installed, a new TypeScript project can be instantiated using:

```bash
spin new http-ts hello_world --accept-defaults
spin new -t http-ts hello_world --accept-defaults
```

To run the created template:
Expand All @@ -73,7 +73,6 @@ spin build
spin up
```


## Building

You need to build the SDK from source to use it.
Expand All @@ -90,12 +89,16 @@ You need to build the SDK from source to use it.

#### Setup SDK
```bash
npm install --prefix crates/spin-js-engine/src/js_sdk
npm install --prefix crates/spin-js-engine/src/js_sdk
make
```

The build produces the `spinjs` utility, which is used to build wasm modules from JavaScript or TypeScript source. For convenience you can move `spinjs` to a directory in your path - e.g., `sudo cp target/release/spinjs /usr/local/bin/spinjs`.

#### Build and run the examples

There are some examples provided in the `example/` directory. Each example has a readme on building and running it.
There are some examples provided in the [examples](./examples/) directory. Each example has a readme on building and running it.

Ensure you have the [latest version of Spin](https://developer.fermyon.com/spin/install) and the [js2wasm plugin](#using-the-sdk) installed.

__Note__: These examples track Spin's `main` branch, so you may need to ensure you are using the [canary](https://github.com/fermyon/spin/releases/tag/canary) Spin release.
3 changes: 2 additions & 1 deletion examples/javascript/hello_world/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,14 @@ This is the simplest example of using the Javascript SDK.
### Building the example

```console
npm install
spin build
```

### Running the example

```console
spin up --follow-all
spin up
```

Use e.g. `curl -v http://127.0.0.1:3000/hello` to test the endpoint.
16 changes: 9 additions & 7 deletions examples/javascript/hello_world/spin.toml
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
spin_manifest_version = "1"
spin_manifest_version = 2

[application]
authors = ["Fermyon Engineering <[email protected]>"]
name = "spin-http-js"
trigger = { type = "http", base = "/" }
version = "1.0.0"

[[component]]
id = "hello"
source = "target/spin-http-js.wasm"
[component.trigger]
[[trigger.http]]
route = "/hello"
[component.build]
component = "hello"

[component.hello]
source = "target/spin-http-js.wasm"
[component.hello.build]
command = "npm install && npm run build"
2 changes: 2 additions & 0 deletions examples/javascript/http-router/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,6 @@ The app exposes the following endpoints:

## Build and run the app locally

First, install npm dependencies with `npm install`.

To build and run the app locally, you can either use `spin build` and `spin up` or combine both commands and simply run `spin build --up`.
16 changes: 9 additions & 7 deletions examples/javascript/http-router/spin.toml
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
spin_manifest_version = "1"
spin_manifest_version = 2

[application]
authors = ["Thorsten Hans <[email protected]>"]
description = "Sample to demonstrate the usage of the HTTP router"
name = "http-router"
trigger = { type = "http", base = "/" }
version = "0.1.0"

[[component]]
id = "http-router"
[[trigger.http]]
route = "/..."
component = "http-router"

[component.http-router]
source = "target/http-router.wasm"
exclude_files = ["**/node_modules"]
[component.trigger]
route = "/..."
[component.build]
[component.http-router.build]
command = "npm run build"
2 changes: 2 additions & 0 deletions examples/javascript/kv/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,6 @@ The app leverages the `default` key-value store as specified in `spin.toml`.

## Build and run the app locally

First, install npm dependencies with `npm install`.

To build and run the app locally, you can either use `spin build` and `spin up` or combine both commands and simply run `spin build --up`.
16 changes: 9 additions & 7 deletions examples/javascript/kv/spin.toml
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
spin_manifest_version = "1"
spin_manifest_version = 2

[application]
authors = ["Thorsten Hans <[email protected]>"]
description = "Demonstrates how to use key-value store APIs in JS"
name = "kv"
trigger = { type = "http", base = "/" }
version = "0.1.0"

[[component]]
id = "kv"
[[trigger.http]]
route = "/..."
component = "kv"

[component.kv]
source = "target/kv.wasm"
key_value_stores = ["default"]
exclude_files = ["**/node_modules"]
[component.trigger]
route = "/..."
[component.build]
[component.kv.build]
command = "npm run build"
6 changes: 4 additions & 2 deletions examples/javascript/outbound-http/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@ This example showcases utilizing fetch to request data from an API and use it in
### Building the example

```
npm run build
npm install
spin build
```

### Running the example

```
spin up --follow-all
spin up
```

Use e.g. `curl -v http://127.0.0.1:3000/hello` to test the endpoint.
2 changes: 1 addition & 1 deletion examples/javascript/outbound-http/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"description": "",
"main": "index.js",
"scripts": {
"build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-http-js.wasm dist/spin.js",
"build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-outbound-http.wasm dist/spin.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
Expand Down
22 changes: 12 additions & 10 deletions examples/javascript/outbound-http/spin.toml
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
spin_manifest_version = "1"
spin_manifest_version = 2

[application]
authors = ["Fermyon Engineering <[email protected]>"]
name = "spin-http-js"
trigger = { type = "http", base = "/" }
name = "spin-outbound-http"
version = "1.0.0"

[[component]]
id = "hello"
source = "target/spin-http-js.wasm"
allowed_http_hosts = ["https://some-random-api.ml"]
files = ["src/index.html"]
[component.trigger]
[[trigger.http]]
route = "/hello"
[component.build]
component = "hello"

[component.hello]
source = "target/spin-outbound-http.wasm"
allowed_http_hosts = ["random-data-api.fermyon.app"]
files = ["src/index.js"]
[component.hello.build]
command = "npm run build"
6 changes: 3 additions & 3 deletions examples/javascript/outbound-http/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ const encoder = new TextEncoder("utf-8")
const decoder = new TextDecoder("utf-8")

export async function handleRequest(request) {
const dogFact = await fetch("https://some-random-api.ml/facts/dog")
const physicsFact = await fetch("https://random-data-api.fermyon.app/physics/json")

const dogFactBody = decoder.decode(await dogFact.arrayBuffer() || new Uint8Array())
const physicsFactBody = decoder.decode(await physicsFact.arrayBuffer() || new Uint8Array())

const env = JSON.stringify(process.env)

const body = `Here's a dog fact: ${dogFactBody}\n`
const body = `Here's a physics fact: ${physicsFactBody}\n`

return {
status: 200,
Expand Down
4 changes: 2 additions & 2 deletions examples/javascript/planetscale/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,13 @@ const config = {

```
npm install
npm run build
spin build
```

### Running the example

```
spin up --follow-all
spin up
```

Use e.g. `curl -v http://127.0.0.1:3000/hello` to test the endpoint.
6 changes: 3 additions & 3 deletions examples/javascript/planetscale/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"description": "",
"main": "index.js",
"scripts": {
"build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-http-js.wasm dist/spin.js",
"build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-planetscale.wasm dist/spin.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
Expand All @@ -15,7 +15,7 @@
"webpack-cli": "^4.10.0"
},
"dependencies": {
"@planetscale/database": "^1.4.0",
"@fermyon/spin-sdk": "^0.6.0"
"@fermyon/spin-sdk": "^0.6.0",
"@planetscale/database": "^1.4.0"
}
}
22 changes: 12 additions & 10 deletions examples/javascript/planetscale/spin.toml
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
spin_manifest_version = "1"
spin_manifest_version = 2

[application]
authors = ["Fermyon Engineering <[email protected]>"]
name = "spin-http-js"
trigger = { type = "http", base = "/" }
name = "spin-planetscale"
version = "1.0.0"

[[component]]
id = "planetscale"
source = "target/spin-http-js.wasm"
allowed_http_hosts = ["https://aws.connect.psdb.cloud"]
files = ["src/index.html"]
[component.trigger]
[[trigger.http]]
route = "/hello"
[component.build]
component = "planetscale"

[component.planetscale]
source = "target/spin-planetscale.wasm"
allowed_http_hosts = ["aws.connect.psdb.cloud"]
files = ["src/index.js"]
[component.planetscale.build]
command = "npm run build"
5 changes: 3 additions & 2 deletions examples/javascript/simple_ssr/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,16 @@
This example demonstrates server side rendering with react.

### Building the example

```
npm install
npm run build
spin build
```

### Running the example

```
spin up --follow-all
spin up
```

Use e.g. `curl -v http://127.0.0.1:3000/hello` to test the endpoint.
2 changes: 1 addition & 1 deletion examples/javascript/simple_ssr/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"description": "",
"private": true,
"scripts": {
"build": "npm run build:client && npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-http-js.wasm dist/spin.js",
"build": "npm run build:client && npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-simple-ssr.wasm dist/spin.js",
"build:client": "esbuild src/client/index.js --bundle --outfile=dist/static/bundle.js --loader:.js=jsx",
"test": "echo \"Error: no test specified\" && exit 1"
},
Expand Down
29 changes: 15 additions & 14 deletions examples/javascript/simple_ssr/spin.toml
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
spin_manifest_version = "1"
spin_manifest_version = 2

[application]
authors = ["Fermyon Engineering <[email protected]>"]
name = "spin-http-js"
trigger = { type = "http", base = "/" }
name = "spin-simple-ssr"
version = "1.0.0"

[[trigger.http]]
route = "/hello"
component = "SSR"

[[trigger.http]]
route = "/static/..."
component = "fileserver"

[[component]]
id = "SSR"
source = "target/spin-http-js.wasm"
allowed_http_hosts = ["https://some-random-api.ml"]
[component.SSR]
source = "target/spin-simple-ssr.wasm"
files = [{source = "src/public", destination = "/"} ]
[component.trigger]
route = "/hello"
[component.build]
[component.SSR.build]
command = "npm run build"

[[component]]
[component.fileserver]
source = "modules/spin_static_fs.wasm"
id = "fileserver"
files = [{ source = "dist/static", destination = "/" }, ]
[component.trigger]
route = "/static/..."
3 changes: 2 additions & 1 deletion examples/javascript/sqlite/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,6 @@ This is a simple showcase of the SQLite feature in the Spin JS SDK.
Run the following:

```bash
spin build -u --sqlite @migration.sql
npm install
spin build --up --sqlite @migration.sql
```
16 changes: 9 additions & 7 deletions examples/javascript/sqlite/spin.toml
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
spin_manifest_version = "1"
spin_manifest_version = 2

[application]
authors = ["Ryan Levick <[email protected]>"]
description = ""
name = "sqlite"
trigger = { type = "http", base = "/" }
version = "0.1.0"

[[component]]
id = "sqlite"
[[trigger.http]]
route = "/..."
component = "sqlite"

[component.sqlite]
source = "target/sqlite.wasm"
exclude_files = ["**/node_modules"]
sqlite_databases = ["default"]

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am puzzled why this excludes files that were not included but maybe safer to leave it?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 Yes I think I'll leave this one for another day

[component.trigger]
route = "/..."
[component.build]
[component.sqlite.build]
command = "npm run build"
Loading
Loading