Rust + Yew + WebAssembly codebase containing real world examples (CRUD, auth, advanced patterns, etc)...

Yew + RealWorld spec and API

Rust + Yew + WebAssembly codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.

Demo    RealWorld

This codebase was created to demonstrate a fully fledged WebAssembly web application built with Yew including CRUD operations, authentication, routing, pagination, and more.

We've gone to great lengths to adhere to the Yew community styleguides & best practices.

For more information on how to this works with other frontends/backends, head over to the RealWorld repo.

How it looks

You can view a live demo over at Demo

Home(Web) Article(Web)
Edit(Desktop) Sign Up(Desktop)

How it works

This is an application written in Rust that utilizes Yew and WebAssembly for developing the frontend web app that powers the RealWorld application.

You can view a full list of crates being used in Cargo.toml, but here are some of the main ones of note:

  • yew - a modern Rust framework for creating multi-threaded frontend apps with WebAssembly.
  • yew-router - a routing library for the Yew framework.
  • lazy_static - a macro for declaring lazily evaluated statics in Rust.
  • parking_lot - provides implementations of Mutex, RwLock, Condvar and Once etc.
  • pulldown-cmark - a pull parser for CommonMark, used to parse Markdown.
  • serde - a generic serialization/deserialization framework.
  • chrono - date and time library for Rust.

Getting started

With Docker

docker-compose up

You can visit http://localhost:8000 in your browser now.

Manually

  • Install Rust

  • Install wasm-pack

    cargo install wasm-pack
    
  • Install node

  • Install npm packages

    npm run install
    
  • Build and develop

    Copy .env.example to .env, and you can change the environment variables if you like.

    cp .env.example .env
    npm start
    

    You can visit http://localhost:8000 in your browser now.

  • Build and release

    npm run build
    

    You should find static files at crates/conduit-wasm/dist folder now, they are hosted in gh-pages branch as a demo.

  • Build and develop for desktop

    If you're planning on targeting Linux you must ensure that Webkit2gtk is already installed and available for discovery via the pkg-config command.

    sudo apt-get update
    sudo apt-get install libwebkit2gtk-4.0-37 libwebkit2gtk-4.0-dev
    
    npm run build:webview
    cargo run -p conduit-webview
    
  • Test

    Install chromedriver, run tests in headless browsers.

    npm test
    

Create Yew App

This project was bootstrapped with Create Yew App, if you want to quickly setup a new Yew web app for your own, you might try Create Yew App, an unofficial tool to set up a modern Yew web app by simply running one command.

npx create-yew-app my-app
cd my-app
npm start

Contributing

Feel free to take a look at the current issues in this repo for anything that currently needs to be worked on.

You are also welcome to open a PR or a new issue if you see something is missing or could be improved upon.

License

Apache License (Version 2.0)

See LICENSE for details

Issues

Collection of the latest Issues

maxcountryman

maxcountryman

1

This project mentions its goal is to produce a project sample that adheres closely to Yew idioms. As far as build tooling goes, I'm curious why Trunk isn't used?

Versions

Find the latest versions by id

v0.1.8 - Mar 03, 2020

v0.1.7 - Jan 14, 2020

v0.1.4 - Dec 21, 2019

v0.1.3 - Dec 18, 2019

v0.1.2 - Dec 18, 2019

Information - Updated Apr 26, 2022

Stars: 438
Forks: 67
Issues: 6

maomi: A rust wasm framework for building pages with components

maomi is a MVVM-like framework for web development

maomi: A rust wasm framework for building pages with components

Rust / Wasm client web app framework

Pull requests which improve test coverage are also very welcome

Rust / Wasm client web app framework

A Rust/WASM Library to interact with Bitcoin SV

npm i bsv-wasm-bundler --save

A Rust/WASM Library to interact with Bitcoin SV

WASM / Rust / D3 example

Fetch data with Rust + WASM and show it with JS + D3

WASM / Rust / D3 example

@texhno-rust-wasm-game-of-life

A template for kick starting a Rust and WebAssembly project using Tutorial

@texhno-rust-wasm-game-of-life

rust wasm worker hello world

Built using the template at which

rust wasm worker hello world

👷‍♀️🦀🕸️ rustwasm-worker-template

A template for kick starting a Cloudflare worker project using

👷‍♀️🦀🕸️ rustwasm-worker-template

Rust WASM Web Worker Examples

This repository contains four different examples of using web workers in conjunction with WASM in

Rust WASM Web Worker Examples

NES Emulator in Rust-WASM

Requires Rust with cargo, nodejs, and wasm-pack

NES Emulator in Rust-WASM
Facebook Instagram Twitter GitHub Dribbble
Privacy