Articlejavascriptkit 0.27.0JavaScriptKit

    Quick Start: Hello World

    This tutorial walks you through creating a simple web application using JavaScriptKit. You’ll learn how to set up a Swift package, add JavaScriptKit as a dependency, write code to manipulate the DOM, and build and run your web application.

    Hello-World.tutorial

    JavaScriptKit allows you to interact with JavaScript APIs directly from Swift code when targeting WebAssembly, making it easy to build web applications using Swift.

    Prerequisites

    Visit the installation guide to install the Swift SDK for WebAssembly before starting this tutorial. This tutorial assumes you have the Swift SDK for WebAssembly installed. Please check your Swift installation.

    1. Check your Swift toolchain version. If you see different

      Console
      $ swift --version
Apple Swift version 6.0.3 (swift-6.0.3-RELEASE)
or
Swift version 6.0.3 (swift-6.0.3-RELEASE)

$ swift sdk list
6.0.3-RELEASE-wasm32-unknown-wasi
      hello-world-0-1-swift-version.txt

    2. Select a Swift SDK for WebAssembly version that matches the version of the Swift toolchain you have installed.

      The following sections of this tutorial assume you have set the SWIFT_SDK_ID environment variable.

      Console
      $ swift --version
Apple Swift version 6.0.3 (swift-6.0.3-RELEASE)
or
Swift version 6.0.3 (swift-6.0.3-RELEASE)

$ swift sdk list
6.0.3-RELEASE-wasm32-unknown-wasi

$ export SWIFT_SDK_ID=6.0.3-RELEASE-wasm32-unknown-wasi
      hello-world-0-2-select-sdk.txt

    Set up your project

    Let’s start by creating a new Swift package and configuring it to use JavaScriptKit.

    1. Create a new Swift package by running the following command in your terminal: This creates a new Swift executable package named “Hello” with a basic folder structure.

      Console
      $ swift package init --name Hello --type executable
Creating executable package: Hello
Creating Package.swift
Creating .gitignore
Creating Sources/
Creating Sources/main.swift
      hello-world-1-1-init-package.txt

    2. Add JavaScriptKit as a dependency using the Swift Package Manager: This command adds the JavaScriptKit GitHub repository as a dependency to your package.

      Console
      $ swift package init --name Hello --type executable
Creating executable package: Hello
Creating Package.swift
Creating .gitignore
Creating Sources/
Creating Sources/main.swift

$ swift package add-dependency https://github.com/swiftwasm/JavaScriptKit.git --branch main
Updating package manifest at Package.swift... done.
      hello-world-1-2-add-dependency.txt

    3. Add JavaScriptKit as a target dependency: This command adds JavaScriptKit as a target dependency to your package.

      Console
      $ swift package init --name Hello --type executable
Creating executable package: Hello
Creating Package.swift
Creating .gitignore
Creating Sources/
Creating Sources/main.swift

$ swift package add-dependency https://github.com/swiftwasm/JavaScriptKit.git --branch main
Updating package manifest at Package.swift... done.

$ swift package add-target-dependency --package JavaScriptKit JavaScriptKit Hello
Updating package manifest at Package.swift... done.
      hello-world-1-3-add-target-dependency.txt

    Write your web application

    Now let’s write some Swift code that manipulates the DOM to create a simple web page.

    1. Create or modify the main.swift file in your Sources/Hello directory: This code creates a new div element, sets its text content to “Hello from Swift!”, and appends it to the document body.

      main.swift
      import JavaScriptKit

let document = JSObject.global.document
var div = document.createElement("div")
div.innerText = "Hello from Swift!"
document.body.appendChild(div)
      hello-world-2-1-main-swift.swift

    2. Create an index.html file in the root of your project to load your WebAssembly application: This HTML file includes a script that loads and runs your compiled WebAssembly code.

      index.html
      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Swift Web App</title>
    <script type="module">
        import { init } from "./.build/plugins/PackageToJS/outputs/Package/index.js";
        init();
    </script>
</head>
<body>
    <h1>My Swift Web App</h1>
</body>
</html>
      hello-world-2-2-index-html.html

    Build and run your application

    Let’s build your application and run it in a web browser.

    1. Build your application with the Swift WebAssembly toolchain: This command compiles your Swift code to WebAssembly and generates the necessary JavaScript bindings.

      Console
      $ swift package --swift-sdk $SWIFT_SDK_ID js --use-cdn
[37/37] Linking Hello.wasm
Build of product 'Hello' complete! (5.16s)
Packaging...
...
Packaging finished
      hello-world-3-1-build.txt

    2. Start a local web server to serve your application: This starts a simple HTTP server that serves files from your current directory.

      Console
      $ swift package --swift-sdk $SWIFT_SDK_ID js --use-cdn
[37/37] Linking Hello.wasm
Build of product 'Hello' complete! (5.16s)
Packaging...
...
Packaging finished
$ npx serve
      hello-world-3-2-server.txt

    3. Open your application in a web browser: Your browser should open and display a page with “Hello from Swift!” as text added by your Swift code.

      Console
      $ swift package --swift-sdk $SWIFT_SDK_ID js --use-cdn
[37/37] Linking Hello.wasm
Build of product 'Hello' complete! (5.16s)
Packaging...
...
Packaging finished
$ npx serve
$ open http://localhost:3000
      hello-world-3-3-open.txt
      Preview of the web application