Code Monkey home page Code Monkey logo

seed-rs-realworld's Introduction

Netlify Status

RealWorld Example App

Seed 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 fullstack application built with Seed including CRUD operations, authentication, routing, pagination, and more.

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

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


NOTE: This project uses older Seed version 0.5.1. It will be updated and refactored once Seeder is ready. Please see built-in examples and other projects instead.


How it works

I think the best way to show you how it works is to describe what's going on step by step when you open this example in your browser. So let's say you've just written https://seed-rs-realworld.netlify.com/ to URL bar and pressed Enter:

  1. Netlify redirects your request to index.html. (See /netlify.toml.)
  2. There is a script in /index.html that loads wasm file and starts application.
  3. Application is initialized in /src/lib.rs - see block Start at the end of that file.
  4. The first is called function before_mount (we are still in file lib.rs):
    1. You can select mount point with .mount_point("element-id"). But the default one (app) is good for us.
    2. .mount_type(MountType::Takeover) means that the previous HTML content in the mount point will be replaced with the application HTML.
  5. Then the function after_mount is called:
    1. It tries to load Viewer from the local storage. Viewer is the object that contains info about currently logged in user (name, auth. token, avatar image url, etc).
    2. Then it creates a new Session with Viewer (or without it if you are not logged in). Session is de facto shared state - you are able to get it from all pages.
    3. Then the Model is created with Session. Model is enum, where each variant represents one page. Here, in init function, we create Model from variant Redirect because we haven't decided yet which page to show (i.e. Redirect is a "placeholder" variant).
    4. And we also try to parse given URL and send result to Seed's runtime.
  6. after_mount function also sends message RouteChanged which is handled in update function. Handler calls function change_model_by_route which choose the right Model according to the URL path.
  7. Model::Home is chosen in our example. However this variant should contain "sub-model" from /src/page/home so we need to call page::home::init(..) to get it.
  8. page::home::init loads required data (e.g. article feed or tags).
  9. We have data to show so when Seed's runtime calls View function again we can see it rendered in the browser.

We didn't talked about function sink in lib.rs in the steps above. sink has the similar purpose like update function but it handles global messages. It's the way how modules communicate with parents or with other modules. The most use case is to send GMsg::RoutePushed when we want to go to another page (see function go_to in /src/route.rs).

Getting started

  1. Install Rust
  2. Update Rust: $ rustup update
  3. Install WASM target: $ rustup target add wasm32-unknown-unknown
  4. Install cargo-make: $ cargo install --force cargo-make
  5. Build project from its root: $ cargo make all or $ cargo make watch
    • Note: You need some dependencies like pkg-config on Linux - just follow recommendations after compilation errors.
  6. Start local server: $ cargo make serve
    • Note: You have to open a new terminal tab/window if you used $ cargo make watch.
  7. Open in you browser localhost:8000

Contributing

  1. Create issues and PRs - bugs, missing documentation, typos, unreadable code...
  2. Squash commits, rebase on the current master and run $ cargo make verify (+ commit changes, if any) before creating PR.

Statistics

$ tokei
-------------------------------------------------------------------------------
 Language            Files        Lines         Code     Comments       Blanks
-------------------------------------------------------------------------------
 HTML                    1           21           19            2            0
 Markdown                1           66           66            0            0
 Rust                   81         5899         4869          344          686
 SVG                     1           17           17            0            0
 TOML                    4          199          146           20           33
-------------------------------------------------------------------------------
 Total                  88         6202         5117          366          719
-------------------------------------------------------------------------------

seed-rs-realworld's People

Contributors

martinkavik avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

seed-rs-realworld's Issues

localhost:8000 displays a blank page after running cargo make serve

Hi.
Thanks for helping Seed to get off the ground.
Noob to webdev and Rust, but I followed instructions and got a blank page.

Page source shows:
`

<title>Conduit</title>
<script type="module"> // https://rustwasm.github.io/docs/wasm-bindgen/examples/without-a-bundler.html import init from '/pkg/package.js'; init('/pkg/package_bg.wasm'); </script> `

I am running:
rustc 1.37.0 (eae3437df 2019-08-13)
on Xubuntu 19.04 Disco Dingo
in Firefox on a Dell G7.

I'd really like to use Seed with actors and WASM; is there anything I should know about using Seed with an actor model?

Thanks for your help

P.S. email is [email protected]

Can you run this app now?

Hello, I'm a newer for rust. I tried to run this app following by the guide, but got some error below.

Compiling seed v0.5.1
error[E0283]: type annotations needed for Closure<T>
--> C:\Users\Heney.cargo\registry\src\github.com-1ecc6299db9ec823\seed-0.5.1\src\browser\service\routing.rs:113:19
|
113 | let closure = Closure::new(move |event: web_sys::Event| {
| ------- ^^^^^^^^^^^^ cannot infer type for type parameter T
| |
| consider giving closure the explicit type Closure<T>, where the type parameter T is specified
|
= note: cannot satisfy _: WasmClosure
note: required by a bound in Closure::<T>::new
--> C:\Users\Heney.cargo\registry\src\github.com-1ecc6299db9ec823\wasm-bindgen-0.2.81\src\closure.rs:251:17
|
251 | T: ?Sized + WasmClosure,
| ^^^^^^^^^^^ required by this bound in Closure::<T>::new
help: consider specifying the type argument in the function call
|
113 | let closure = Closure::new::(move |event: web_sys::Event| {
| +++++

error[E0283]: type annotations needed for Closure<T>
--> C:\Users\Heney.cargo\registry\src\github.com-1ecc6299db9ec823\seed-0.5.1\src\browser\service\routing.rs:113:19
|
113 | let closure = Closure::new(move |event: web_sys::Event| {
| ------- ^^^^^^^^^^^^ cannot infer type for type parameter T
| |
| consider giving closure the explicit type Closure<T>, where the type parameter T is specified
|
= note: multiple impls satisfying [closure@C:\Users\Heney\.cargo\registry\src\github.com-1ecc6299db9ec823\seed-0.5.1\src\browser\service\routing.rs:113:32: 150:6]: IntoWasmClosure<_> found in the wasm_bindgen crate:
- impl<T, A, R> IntoWasmClosure<(dyn Fn(A) -> R + 'static)> for T
where <T as FnOnce<(A,)>>::Output == R, T: 'static, T: Fn<(A,)>, A: 'static, A: FromWasmAbi, R: 'static, R: ReturnWasmAbi;
- impl<T, A, R> IntoWasmClosure<(dyn FnMut(A) -> R + 'static)> for T
where <T as FnOnce<(A,)>>::Output == R, T: 'static, T: FnMut<(A,)>, A: 'static, A: FromWasmAbi, R: 'static, R: ReturnWasmAbi;
note: required by a bound in Closure::<T>::new
--> C:\Users\Heney.cargo\registry\src\github.com-1ecc6299db9ec823\wasm-bindgen-0.2.81\src\closure.rs:271:12
|
271 | F: IntoWasmClosure + 'static,
| ^^^^^^^^^^^^^^^^^^ required by this bound in Closure::<T>::new
help: consider specifying the type argument in the function call
|
113 | let closure = Closure::new::(move |event: web_sys::Event| {
| +++++

For more information about this error, try rustc --explain E0283.
error: could not compile seed due to 2 previous errors
[cargo-make] ERROR - Error while executing command, exit code: 101
[cargo-make] WARN - Build Failed.

OS: Windows11
rust: latest

Can you please help me run this app? Thanks.

API Domain change

Hello!

Due to governance changes, we are now using the realworld.io domain for the RealWorld demo (both client and API).
Requests from conduit.productionready.io are redirected to api.realworld.io, but such a redirection might lead to inconsistent responses.

We encourage domain change for the community.
If this repository is maintained anymore, we'll consider hosting a demo of your implementation in a few weeks with the domain change.

The demo link will be added to the RealWorld documentation.

drop-down list box on header

I want to add a language drop-down list box to the header part of each page. I think this part should be achieved by modifying the page/page.rs file, but I don’t know how to send events. any ideas?

div![select![
attrs! {At::Name => "lang"},
langs.iter().map(|lang| option![attrs! {At::Value => lang}, lang]),
input_ev(Ev::Change, |new_value| Msg::LangChanged(new_value)),
],],

sample build fails

I was trying to build this site as a sample to get a feel for Seed with Rust. I used 'cargo make all' after cloning and cd'ing into the directory and it returned a build failure with the following information:

error[E0433]: failed to resolve: could not find gloo_timers in seed
--> src/loading.rs:3:11
|
3 | use seed::gloo_timers::future::TimeoutFuture;
| ^^^^^^^^^^^ could not find gloo_timers in seed

and 33 instances of the error below (the Clone portion)

error[E0277]: the trait bound Ms: std::clone::Clone is not satisfied
--> src/entity/author.rs:33:1
|
33 | / pub fn view(username: &Username) -> Node {
34 | | a![
35 | | class!["author"],
36 | | attrs! {At::Href => Route::Profile(Cow::Borrowed(username)).to_string()},
37 | | username.to_string()
38 | | ]
39 | | }
| |_^ the trait std::clone::Clone is not implemented for Ms
|
= help: consider adding a where Ms: std::clone::Clone bound
= note: required by seed::dom_types::Node

I am using cargo version 1.39.0-nightly and cargo-make v0.22.2. The first error seems like it is coming from Seed. I would normally fix the second manually, but I have seen where resolving the first issue will solve many others (especially when they are all the same).

For what it is worth diagnostically, I have used Rust with Seed (your quickstart website and David OConnor's examples) without hitting any other these error messages.

Thanks for any insights you have and thanks for putting together some great fullstack Rust/Seed examples!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.