Preparation

preparation to creat and view a web page.

Nessesary Tools

cargo

Probably, you already installed. But if you do not install yet, please see here.

wasm-pack

You can install wasm-pack by this command:

cargo install wasm-pack

Node.js and npm

You can get from here. If you want not to use npm but also to use yarn and so on, you can use it.

File Setting

You can create a cargo project by this command:

cargo new --lib crate-name

and create some files like this:

[root of crate]
- .gitignore
- Cargo.toml
- package.json
- webpack.config.js
- [src]
  - lib.js
- [template]
  - index.html
  - index.js

.gitignore

/target
/node_modules
/pkg

cargo.toml

[package]
name = "hello-world"
version = "0.1.0"
edition="2021"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
js-sys="^0.3"
kagura="^0.14"
nusa="^0.1"
wasm-bindgen="^0.2"
wasm-bindgen-futures = "^0.4"

[dependencies.web-sys]
version="^0.3"
features=[
# If you want to use HtmlCanvasElement, Blob, IdbDatabase and so on, 
# add features hear.
]

package.json

{
  "name": "hello-world",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "./node_modules/.bin/webpack-dev-server",
    "make": "./node_modules/.bin/webpack"
  },
  "devDependencies": {
    "@wasm-tool/wasm-pack-plugin": "^1.6.0",
    "html-webpack-plugin": "^5.3.2",
    "webpack": "^5.70",
    "webpack-cli": "^4.9.0",
    "webpack-dev-server": "^4.3.1"
  }
}

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");

module.exports = {
    mode: "production",
    experiments: { syncWebAssembly: true },
    entry: "./template",
    output: {
        path: path.join(__dirname, "./dist")
    },
    resolve: {
        extensions: [".js"]
    },
    module: {
        rules: [],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "./template/index.html"),
            inlineSource: ".(js|css)$"
        }),
        new WasmPackPlugin({
            crateDirectory: path.join(__dirname, "./"),
            forceMode: "production",
            target: "web",
            args: "--log-level error",
        }),
    ],
    devServer: {
        historyApiFallback: true,
    }
};
javas

template/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Kagura</title>
</head>

<body>
    <div id="app">
    </div>
</body>

</html>

template/index.js

import("../pkg");

Install Pacakges

npm install

NextCreates a Page

Last updated 3 years ago

hashtagNessesary Tools

hashtagcargo

hashtagwasm-pack

hashtagNode.js and npm

hashtagFile Setting

hashtagInstall Pacakges