# Preparation
## Nessesary Tools
### cargo
Probably, you already installed. But if you do not install yet, please see [here](https://www.rust-lang.org/learn/get-started).
### wasm-pack
You can install wasm-pack by this command:
```bash
cargo install wasm-pack
```
### Node.js and npm
You can get from [here](https://nodejs.org/ja/). 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:
```bash
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
{% code title=".gitignore" %}
```gitignore
/target
/node_modules
/pkg
```
{% endcode %}
{% code title="cargo.toml" %}
```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.
]
```
{% endcode %}
{% code title="package.json" %}
```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"
}
}
```
{% endcode %}
{% code title="webpack.config.js" %}
```javascript
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
```
{% endcode %}
{% code title="template/index.html" %}
```html
Kagura
```
{% endcode %}
{% code title="template/index.js" %}
```javascript
import("../pkg");
```
{% endcode %}
### Install Pacakges
```bash
npm install
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://kagura.gitbook.io/kagura-nusa-en/hello-world/preparation.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.