yewstack / yew-wasm-pack-template

A template for starting a Yew project to be used with wasm-pack

About

This template shows how to create a web app using Yew and wasm-pack.

🚴 Usage

🛠️ Build

When building for the first time, ensure to install dependencies first.

yarn install

yarn run build

🔬 Serve locally

yarn run dev

🔋 Batteries Included

• wasm-bindgen for communicating between WebAssembly and JavaScript.
• wee_alloc, an allocator optimized for small code size.

yew-wasm-pack-template's Issues

App fails to run with production build: Incorrect response MIME type for wasm

This application fails to run. Instead, we get the following error output in the browser console:

Uncaught (in promise) TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

Steps to reproduce:

1. git clone https://github.com/yewstack/yew-wasm-pack-template.git
2. yarn install
3. yarn build
4. cd dist
5. serve

Open the app in the browser, open dev tools, view the error message.

Add styling to showcase how to use a sass loader

Move netlify information to deploy branch

Problem

The netlify directory is not useful for devs that clone the template project. It shouldn't be in the master branch.

Proposed Changes

• Remove netlify directory from master branch
• Use deploy branch for netlify deploys
• Create github action that merges master to netlify when the "Check" action succeeds
• Modify github "Deploy" action to deploy from the deploy branch

Can I use npm instead of yarn?

I'm curious if this project works with npm as well? The package.json looks compatible and I tried to run with npm install && npm run start:dev, it seems to work fine. Is there any particular feature that only works on yarn?

I'm not asking you to change yarn to npm. I'm asking because I'm building a tutorial on Rust and WebAssembly. I've already introduced npm earlier sections (while introducing wasm-pack-template), and I'm trying to see if I can ask the student to use npm on this project as well. The tutorial is targeting complete beginners so I want to avoid introducing both npm and yarn and confuse the students.

use yew 0.16

Is this repo still active?

Hi!

I would like to help upgrade this to yew-0.12.
But as a previous effort #5 didn't get accepted I am unsure if my time might be better spent elsewhere.

Where is it served to?

If I understand this example correctly, yarn run start:dev should serve this site locally. But what is the address?
http://localhost:8080/ does not work.

What am I missing?

Unable to build - TypeError: Cannot read property 'stat' of undefined

After cloning the repo, installing the dependencies with

yarn install

all the commands provided in the pachakge.json result in the following error:

➜  yew-wasm-pack-template git:(master) yarn run build
yarn run v1.22.4
$ webpack --mode production
🧐  Checking for wasm-pack...

✅  wasm-pack is installed. 

ℹ️  Compiling your crate in release mode...

TypeError: Cannot read property 'stat' of undefined
    at WasmPackPlugin._compile (/home/robin/code/yew-wasm-pack-template/node_modules/@wasm-tool/wasm-pack-plugin/plugin.js:130:24)
    at _checkWasmPack.then (/home/robin/code/yew-wasm-pack-template/node_modules/@wasm-tool/wasm-pack-plugin/plugin.js:66:23)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:695:11)
    at startup (bootstrap_node.js:188:16)
    at bootstrap_node.js:609:3
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I'd be very happy if someone had a clue why i can't compile the template.

Edit action on form is not working - Has PR

When you double click an item of the TODO list in order to edit it. The view_entry turns into a view_entry_edit_input and allows you to edit it's value. But it is not working. Only the last char you type on your keyboard gets changed in the text of the TODO item.

Add documentation explaining how this template project works

wee_alloc can appear to leak

I recently converted a piece of software from std-web to web-sys and everything went really well at least in super light testing. However, unbeknownst to me, a memory leak crept in and it turns out to happen when I use wee-alloc and have my project configured like I think yew-wasm-pack-template is demonstrating.

If I do the same thing using wasm-pack, I don't see the behavior.

I've created a repository that demos what I'm seeing. My workaround is simply not to use wee-alloc, but this behavior is surprising enough to me that I think it probably makes sense to mention it to somebody. I do, however, feel bad mentioning it here, but I think I'd feel worse mentioning it elsewhere.

Should `console_error_panic_hook` be moved to `[dev-dependencies]`?

Considering the language and stated performance overhead beginning at https://github.com/yewstack/yew-wasm-pack-template/blob/master/Cargo.toml#L24 should console_error_panic_hook be moved to [dev-dependencies]?

"not all trait items implemented" rust error when running yarn run build

Howdy,

I cloned the repo, ran yarn install and then yarn run build and received the following rust error:

error[E0046]: not all trait items implemented, missing: `change`
  --> src/app.rs:46:1
   |
46 | impl Component for App {
   | ^^^^^^^^^^^^^^^^^^^^^^ missing `change` in implementation
   |
   = help: implement the missing item: `fn change(&mut self, _: <Self as yew::html::Component>::Properties) -> bool { todo!() }`

Implementing the missing method fixes the issue and the crate then compiles and yarn run start:dev starts successfully.

PR incoming.

Error: Rust compilation.

I cloned the repo installed all the things i think are necessary and get the following errors with

yarn run build

yarn run v1.19.2
$ webpack --mode production
🧐  Checking for wasm-pack...

ℹ️  Installing wasm-pack 

Error: Rust compilation.
    at ChildProcess.<anonymous> (/home/naikon/Documents/dev/test/rust/yew/project_test/yew-wasm-pack-template/node_modules/@wasm-tool/wasm-pack-plugin/plugin.js:190:16)
    at ChildProcess.emit (events.js:203:13)
    at maybeClose (internal/child_process.js:1021:16)
    at Socket.<anonymous> (internal/child_process.js:430:11)
    at Socket.emit (events.js:203:13)
    at Pipe.<anonymous> (net.js:588:12)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

and

yarn run start:dev

yarn run v1.19.2
$ webpack-dev-server --mode development
🧐  Checking for wasm-pack...

ℹ️  Installing wasm-pack 

ℹ ｢wds｣: Project is running at http://localhost:8000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /home/naikon/Documents/dev/test/rust/yew/project_test/yew-wasm-pack-template/dist
✖ ｢wdm｣: Error: Rust compilation.
    at ChildProcess.<anonymous> (/home/naikon/Documents/dev/test/rust/yew/project_test/yew-wasm-pack-template/node_modules/@wasm-tool/wasm-pack-plugin/plugin.js:190:16)
    at ChildProcess.emit (events.js:203:13)
    at maybeClose (internal/child_process.js:1021:16)
    at Socket.<anonymous> (internal/child_process.js:430:11)
    at Socket.emit (events.js:203:13)
    at Pipe.<anonymous> (net.js:588:12)

System is ArchLinux and all packages up to date

uname -a
Linux archdesk 5.3.11-arch1-1 #1 SMP PREEMPT Tue, 12 Nov 2019 22:19:48 +0000 x86_64 GNU/Linux

Rust version is 1.39 stable

Update to yew 0.19