Kagura(nusa)/en
  • Hello World
    • Preparation
    • Creates a Page
  • Single Component
    • Nssesary Traits
    • Creates a Component
Powered by GitBook
On this page
  • Nessesary Tools
  • cargo
  • wasm-pack
  • Node.js and npm
  • File Setting
  • Install Pacakges
  1. Hello World

Preparation

preparation to creat and view a web page.

NextCreates a Page

Last updated 3 years ago

Nessesary Tools

cargo

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

wasm-pack

You can install wasm-pack by this command:

cargo install wasm-pack

Node.js and npm

You can get from . 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
here
here