Seed Quickstart with Webpack

I want to write fast, reliable and efficient web apps

. Quickly.
And I like Rust and documentation.


!!! New Rust-only quickstart in development! => Seeder !!!


LIVE DEMO: quickstart-webpack.seed-rs.org

Main components:

  • Seed - Rust framework, inspired by Elm. Seed's Awesome list.
  • Tailwind CSS - CSS framework. All CSS classes in your project are typed for safe use in Rust code. Unused classes are automatically deleted for much smaller bundle size.
  • Webpack - Bundler. Auto-reload on code change, dev-server accessible from mobile phones, prerendering for static websites... and many more useful features are prepared for you in this quickstart.
    • Why Webpack instead of Rust-only build pipeline? - Wiki
  • Production-ready starter project - Example project is based on the website with several pages, favicons, nice fonts, meta tags for social media, buttons for scrolling to top, header which is hidden on scrolling, etc. It can be prerendered, but it also contains loading screen. For more complex project (based on another quickstart) see seed-rs-realworld.
  • Production-ready configuration - Project is linted, compiled, prerendered and deployed in CI pipeline (see .github/workflows/main.yml and netlify.toml). Linters are very strict.

Zero to Hero

How to create your new app, modify it and deploy it - step by step guide.

1. Create a new project

I want to show you how to create, build and host your website for free, so we will need a public GitHub repository.

  1. The simplest way how to do it is to click on the green button Use this template on the GitHub profile of this quickstart.

  2. Make sure Git doesn't automatically convert your newlines to CLRF because linters don't like it.

    • Run $ git config --global core.autocrlf in your terminal and it should return input or false. See Git docs for more info.
  3. Clone your new repository to your local machine. I use GitKraken, but you are probably better developer than me - use your favorite terminal.

2. Install / check required tools

  1. Make sure you have basic tools installed:

    • Yarn - run $ yarn -v in terminal. It should output something like 1.22.4
    • Node.js - $ node -v => v12.13.0
    • Rust - $ rustc -V => rustc 1.43.1 (8d69840ab 2020-05-04)
    • Rust target wasm - $ rustup target list => .. wasm32-unknown-unknown (installed) ..
      • Install: $ rustup target add wasm32-unknown-unknown
  2. Platform-specific tools like ssl and pkg-config:

    • Follow recommendations in build errors (during the next chapter).
    • Note: Don't hesitate to write a tutorial and create PR or write a Wiki page for your platform.
  3. These tools are required by some commands:

    • wasm-pack

      • Check: $ wasm-pack -V => wasm-pack 0.9.1
      • Install: $ cargo install wasm-pack
    • cargo-make

      • Check: $ cargo make -V => cargo-make 0.30.7
      • Install: $ cargo install cargo-make
    • nightly rustfmt

      • Check: $ cargo +nightly fmt -- -V => rustfmt 1.4.14-nightly (a5cb5d26 2020-04-14)
      • Install:
        1. $ rustup toolchain install nightly
        2. $ rustup component add rustfmt --toolchain nightly

3. Prepare your project for work

  1. Open terminal in your project
  2. Install Webpack and other dependencies - $ yarn
  3. Try to start dev-server - $ yarn start - and then open localhost:8000 in a browser.
  4. Stop server (try Ctrl+c).
  5. Try to lint your project - $ cargo make verify_only - you shouldn't see any errors.
  6. Modify files like LICENCE, README.md and Cargo.toml as you wish and push changes into GitHub.

4. Write your website

  1. Open project in your favorite IDE. I use IntelliJ or VS Code.
  2. Run $ yarn start in terminal.
  3. Open localhost:8000 in a browser.
  4. You can open it also in your mobile phone:
    1. Make sure your dev-server aka computer is in the same network as your phone.
    2. Find out your local IP address. Use e.g. this online tool: https://www.whatismybrowser.com/detect/what-is-my-local-ip-address.
    3. Open URL with found IP address and default port (e.g. 192.168.1.5:8000) on your phone.

Note: You don't have to follow all steps below - reuse starter project code as you need.

Header

  1. Open src/page/partial/header.rs in your IDE.
  2. Delete function header_visibility.
  3. Write a new body for function view.

Footer

  1. Open src/page/partial/footer.rs in your IDE.
  2. Write a new body for function view.

404

  1. Open src/page/not_found.rs in your IDE.
  2. Write a new body for function view.

Home page

  1. Open src/page/home.rs in your IDE.
  2. Write a new body for function view.

About page

  1. Open src/page/about.rs in your IDE.
  2. Write a new body for function view.

App core

  1. Open src/lib.rs in your IDE.
  2. Change TITLE_SUFFIX value.
  3. Delete MAIL_TO_KAVIK and MAIL_TO_HELLWEB.
  4. Write a new body for function view.

Favicons

  1. Delete or replace files in /favicons.
  2. Open static/templates/favicons.hbs in your IDE.
  3. Delete content or update it.
    • Note: Templates are written in Handlebars.

Loading page

  1. Open static/templates/loading_page.hbs in your IDE.
  2. Delete content or update it.

Social media & basic settings

  1. Open static/templates/social_media.hbs in your IDE.
  2. Delete content or update it.

Basic HTML

  1. Open static/index.hbs in your IDE.
  2. Update content.

Fonts

  1. Delete or replace files and directories in static/fonts.
  2. Open /css/fonts.css in your IDE.
  3. Delete content or update it.

Images & other files

  1. Delete or replace files in static/images.
  2. Delete static/Martin_Kavik_resume.pdf.

TailwindCSS

  1. Open tailwind.config.js in your IDE.
  2. Update content or replace it with the default one:
module.exports = {
  theme: {},
  variants: {},
  plugins: []
};

Custom CSS

  1. Open /css/custom.css in your IDE.
  2. Delete content or update it.

5. Prepare your project for deploy

How to format, lint and test your project.

And how to setup Github Actions with deploy into Netlify.

Formatter & Linter

  1. Format: $ cargo make fmt (it overwrites files) or only $ cargo make fmt_check
  2. You can modify format settings in:
    • rustfmt.toml
    • Makefile.toml - tasks fmt and fmt_check
  3. Lint: $ cargo make clippy
  4. You can modify linter settings in:
    • Makefile.toml - task clippy

Testing

  1. Run $ cargo make test_h firefox for headless testing in Firefox.
    • There are more similar commands - see Makefile.toml
    • Note: There is only one test in this project (tests/test.rs), see seed-rs-realworld for more examples.
  2. If you want to test prerendered website:
    1. $ yarn build:prerender
    2. $ yarn serve:dist
    3. Open localhost:8000 in a browser.
    4. Tip: Always test it also in production environment because e.g. routing is a little bit different among servers.
  3. Always run $ cargo make verify before push to make sure CI pipeline will accept your code.
    • It'll format your code, lint it and start headless tests in Firefox.
    • You can change its behaviour in Makefile.tom - task verify (similar task verify_only is used in CI).

Netlify

  1. Create a new Netlify site.
  2. [Optional] Change site name or/and use your own domain.
  3. [Optional] Turn on HTTPS.
  4. [Optional] Add badge to project's /README.md (Site detail > Settings > General > Status badges).
  5. Note somewhere Site id (Site detail > Settings > General > API ID)
  6. Create and note somewhere Access token (Click on your avatar > User settings > Applications > New access token > Name it for instance GitHub)
  7. [Optional] Adjust /netlify.toml to suit your needs. Netlify docs.

Github Actions

  1. Open your GitHub repository in your favorite browser.
  2. Click on Settings and then on Secrets.
  3. Add secret NETLIFY_SITE_ID and set it's value to Site id.
  4. Add secret NETLIFY_ACCESS_TOKEN and set it's value to Access token.
  5. Click on Actions in the side menu and make sure that Actions are enabled.
  6. [Optional] Modify /.github/workflows/main.yml.
    • Replace yarn build:prerender with yarn build:release if you don't want to prerender pages.
  7. [Optional] Push your code and switch to tab Actions to check that everything works.

Manual Deployment

  1. Run yarn build:realease.
  2. Check if build works by running yarn serve:dist and view in a browser.
  3. Deploy the contents of the dist directory to a web server.

Travis CI

Content (this guide and related config file are not maintained)
  1. Sync your TravisCI account with your GitHub one.
  2. Find repository with your app in your list and click on Settings.
  3. Add Environment Variable NETLIFY_SITE_ID and set it's value to Site id.
  4. Add Environment Variable NETLIFY_ACCESS_TOKEN and set it's value to Access token.
  5. Switch to tab Current and click Activate repository.
  6. [Optional] Add badge to project's /README.md (Repository detail > Click on badge next to the rep. name > IMAGE URL change to MARKDOWN)
  7. [Optional] Modify /.travis.yml.
    • Replace yarn build:prerender with yarn build:release if you don't want to prerender pages.
    • Tip: If jobs don't want to start after push, check Repository detail > More options > Requests.

6. Add your project to Awesome list

  1. Create PR or issue in awesome-seed-rs.

Used in projects

  • seed-rs/seed-rs.org
  • MartinKavik/kavik.cz
  • [create PR or Issue]

Contributing

  • Improved documentation, fixed typos, updated dependencies, ... - create Issue or PR.
  • Ideas, bugs, questions, ... - create Issue.

Note: Please squash commits and rebase before creating PR. Thanks!


Other Seed projects

  • seed-rs/awesome-seed-rs
Issues

Collection of the latest Issues

Person-93

Person-93

1

The files get corrupted when I try to clone the repo or download it as a zip. The only way to get them is to download them as raw files. After googling for a bit, I learned that this happens to font files in git repos because git tries to manage line endings for you. It can be fixed by adding this to your .gitattributes

Versions

Find the latest versions by id

v0.7.5 - Oct 23, 2020

  • Updated dependencies (including Seed 0.8.0).

v0.7.4 - Sep 17, 2020

  • Change dist output location
  • Teporarily switch test to Chrome - Gecko fails

v0.7.3 - Jul 11, 2020

  • BugFix: Prevent Purge from removing valid selectors

v0.7.2 - Jul 11, 2020

  • upgrade postcss-typed-css-classes to v0.2.0

v0.7.1 - Jun 10, 2020

v0.7.0 - May 24, 2020

  • Moved files and directories located in crate directory to project root directory.
  • Moved files and directories located in configs directory to project root directory.
  • Moved files and directories located in entries directory to static directory.
  • Moved entries/index.ts to project root directory.
  • Update/remove references to crate, configs and entries directories in configuration files and documentation.

v0.6.0 - May 12, 2020

  • Updated all JS dependencies.
  • Added <base href="/"> and related comments to support non-root deploys.
  • Updated all JS dependencies.
  • App adapted to Seed 0.7.0.
  • Disable unnecessary error message on the overlay.
  • App refactored.
  • Added FUNDING.yml.
  • Updated README.md.

v0.5.0 - Feb 10, 2020

  • Seed updated to 0.6.0.
  • [BREAKING] wasm-pack > 0.9.0 required.
  • Deleted unnecessary optimize-wasm.js script.
  • Minor lib.rs changes - removed Clone constraint on Msg and prerendered variable is replaced with a Model's property.
  • Added wasm_bindgen_test_configure!(run_in_browser); into test.rs.
  • Disabled performance hints in webpack.config.js.
  • Removed critters-webpack-plugin.

v0.4.1 - Jan 24, 2020

  • Ignore clippy lint rule must_use_candidate.
  • Optimized build (WASM file size changed from 584 to 349 KB).
  • Seed updated to 0.5.1 + updated crate/src/lib.rs.
  • Updated all Rust dependencies.
  • Updated all JS dependencies.

v0.4.0 - Dec 11, 2019

  • Seed updated to 0.5.0 + refactored crate/src/lib.rs.
  • All Rust and JS dependencies updated.
  • GHA workflow main.yml - on: [push] changed to on: [push, pull_request].

v0.3.1 - Nov 28, 2019

  • Travis CI replaced with Github Actions
  • Seed updated to 0.4.2 + refactored crate/src/lib.rs

v0.3.0 - Sep 29, 2019

  • Quickstart is now based on https://github.com/MartinKavik/kavik.cz
  • Rewritten README.md
  • Previous version moved into branch older

v0.2.0 - Jul 26, 2019

  • Updated all dependencies + project adapted to them:
    • Set outDir in WasmPackPlugin
    • Removed css/tailwind.js
    • Changed paths in entries/index.ts
    • Removed comments from css/styles.css
    • Updated CSS classes in crate/src/app.rs
    • Updated import of ClearnWepackPlugin
  • Dev server port changed from 3000 to 8000
  • Added netlify.toml for better SPA support
  • crate/* changes:
    • Updated dependencies in Cargo.toml and Seed set to master (probably temporary)
    • Refactored app.rs, lib.rs, rust_api.rs, clock.ts, ts_apis, seed_helpers.ts
    • Removed seed_helpers.rs

Information - Updated May 25, 2022

Stars: 102
Forks: 14
Issues: 13

Rust bindings for libinjection

Add libinjection to dependencies of Cargo

Rust bindings for libinjection

Rust bindings for the C++ api of PyTorch

LIghtweight wrapper for pytorch eg libtorch in rust

Rust bindings for the C++ api of PyTorch

Rust leveldb bindings

Almost-complete bindings for leveldb for Rust

Rust leveldb bindings

rust-analyzer is a modular compiler frontend for the Rust language

It also contains some tips &amp; tricks to help you be more productive when using rust-analyzer

rust-analyzer is a modular compiler frontend for the Rust language

Rust-Lightning is a Bitcoin Lightning library written in Rust

lightning, does not handle networking, persistence, or any other I/O

Rust-Lightning is a Bitcoin Lightning library written in Rust

Rust FUSE - Filesystem in Userspace

Rust library crate for easy implementation of Crate documentation

Rust FUSE - Filesystem in Userspace

Rust crate to implement a counterpart to the PBRT book's (3rd edition) C++ code:

Some images of the test scenes are shown below, but you can find more

Rust crate to implement a counterpart to the PBRT book's (3rd edition) C++ code:

Rust Persian Calendar

1** provides functionality for conversion among Persian (Solar Hijri) and Gregorian calendars

Rust Persian Calendar

Rust DjangoHashers

A Rust port of the password primitives used in alternatice implementation: the package library that requires OpenSSL

Rust DjangoHashers

Include Handlebars Templates for Rocket Framework

This is a crate which provides macros handlebars_resources_initialize! and handlebars_response! to statically include HBS (Handlebars) files from your Rust project and make them be the...

Include Handlebars Templates for Rocket Framework

actix-web-async-graphql-rbatis

Clean boilerplate for graphql services using actix-web, rhai, async-graphql, surf, rbatis, graphql-client, handlebars-rust, jsonwebtoken, and mysql / postgresql

actix-web-async-graphql-rbatis

actix-web-async-graphql-rbatis

Clean boilerplate for graphql services using actix-web, rhai, async-graphql, surf, rbatis, graphql-client, handlebars-rust, jsonwebtoken, and mysql / postgresql

actix-web-async-graphql-rbatis
Facebook Instagram Twitter GitHub Dribbble
Privacy