> For the complete documentation index, see [llms.txt](https://kagura.gitbook.io/kagura-nusa-en/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kagura.gitbook.io/kagura-nusa-en/hello-world/preparation.md).
# 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
```