Skip to content
Template for web apps with Seed (Rust framework), TailwindCSS, Typescript and Webpack
JavaScript Rust TypeScript HTML CSS
Branch: master
Clone or download
Latest commit 34ebd7b Sep 17, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
configs updated dependencies + adapted project, port changed to 8000 Jul 26, 2019
crate fix: clock.ts, readme.md Jul 26, 2019
css updated dependencies + adapted project, port changed to 8000 Jul 26, 2019
entries updated dependencies + adapted project, port changed to 8000 Jul 26, 2019
scripts docs: code comments Apr 16, 2019
static smaller text-polyfill, minor refactors Apr 13, 2019
.gitignore webpack "pipeline" Apr 9, 2019
.travis.yml .travis.yml updated, netlify.toml Jul 26, 2019
CHANGELOG.md project adapted to seed/master Jul 26, 2019
LICENSE Update LICENSE Apr 20, 2019
README.md Update README.md Sep 17, 2019
netlify.toml .travis.yml updated, netlify.toml Jul 26, 2019
package.json
readme_video.gif docs: README.md updated + readme_video.gif Apr 19, 2019
yarn.lock updated dependencies + adapted project, port changed to 8000 Jul 26, 2019

README.md

Seed Quickstart with Webpack

Build Status Netlify Status

I want to write fast, reliable and efficient web apps. Quickly.
And I like documentation and WebAssembly.


UPDATE - A new version is in development in repository MartinKavik/kavik.cz. See its Readme for more info.

Once ready, I'll move current master into branch older and rewrite this Readme. New "killer" feature will be prerendering, so you will be able to write static sites in Seed for super fast first render and better SEO - see kavik.cz for demo. And there will be more useful starting example - content of kavik.cz - basic routing, favicons, social media metas, nice fonts, responsive HTML with TailwindCSS, Handlebars for more readable HTML, etc. I also want to write a template generator for this quickstart so you will be able to create new apps faster and more comfortably.


Main parts:

  • Seed - Rust framework, inspired by Elm.
  • Tailwind CSS - CSS framework. All CSS classes (not only Tailwind's(!)) are typed for safe use in Rust code. Unused classes are automatically deleted for much smaller bundle size.
  • Typescript - When I need to go to the dark world of Javascript. I can generate Typescript types from Rust code for safer communication.
  • Webpack - It needs a little bit of magic to setup, but it's flexible and fast enough. Also it has many useful loaders and plugins and dev-server that is accessible from mobile devices.

LIVE DEMO: seed-quickstart-webpack.netlify.com

  • Automatically deployed to Netlify from master branch by Travis CI.
  • Compressed app size with assets is about 105 KB (look at Developer Tools on demo page).

Basic workflow

(Recorded in ScreenToGif)

  1. Start dev-server with yarn start.
  2. Open 127.0.0.1:8000 in my browser. Or something like 192.168.0.5:8000 on my phone.
  3. Change code & save it.
  4. Check changes in browsers.
  5. Run tests on NodeJS with yarn test. Or for specific browser e.g. yarn test:firefox.
  6. If I haven't configured .travis.yml, I have to run yarn build:release and upload /dist folder into my server.

I need to install

  1. Rust
  2. NodeJs
  3. Yarn

How to create my new app

  1. Clone or download this repo.
  2. Choose name for my app. E.g. "iamgroot".
  3. /package.json - Change author and name set to "iamgroot".
  4. /crate/Cargo.toml - Change authors and description, name set to "iamgroot".
  5. /entries/index.ts - Change word "appname" to "iamgroot" everywhere.
  6. /entries/index.html - Change title.
  7. Modify /README.md, /LICENCE and /CHANGELOG.md.
  8. Run command yarn in the project root.
  9. [Optional] Push new app into my repository. (GitHub guide).
  10. [Optional] Setup auto-deploy into Netlify through Travis CI. (See chapter Continous integration).

Commands

  • yarn build and yarn build:release

    • Bundle app and save it into /dist.

    Build pipeline:

    • Remove previous build from /dist/.
    • Generate styles from /css/styles.css (see /configs/postcss.config.js).
    • Generate /crate/src/generated/css_classes.rs from styles.
    • [only release] Filter out unused CSS classes from styles.
    • Process styles with autoprefixer.
    • Compile Rust:
      • /crate/ will be built into /create/pkg/.
      • Typescript files included in Rust code (see /crate/src/ts_apis.rs) will be copied to /crate/pkg/snippets/[id]/src/ts/.
    • Bundle assets (css, images, ts, js...) and [only release] uglify/minify them. (See /configs/webpack.config.js and /configs/tsconfig.json)
    • Compile template /entries/index.html (i.e. Add bundle link into template and save result into /dist/).
    • Copy files from /static/ into /dist/static/.
    • [only release] Optimize /dist/[name].wasm for size (see /scripts/optimize_wasm.js).
  • yarn start

    • Build project and start developer server on 127.0.0.1:8000.
    • Server auto-reloads browser tabs on changes.
    • It doesn't destroy state if I change only styles (hot reload).
    • I can connect mobile devices to dev server:
      1. Note: Devices and server have to be connected to the same network.
      2. Find out local IP of the device where the dev server is running.
      3. Connect mobile device with that IP and server port. E.g.: 192.168.1.5:8000.
  • yarn test

    • Run tests in NodeJs.
  • yarn test:{browser}

    • Run tests in headless browser.
    • {browser} should be firefox, chrome or safari.

Project file structure

  • .gitignore - Don't commit temporary files and folders. Keep .keep files.
  • .travis.yml - Build, test and deploy master branch into Netlify.
  • configs/ - Build and compile settings.
    • postcss.config.js - Generate, filter and modify styles.
    • tsconfig.base.json - Strict Typescript compiler settings.
    • tsconfig.css_classes.json - Used when command yarn generate:css_classes is executed.
    • tsconfig.json - Main Typescript config.
    • webpack.config.js - Main Webpack config.
    • webpack.css_classes.config.js - Used when command yarn generate:css_classes is executed.
  • crate/ - Rust crate.
    • Cargo.lock - Dependency locks.
    • Cargo.toml - I can optimize build speed / size here.
    • pkg/ - Folder is created after crate compilation by wasm-pack.
      • .gitignore - Ignore all.
      • index.d.ts - Generated Typescript types from Rust code for index.js.
      • index.js - Provides exported functions from Rust and loads WASM. Have to be imported only once and in async mode because of side-effects.
      • index_bg.d.ts - Types for index_bg.wasm.
      • index_bg.wasm - Compiled Rust code.
      • package.json - Settings generated from Cargo.tom.
      • snippets/ - Typescript files included in Rust code.
        • index-[id]/ - Directory tree is mirrored from /crate/.
          • src/
            • ts/
              • helpers.ts
              • seed_helpers.ts
    • src/ - Contains the most important Rust and Typescript souce code.
      • app.rs - Main app parts - Model, Msg, update, ...
      • generated/ - Contains generated Rust files (except mod.rs)
        • mod.rs - Just exports generated modules.
        • css_classes.rs - Rust struct that contains all CSS classes with comments.
      • lib.rs - Main crate file.
      • rust_apis.rs - Rust interfaces exported to the Typescript world. See /crate/pkg/index.d.ts.
      • ts/ - Typescript files.
        • clock.ts - Generates CustomEvents with time for demo app. I can delete it.
        • helpers.ts - Generates random numbers for demo app. I can delete it.
        • seed_helpers.ts - Same as /crate/src/seed_helpers.ts.
      • ts_apis.rs - Typescript interfaces imported into the Rust world. Remeber that imported TS files are copied into crate/pkg/snippets/... so there can be problems with dependencies. See that file for more information.
    • target/ - Compiled Rust and metadata.
      • **...
    • tests/ - Rust tests. Executed with yarn test or yarn test:[browser].
      • test.rs - Super simple example test.
  • css/ - Foundations for styles. See Tailwind's docs.
    • styles.css
  • dist/ - Contains bundled app waiting for deploy after yarn build:release.
    • ...
  • entries - Webpack's entries.
    • index.css_classes.ts - Used when command yarn generate:css_classes is executed.
    • index.html - Template used by HtmlWebpackPlugin.
    • index.ts - Main entry.
  • CHANGELOG - Quickstart changelog.
  • LICENSE - MIT license.
  • netlify.toml - Contains redirect to index.html for better SPA support.
  • node_modules/ - NodeJS dependencies.
    • ...
  • package.json - Quickstart settings.
  • README.md - Quickstart docs.
  • readme_video.gif - Video in /README.md. I can delete it.
  • scripts/ - Quickstart helpers.
    • optimize_wasm.js - Optimize *.wasm files in /dist/ with wasm-opt from library Binaryen
    • postcss_rust_helpers.js - Helps with filtering used CSS classes.
  • static/ - This folder will be copied into /dist/
    • images/ - Images for demo app. I can delete it.
      • decoration.png
      • quickstart.png
    • text-polyfill.min.js - Polyfill for TextDecoder and TextEncoder. (See caniuse.com)
  • yarn.lock - Dependency locks.

Continous integration

How to setup Travis CI pipeline with deploy into Netlify for free

  1. I've done all steps from chapter How to create my new app.
  2. My app is in a public GitHub repository.
  3. Create a new Netlify site.
  4. [Optional] Change site name or forward it to your domain.
  5. [Optional] Turn on HTTPS.
  6. [Optional] Turn on prerendering for better SEO. (Site detail > Settings > Build & deploy > Prerendering)
  7. [Optional] Add badge [netlify | Success] to project README (Site detail > Settings > General > Status badges).
  8. Note somewhere Site id (Site detail > Settings > General > API ID)
  9. Create and note somewhere Access token (Click on my avatar > User settings > Applications > New access token > Name it for instance TravisCI)
  10. Sync my TravisCI account with my GitHub one.
  11. Find repository with app in my list and click on Settings.
  12. Add Environment Variable NETLIFY_SITE_ID and set it's value to Site id.
  13. Add Environment Variable NETLIFY_ACCESS_TOKEN and set it's value to Access token.
  14. Switch to tab Current and click Activate repository.
  15. [Optional] Add badge [build | passing] to project README (Repository detail > Click on badge next to the rep. name > IMAGE URL change to MARKDOWN)
  16. [Optional] Modify /.travis.yml. (If it isn't working, check Repository detail > More options > Requests)
  17. [Optional] Adjust /netlify.toml to suit your needs. Netlify docs.

Browser and platform support

Quickstart has been tested in:

  • Firefox, Chrome and Edge on Windows 10 (desktop PC)
  • Firefox, Chrome and Safari on iOS (iPhone SE)
  • [I can create PR or Issue]

There isn't integrated compilation from Wasm to Js, so IE is not supported. (However It should be possible with wasm2js.)

Used in projects

Contributing

  • Better 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

You can’t perform that action at this time.