{"id":19782437,"url":"https://github.com/steadylearner/webassembly","last_synced_at":"2026-06-10T12:31:54.425Z","repository":{"id":38334672,"uuid":"196394511","full_name":"steadylearner/Webassembly","owner":"steadylearner","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-04T04:25:35.000Z","size":1403,"stargazers_count":0,"open_issues_count":28,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-28T12:57:16.895Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/steadylearner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-11T12:55:28.000Z","updated_at":"2019-08-28T15:30:33.000Z","dependencies_parsed_at":"2023-02-01T20:01:33.082Z","dependency_job_id":null,"html_url":"https://github.com/steadylearner/Webassembly","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/steadylearner/Webassembly","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2FWebassembly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2FWebassembly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2FWebassembly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2FWebassembly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/steadylearner","download_url":"https://codeload.github.com/steadylearner/Webassembly/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2FWebassembly/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34153482,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T06:05:09.012Z","updated_at":"2026-06-10T12:31:54.400Z","avatar_url":"https://github.com/steadylearner.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\n    Post{\n        subtitle: \"Prepare development environment for Rust yew\",\n        image: \"post/web/how-to-use-rust-yew.png\",\n        image_decription: \"Image made with CSS by Steadylearner\",\n        tags: \"How Rust Yew code\",\n    }\n--\u003e\n\n\u003c!-- Link --\u003e\n\n[Steadylearner]: https://www.steadylearner.com\n[Steadylearner Web]: https://github.com/steadylearner/Webassembly\n[Rust Website]: https://www.rust-lang.org/\n[Cargo Web]: https://github.com/koute/cargo-web\n[Yew]: https://github.com/DenisKolodin/yew\n[Yew Documenation]: https://docs.rs/yew/0.6.0/yew/\n[Build a rust frontend with Yew]: https://dev.to/deciduously/lets-build-a-rust-frontend-with-yew---part-2-1ech\n[rollupjs]: https://github.com/rollup/rollup\n\n[Rocket Yew starter pack]: https://github.com/anxiousmodernman/rocket-yew-starter-pack\n[Web completely in Rust]: https://medium.com/@saschagrunert/a-web-application-completely-in-rust-6f6bdb6c4471\n\n\u003c!-- / --\u003e\n\n\u003c!-- package.json\n\ncargo web start(include build), cargo web deploy\nyarn watch:rs for devlopment then yarn prod(include build) for production\n\n\u003c!-- Steadylearner Post --\u003e\n\n[How to install Rust]: https://www.steadylearner.com/blog/read/How-to-install-Rust\n[Rust Chat App]: https://www.steadylearner.com/blog/read/How-to-start-Rust-Chat-App\n[Steadylearner Rust Blog Posts]: https://www.steadylearner.com/blog/search/Rust\n[Yew Counter]: https://www.steadylearner.com/yew_counter\n\n\u003c!-- / --\u003e\n\nIn this post, we will prepare development environment for Rust **Yew**. Then, we will write minimal code with it and learn how to deploy it in [your website][Steadylearner] also.\n\nIf you just want to see what you will get with this post, please visit [Yew Counter] in [Steadylearner].\n\nIf you want to save your time and have experience in Rust, just clone the [Steadylearner Web] repository with\n\n```console\n$git clone https://github.com/steadylearner/Webassembly.git\n```\n\nthen inside Yew folder\n\n```console\n$yarn\n$rustup default set nightly\n$cargo install cargo-web\n```\n\nand **$yarn watch:rs** for development and **$yarn prod** for production files in **release**.\n\nthen make a route to serve **index.html** modify paths to link them if you find a problem with it.\n\n\u003cbr /\u003e\n\n\u003ch2 class=\"red-white\"\u003e[Prerequisite]\u003c/h2\u003e\n\n1. [How to install Rust]\n2. [Build a rust frontend with yew]\n3. [Cargo Web]\n4. [Yew]\n5. [rollupjs]\n\n---\n\nI want you to install Rust first if you haven't yet. The blog post [How to install Rust] will help you to learn how to do that or visit [Rust Website] for more information.\n\nThis post is based on the information from another blog post for **Yew** [Build a rust frontend with Yew]. You can read until second part of it. You will find that this post will have many common parts with it.\n\nWith this post, you will have everything ready to develop Rust **Yew** Web application. Before you invest more time for it, read the documentations from [Yew](especially **src** and **examples** folders). If you see the source code of it, you can see that many of them are from [Cargo Web]. So it will be helpful for you to read its documentation also.\n\nIn case of [rollupjs], it will be sufficient for you to know that\n\n**'To use it with a configuration file, pass the --config or -c flags.'**(https://rollupjs.org/guide/en#configuration-files)\n\nIf you want to use your own favicon after you read this post or [Build a rust frontend with Yew], please clear cache of your webrowser first and use your file with name favicon.ico instead in **static** folder.\n\n(**$grep \"favicon.ico\" .** and delete files relevant to it  will not help you.)\n\n\u003cbr /\u003e\n\n\u003ch2 class=\"blue\"\u003eTable of Contents\u003c/h2\u003e\n\n1. Install Cargo Web to use Yew\n2. How to prepare minimal files for it\n3. Rust Yew example from its official website\n4. Improve it\n5. How to upload it in your website\n6. **Conclusion**\n\n---\n\nYou can skip some parts if you already read [Build a rust frontend with Yew].\n\n\u003cbr /\u003e\n\n## 1. Install Cargo Web to use Yew\n\nBefore this post, I doubted that my machine with Linux Ubuntu 18.04 would work with **Yew** or not. When you read the documentation from the [Cargo Web], you can see that there are many options and it was difficult to decide what to use.\n\nSo I found a blog post such as [Build a rust frontend with Yew]. I hope you already read it and may skip this part. Otherwise, read on and execute commands below.\n\n(I will suppose that you already have Rust installed in your machine with [How to install Rust] or other guides.)\n\n```console\n$rustup default set nightly // 1.\n$cargo install cargo-web // 2.\n```\n\n1. You will need nightly features of Rust to use **Yew**. You can use override to make nightly directory specific instead of glboal.\n\n2. It will take long. You may use this time to read [Build a rust frontend with Yew] post and its relevant information.\n\nWhen you see that [Cargo Web] installation is completed. You have everything ready to write **Rust yew**. Its main role is to help you use JavaScript, HTML etc in Rust **Yew**.\n\nYou may follow the instructions from the first part of [Build a rust frontend with Yew] at this point.\n\nIt will be to execute command below to make [Cargo Web] work well.\n\n```console\n$echo 'default-target = \"wasm32-unknown-unknown\"' \u003e Web.toml\n```\n\nThen, build some files and install NPM packages to make the entire Rust Yew project work. It is just matter of **copy and paste**.\n\nIf you want to save time, you can clone [Steadylearner Web] repository and use **Yew** folder.\n\nThen, open the console in it and type **$yarn watch:rs** or **$yarn prod** and you will see the latest **Yew** example from [Steadylearner] in your browser.\n\n\u003cbr /\u003e\n\n## 2. How to prepare minimal files for it\n\nIf you read [the blog post][Build a rust frontend with Yew] or cloned [Steadylearner Web], you should have everything to start development with Rust Yew already.\n\nHaving the minimal folder structure to start with will always be helpful.\n\nIt will be similar to\n\n```console\n├── Cargo.toml\n├── package.json\n├── rollup.config.js\n├── src\n│   ├── components\n│   ├── lib.rs\n│   └── main.rs\n├── static\n│   ├── favicon.ico\n│   ├── index.css\n│   ├── index.html\n├── Web.toml\n```\n\nWe don't need to edit **Web.toml** and you may modify folder or file names for **Cargo.toml**, **rollup.config.js** when you want to customize them.\n\nSo what left are **package.json**, and **src** and **static** folders. I already gave you a information about **favicon.ico** you can use your image instead of it.\n\nYou don't have to care for **components** and **lib.rs** file also. You may delete all files in **components** and empty **lib.rs** file but don't delete it because it is included in **Cargo.toml**.\n\nIn those processes, we removed some options and what we need to care for are only\n\n```console\n├── package.json\n├── src\n│   └── main.rs\n├── static\n│   ├── index.css\n│   ├── index.html\n```\n\nWe have payloads for this project. We will start from **package.json**.\n\nIf you see the scripts and the devDependencies parts of **package.json** from the [the blog post][Build a rust frontend with Yew]\n\n```json\n{\n  \"scripts\": {\n    \"build:js\": \"rollup -c\",\n    \"build:rs\": \"cargo web deploy --release\",\n    \"build:scss\": \"node-sass --include-path scss scss/hunt.scss css/hunt.css\",\n    \"build:css\": \"postcss --use autoprefixer -o static/hunt.css css/hunt.css\",\n    \"build:style\": \"run-s build:scss build:css\",\n    \"build:copy\": \"cp target/deploy/hunt.css release/ \u0026\u0026 cp target/deploy/hunt.wasm release/ \u0026\u0026 cp target/deploy/index.html release/ \u0026\u0026 cp target/deploy/favicon.ico release/\",\n    \"build\": \"run-s clean:deploy build:rs build:js build:style build:copy\",\n    \"clean:deploy\": \"rm -rf /release\",\n    \"prod\": \"run-s build serve\",\n    \"serve\": \"serve -p 8080 release\",\n    \"watch:rs\": \"cargo web start --release\",\n    \"test\": \"echo \\\"Error: no tests!\\\" \u0026\u0026 exit 1\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.4.5\",\n    \"@babel/preset-env\": \"^7.4.5\",\n    \"autoprefixer\": \"^9.6.0\",\n    \"node-sass\": \"^4.12.0\",\n    \"nodemon\": \"^1.19.1\",\n    \"npm-run-all\": \"^4.1.5\",\n    \"postcss\": \"^7.0.17\",\n    \"postcss-cli\": \"^6.1.2\",\n    \"rollup\": \"^1.15.6\",\n    \"rollup-plugin-babel\": \"^4.3.2\",\n    \"rollup-plugin-postcss\": \"^2.0.3\",\n    \"rollup-plugin-uglify\": \"^6.0.2\",\n    \"rollup-plugin-wasm\": \"^3.0.0\",\n    \"serve\": \"^11.0.2\"\n  }\n}\n```\n\nIt is not easy to find what they do. If you spent time for that, you may find that you can remove many of them if you don't use sass etc to write CSS.\n\nTherefore, if you remove parts for them it will be\n\n```json\n{\n    \"scripts\": {\n        \"build:js\": \"rollup -c\",\n        \"build:rs\": \"cargo web deploy --release\",\n        \"build:copy\": \"cp target/deploy/index.css release/ \u0026\u0026 cp target/deploy/index.wasm release/ \u0026\u0026 cp target/deploy/index.html release/ \u0026\u0026 cp target/deploy/favicon.ico release/\",\n        \"build\": \"run-s clean:deploy build:rs build:js build:copy\",\n        \"clean:deploy\": \"rm -rf /release\",\n        \"prod\": \"run-s build serve\",\n        \"serve\": \"serve -p 8080 release\",\n        \"watch:rs\": \"cargo web start --release\",\n        \"test\": \"echo \\\"Error: no tests!\\\" \u0026\u0026 exit 1\"\n    },\n    \"devDependencies\": {\n        \"@babel/core\": \"^7.1.6\",\n        \"@babel/preset-env\": \"^7.1.6\",\n        \"autoprefixer\": \"^9.3.1\",\n        \"nodemon\": \"^1.18.6\",\n        \"npm-run-all\": \"^4.1.3\",\n        \"rollup\": \"^0.67.3\",\n        \"rollup-plugin-babel\": \"^4.0.3\",\n        \"rollup-plugin-uglify\": \"^6.0.0\",\n        \"rollup-plugin-wasm\": \"^3.0.0\",\n        \"serve\": \"^11.0.2\"\n    }\n}\n```\n\nand what you need are\n\n1. **$yarn watch:rs** when you develope\n\n2. **$yarn prod** before you prepare production files.\n\nand you don't need some folders for scss etc to work and project becomes simpler.\n\nWe have index.html, index.css and main.rs at this point. If you have experience with frontend, you won't need many explantion for how **index.html, index.css** work. You can just refer the files in [Steadylearner Web] repository or write index.html file similar to this.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n  \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n\n  \u003c!-- https://github.com/steadylearner/code/blob/master/src/metatag/index.js --\u003e\n\n  \u003ctitle\u003eWeb by Steadylearner\u003c/title\u003e\n  \u003cmeta name=\"description\" content=\"Yew example made by https://www.steadylearner.com\" /\u003e\n  \u003cmeta name=\"thumbnail\" content=\"https://avatars0.githubusercontent.com/u/32325099?s=460\u0026v=4\" /\u003e\n\n  \u003c!-- / --\u003e\n\n  \u003c!-- Custom CSS --\u003e\n\n  \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"steadylearner.css\" /\u003e\n\n  \u003c!-- / --\u003e\n\n  \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"index.css\" /\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n  \u003cscript src=\"custom.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"index.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\nWe have only **main.rs** to care for and we will write code for it in the next part.\n\n\u003cbr /\u003e\n\n## 3. Rust Yew example from its official website\n\n[Yew] has many examples. But the purpose of this post is to help you have minimal setup and start the development with it.\n\nSo we will take minimal example from from its author.\n\nIt will be similar to the code snippet below and copy it your **main.rs** file.\n\n```rust\n#[macro_use]\nextern crate yew;\nuse yew::prelude::*;\n\n// M in MVC\n\nstruct Model {\n    value: i64,\n}\n\n// C in MVC\nenum Msg {\n    DoIt,\n}\n\nimpl Component for Model {\n    type Message = Msg;\n    type Properties = ();\n\n    fn create(_: Self::Properties, _: ComponentLink\u003cSelf\u003e) -\u003e Self {\n        Self {\n            value: 0,\n        }\n    }\n\n    fn update(\u0026mut self, msg: Self::Message) -\u003e ShouldRender {\n        match msg {\n            Msg::DoIt =\u003e self.value = self.value + 1\n        }\n        true\n    }\n}\n\n// V in MVC\nimpl Renderable\u003cModel\u003e for Model {\n    fn view(\u0026self) -\u003e Html\u003cSelf\u003e {\n        html! {\n            \u003cdiv\u003e\n               \u003cbutton onclick=|_| Msg::DoIt,\u003e{ \"+1\" }\u003c/button\u003e\n                \u003cp\u003e{ self.value }\u003c/p\u003e\n            \u003c/div\u003e\n        }\n    }\n}\n\nfn main() {\n    yew::initialize();\n    App::\u003cModel\u003e::new().mount_to_body();\n    yew::run_loop();\n}\n```\n\nIf you are familar with other frontend framework such as [React](https://www.steadylearner.com/blog/search/React) or read the documentation I gave you above.\n\nYou should know that\n\n```rust\nfn create(_: Self::Properties, _: ComponentLink\u003cSelf\u003e) -\u003e Self {\n    Self {\n        value: 0,\n    }\n}\n\nfn update(\u0026mut self, msg: Self::Message) -\u003e ShouldRender {\n    match msg {\n        Msg::DoIt =\u003e self.value = self.value + 1\n    }\n    true\n}\n```\n\nis payload to control the app and\n\n```rust\nhtml! {\n    \u003cdiv\u003e\n        \u003cbutton onclick=|_| Msg::DoIt,\u003e{ \"+1\" }\u003c/button\u003e\n        \u003cp\u003e{ self.value }\u003c/p\u003e\n    \u003c/div\u003e\n}\n```\n\nis to render the view of it.\n\nThe entire main.rs file is the minimal example to show how to control state with [Yew].\n\nWe do not need to edit **fn create** part that much because we just need them only when we start it.\n\nIf you use **$yarn watch:rs or yarn prod** in your folder it will show you counter app in your [localhost](http://localhost:8080/).\n\nIf you made it, you have minimal development environment ready to start to use **Yew**.\n\nYou may refer to [Yew] documentation and its examples or follow the next part.\n\n\u003cbr /\u003e\n\n## 4. Improve it\n\nYou are already ready to write codes for Rust with the previous parts. You may have found that what you need to do is just\n\n1. Modify your html to be used inside Rust html! macro\n\n2. Write JavaScript equivalent mehtods to update state in Rust **Yew** way.\n\nBut you haven't seen how to use CSS and what if you want to use various methods instead of just update it?\n\nThen, you can refer to the example below.\n\n```rust\n#[macro_use]\nextern crate yew;\nuse yew::prelude::*;\n\nstruct Model {\n    value: i64,\n}\n\n// 1.\nenum Msg {\n    Plus,\n    Minus,\n    Zero,\n}\n\nimpl Component for Model {\n    type Message = Msg;\n    type Properties = ();\n    fn create(_: Self::Properties, _: ComponentLink\u003cSelf\u003e) -\u003e Self {\n        Self {\n            value: 0,\n        }\n    }\n\n    // 2.\n    fn update(\u0026mut self, msg: Self::Message) -\u003e ShouldRender {\n        match msg {\n            Msg::Plus =\u003e self.value = self.value + 1,\n            Msg::Minus =\u003e self.value = self.value - 1,\n            Msg::Zero =\u003e self.value = 0,\n        }\n        true\n    }\n}\n\nimpl Renderable\u003cModel\u003e for Model {\n    fn view(\u0026self) -\u003e Html\u003cSelf\u003e {\n        // 3.\n        html! {\n            \u003csection class=(\"flex\", \"center\", \"height-vh\"), \u003e\n               \u003csection\u003e\n                    \u003cbutton\n                        class=(\"hover-blue\", \"cursor-pointer\"),\n                        onclick=|_| Msg::Plus,\n                        title=\"Click this to plus one\",\n                    \u003e\n                        { \"+1\" }\n                    \u003c/button\u003e\n                    \u003cbutton\n                        class=(\"hover-red\", \"cursor-pointer\"),\n                        onclick=|_| Msg::Minus,\n                        title=\"Click this to minus one\",\n                    \u003e\n                        { \"-1\" }\n                    \u003c/button\u003e\n                   \u003cp\n                        class=(\"flex\", \"center\", \"cursor-pointer\"),\n                        onclick=|_| Msg::Zero,\n                        title=\"Click this back to zero\",\n                    \u003e\n                        { self.value }\n                    \u003c/p\u003e\n               \u003c/section\u003e\n            \u003c/section\u003e\n        }\n    }\n}\n\nfn main() {\n    yew::initialize();\n    App::\u003cModel\u003e::new().mount_to_body();\n    yew::run_loop();\n}\n```\n\nYou can see that\n\n1. We write more options for **enum Msg**\n\n2. Modify update parts to make work with it\n\n3. Include some class names, title and event handlers for html! macro to work\n\nFor **html!** is macro, we don't need to invest time to find what they do, just follow the rules.\n\nIt is important to notice that you should write **,** when ever you write prop(atrribute) for your html tags.\n\nYou can live edit your app with **$yarn watch:rs**. Whenever you modify the html example, you will see message similar to this\n\n```console\n==== Triggering `cargo build` ====\n   Compiling index v0.1.0 (/steadylearner/Yew)\n```\n\nand it take a little bit long because **Rust** will statically verify your web application and wouldn't compile if there is a problem in your code.\n\nI hope you made it. You could include **steadylearner.css** in [Steadylearner Web] repository for your index.css or use your own CSS if you want.\n\nI hope you made it and we will find how to upload it in the website such as [Yew Counter] in [Steadylearner].\n\nIf you build the file with **$yarn prod** at this point, you will see console message similar to\n\n```console\n$cp target/deploy/index.css release/ \u0026\u0026 cp target/deploy/\n```\n\nand your production files ready at **release** folder.\n\n```console\n├── favicon.ico\n├── index.css\n├── index.html\n├── index.js\n└── index.wasm\n```\n\nIt won't be that different from **static** folder and we will learn how to modify it to work for in [our Rust Website][Steadylearner].\n\nThe entire app is simple but you may call yourself \"Full Stack Rust Devloper\" after you deploy more advanced apps later.\n\n(You may edit frontend part of [Rust Chat App] with [Yew] if you want a challenge.)\n\n## 5. How to upload it in your website\n\nThe files we made before are just static files.\n\nIf you have experience in single page apps and how to make them work in your website, you will know that what you need are\n\n1. Make a route for the **index.html** and verify it work\n\n2. Edit path for other static files such as **index.css**, **index.js**, **index.wasm** and **favicon.ico** etc.\n\nIn this part, we will use **Rust** Rocket framework and its relevant codes.\n\nI do not have any favor of it. Just use it for [Steadylearner] and [blog posts](https://www.steadylearner.com/blog) because\n\n1. It has many examples.\n\n2. It is better to use **path** first framework when you need many webpages with different paths.\n\nYou can use whatever web framework and languages you want and just refer the process here.\n\nIf you want the entire example for this part, you may refer to files and folder structure used for [Rust Chat App] and use static files you made.\n\nWe will first start with get.rs to write a route to serve **index.html** file we made before.\n\n```rust\nuse std::io;\nuse std::path::{PathBuf};\nuse rocket::response::{NamedFile, Redirect};\n\n// [Web]\n\n#[get(\"/yew_counter\")]\npub fn yew_counter() -\u003e io::Result\u003cNamedFile\u003e {\n    NamedFile::open(\"static/yew_counter/index.html\")\n}\n```\n\nYou can infer that you should incldue all the static files you made before in **static/yew_counter** folder.\n\nand **main.rs** to serve routes and start your application.\n\n```rust\n#![feature(proc_macro_hygiene, decl_macro, custom_attribute, rustc_private, type_ascription, async_await)]\n#[macro_use] extern crate rocket;\n#[macro_use] extern crate rocket_contrib;\n\nmod route;\nuse crate::route::{static_files, get};\n\nfn rocket() -\u003e rocket::Rocket {\n    rocket::ignite()\n        .mount(\n            \"/\",\n            routes![\n                static_files::file,\n\n                get::index,\n\n                // Web, I use it instead of Webassembly.\n\n                get::yew_counter,\n            ],\n        )\n        .register(catchers![error::not_found])\n}\n\nfn main() {\n    rocket().launch();\n}\n```\n\nThey are simplified and you can use your own codes instead.\n\nYou are ready with your serverside code.\n\nI hope you already made **yew_counter** folder and we should edit **index.html** and **index.js** file.\n\nBecause the environment to serve file is different between development and production, we have to modify paths to make everything work in serverside.\n\nYou can refer to [Steadylearner Web] repository and **static_files_in_server_example** in **Yew/referenece** folder if you want the entire example.\n\nInside **index.html** it have parts to link CSS files and JavaScript files to it.\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"steadylearner.css\" /\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"index.css\" /\u003e\n\n\u003cbody\u003e\n  \u003cscript src=\"index.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\nYou can modify it to\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"/static/css/steadylearner.css\" /\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"/static/yew_counter/index.css\" /\u003e\n\n\u003cbody\u003e\n  \u003cscript src=\"/static/yew_counter/index.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\nI had already equivalent CSS for [Steadylearner] so I used path for it instead of **yew_counter** folder not to duplicate here.\n\nIt would not be difficult to find what happens here if [you know how to deploy a website](https://www.google.com/search?q=how+to+deploy+Rust).\n\nand in your **index.js**, you can see that code to serve webassembly files similar to\n\n```js\nif (typeof process === \"object\") {\n    var path = require(\"path\");\n\n    var wasm_path = path.join(__dirname, \"index.wasm\");\n    var buffer = fs.readFileSync(wasm_path);\n    var mod = new WebAssembly.Module(buffer);\n    var wasm_instance = new WebAssembly.Instance(mod, instance.imports);\n    return instance.initialize(wasm_instance);\n} else {\n    var file = fetch(\"index.wasm\", {\n    credentials: \"same-origin\"\n});\n```\n\nIt may not work in your serverside so you may modify it to\n\n```js\nif (typeof process === \"object\") {\n    var wasm_path = \"/static/yew_counter/index.wasm\";\n    var buffer = fs.readFileSync(wasm_path);\n    var mod = new WebAssembly.Module(buffer);\n    var wasm_instance = new WebAssembly.Instance(mod, instance.imports);\n    return instance.initialize(wasm_instance);\n} else {\n    var file = fetch(\"/static/yew_counter/index.wasm\", {\n    credentials: \"same-origin\"\n});\n```\n\nIt is JavaScript but what we do is the same. You just modify paths to work well inside with other files in your machine.\n\nYou may use static files as they are and worked. But hope this example helpful whenever you find a path relevant problem.\n\nEverything is ready. You can use **$cargo run --bin main** or other command to start your app in production.\n\nYou will see your webpage similar to [Yew Counter] in [Steadylearner].\n\nI used term **production** here because what you need to do after this process is just to copy and paste them if you use virtual machine for Linux to deploy your website.\n\nYou can see [the exact example][Yew Counter] at [Steadylearner] and its many webpages.\n\n## 6. Conclusion\n\nI hope you made it.\n\nWe could set up development environment for Rust [Yew]. Then, we improved the official example. We could learn [how to deploy it][Yew Counter].\n\nIf you had already [a website built with Rust][Steadylearner], it wouldn't be difficult to follow this post. Because what we made are just static files and there is no difference from other CSS, HTML and JavaScirpt files etc.\n\nIn the next post, we will learn how to build [Rust Chat App] with [Yew] instead of JavaScript. It would not be difficult because we already have the minimal code and know how to deploy it.\n\nIf you want more advanced example, you may visit [Rocket Yew starter pack] or [Web completely in Rust].\n\nI want to people know that type of framework and languages are not important but programmers with these posts.\n\n**Thanks and please share this post with others.**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteadylearner%2Fwebassembly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteadylearner%2Fwebassembly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteadylearner%2Fwebassembly/lists"}